Are any role, tabindex or aria-* attributes unnecessary?.Elements with tooltips are focusable using the Tab key.Interactive elements can be accessed with the Tab key and have a visible focus state.

Clickable icons are buttons, that is, is used and not.

Non-decorative icons have an aria-label.

Quick checklistĪnd images have descriptive accessible names. You can read more about enabling browser-specific keyboard navigation on a11yproject.

Enable the setting Use keyboard navigation to move focus between controls.

Enable keyboard navigation on macOSīy default, macOS limits the tab key to Text boxes and lists only. So when in doubt don’t use aria-*, role, and tabindex and stick with semantic HTML. It is likely that misuse of ARIA is a big cause of increased errors, They found that “ARIA correlated to higher detectable errors”. In WebAIM’s accessibility analysis of the top million home pages, Relevant combinations of screen readers and browsers. Use semantic HTML, which has accessibility semantics baked in, and ideally test with Review the following recommendations before using aria-*, role, and tabindex. This page contains guidelines we should follow. To ensure they have an equivalent experience to sighted mouse users.

Hide decorative images from screen readersĪccessibility is important for users who use screen readers or rely on keyboard-only functionality.

Do not use tabindex='0' on elements for screen readers to read.

Do not use tabindex='0' on interactive elements.

Avoid using tabindex='0' to make an element interactive.

Buttons and links with descriptive accessible names.

GlFormCombobox components with an accessible names.

GlToggle components with an accessible names.

Provide accessible names for screen readers.

Html accessibility screen reader