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

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.