FAQ - Frequently Asked Questions about Accessibility

Accessible Name

The accessible name of an OK button <button>OK</button> is the visible text "OK". The role is button. Accessible names for links, buttons, menu items, etc. is the HTML text wrapped inside the tags. If an <img> tag image element is used then the most robust method for an accessible name is the alt attribute value. If a background image is used to make a link, button, or clickable control the simplest method to make an accessible name is using an aria-label attribute value. ARIA always overrides the accessible name created using any other HTML4 method! aria-label="accessible name" is less code and invisible to sighted users so does not change the design. aria-labelledby is more code because it uses ID attribute value references but aria-labelledby is also more powerful because it can combine multiple strings of text on screen into a single accessible name spoken in the order you supply the ID values.

android:contentDescription

android:contentDescription is used to give an image, button, and other controls an accessible name in native Android Apps. An image of a floppy disk that is used to save a file may use "Save" as the contentDescription value. Add Content Descriptions - Developing Accessible Applications | Android Developers

accessibilityLabel

accessibilityLabel is used to give an image, button, and other controls an accessible name in native iOS Apps. For example, a “Play music” button might display an icon that shows sighted users what it does. To be accessible, however, the button should have the accessibility label “Play” or “Play music” which is spoken to VoiceOver. Note, however, that the label should never include the control type (such as “button”) because this information is contained in the traits associated with the accessibility element. Add Content Descriptions - Developing Accessible Applications | Android Developers

aria-labelledby

aria-labelledby attribute is used to connect the text strings from multiple ID references to be set as the accessible name of the element spoken to the screen reader user in the order of the supplied ID attribute values separated with a space between each ID.

display:none CSS

CSS display:none property:value is used to completely remove an HTML element from view to both sighted and screen reader users. display:none is a GOOD way to hide content that's invisible and should NOT be focusable.

<fieldset> <legend>

Groups of radio buttons and checkboxes need accessibility grouping semantics to programmatically associate the question text to the group. This is most commonly done with HTML4 <fieldset> <legend> method where the <fieldset> wraps the entire group of radio buttons and the question and then the question is wrapped in a <legend> tag. The effect on the screen reader is that when they tab into the radio buttons they will hear the question text spoken aloud whether they tab forward into the group or backward into the group.