Buttons with same name

• Buttons MUST have a descriptive and unique accessible name.
• The accessible name SHOULD contain the visual text if available for the button.
  Note: If there is no visual label provided for the button, the accessible name can be provided as per the purpose.
• The visible button text MUST meet the text contrast requirement.
• The visible text MUST be at least 4.5:1 against the background color if it’s a standard text in default, focused and hover state.
• The minimum contrast requirement ratio of 3:1 for the large text or text with 14pts and bold MUST be met in default, focused and hover state.
• The contrast requirement of 3:1 ratio MUST be met with the adjacent colors for the custom focus indicator if used for the buttons.
• The contrast ratio requirement of 3:1 MUST be met with the adjacent colors for the image buttons in default, focused and hover state.

• The button text CAN be made descriptive and unique to convey the purpose.
• The title attribute CAN be used to provide a descriptive and unique accessible name.
• An off-screen button text CAN be provided to make the accessible name descriptive and unique.
  • CSS can be used to place the text off-screen. For more information on placing text off-screen, visit https://css-tricks.com/comparing-various-ways-to-hide-things-in-css/
• If an image is used to identify the buttons, then a textual description MUST be defined for the image buttons.
  • If the image is defined using <img> element, use an alt attribute with descriptive value.
  • If the image is defined using <svg> element, use role="img" and aria-label attribute to provide a role and an accessible name for the element.
    Note: Providing ARIA based role and attribute on SVG image ensures robust support across different environments.

Example,

<!-- Descriptive and Unique button text -->
<button>Explore more about organization</button>
...
<button>Explore more about policies</button>

<!-- title attribute on button -->
<button title="Explore more about organization">Explore more</button>
...
<button title=" Explore more about policies">Explore more</button>

<!-- off-screen button text -->
<button>Explore more<span class="visually-hidden"> about organization</span></button>
...
<button>Explore more<span class="visually-hidden"> about policies</span></button>

<!-- CSS clipping technique for placing the text off-screen -->
<style>
    .visually-hidden:not(:focus):not(:active) {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
</style>

ARIA approach CAN be used if using HTML implementation is not possible.

• aria-labelledby attribute CAN be used to associate the visual text with the button by referencing the id attribute of visual text container or visually hidden text container and the button itself.
  • Concatenation of multiple pieces of text to form a name is possible through this attribute by referencing the respective id attribute values.
  • While concatenation, the order of id attribute value is important.
  • id attribute values SHOULD be present in the same HTML document.
  • It CAN be specified in case of design constraint as well wherein an additional visual text cannot be added for the button.
    Example,
    

    <h2 id="org">Organization</h2>
    ...
    <button id="primary" aria-labelledby="primary org">Explore More <span class="visually-hidden"> about </span></button>
    

• Note: If both button text and aria-labelledby or aria-label and aria-labelledby or button text, aria-label and aria-labelledby are present, the aria-labelledby will take precedence to convey the accessible name of the button.
• aria-label attribute CAN be used to define a label for the button that does not have supporting visual label.
• It’s a challenge for internationalization because its value will not get translated and will require manual updating.
• It’s also a challenge for labelling wherein the labels must be updated as these are hardcoded values.
• It’s not visible on-screen so ONLY helps assistive technology users such as screen reader users.
  Example,
  

  <button aria-label="Explore more about organization">Explore More</button>
  

• aria-describedby attribute CAN be used to associate the additional information with the respective button by referencing the id attribute of visual text container or visually hidden instruction text container.
• This attribute must NOT be used for labelling a form control.
  Example,
  

  <h2 id="org">Organization</h2>
  ...
  <button id="primary" aria-describedby="primary org">Explore More <span class="visually-hidden"> about </span></button>
  

A well-defined button with unique and descriptive name benefits majorly the below users.

• People with cognitive disabilities
• People with visual disabilities
• People using speech input