Accessibility
Overview of accessibility tools and audits.
Complete documentation with in context examples, code examples and potential solution on how to fix the audits for screen reader compatibility and to meet WCAG guidelines.
Screen reader compatibility
- <audio> element not supported by FIREFOX
- <dialog> element not supported by FIREFOX
- <dialog> element not supported by SAFARI
- <input type="color"> element not supported by FIREFOX
- <input type="color"> element not supported by SAFARI
- <input type="date"> element not supported by SAFARI
- <input type"datetime-local"> element not supported by FIREFOX
- <input type"datetime-local"> element not supported by SAFARI
- <input type="month"> element not supported by FIREFOX
- <input type="month"> element not supported by SAFARI
- <input type="time"> element not supported by SAFARI
- <input type="week"> element not supported by FIREFOX
- <input type="week"> element not supported by SAFARI
- <meter> element not supported by FIREFOX
- <video> element not supported by FIREFOX
WCAG Guidelines
Web Content Accessibility Guidelines (WCAG) Principle 1: Perceivable
Content and user interface components must be presented in a way that users can perceive.
Non-text Content
WCAG Guideline 1.1: Text Alternatives
All non-text content should have text alternatives for accessibility.
- Active <area> elements must have alternate text
- ARIA meter nodes must have an accessible name
- ARIA progressbar nodes must have an accessible name
- Images must have alternate text
- Image buttons must have alternate text
- <object> elements must have alternate text
- [role='img'] elements have an alternative text
- svg elements with an img role have an alternative text
Captions (Prerecorded)
WCAG Guideline 1.2: Time-based Media
All prerecorded audio content should have captions to make it accessible to those who are deaf or hard of hearing.
Information and Relationships
WCAG Guideline 1.3: Adaptable
Ensure that content and functionality remain operable and accessible under various user preferences and assistive technologies.
- All th elements and elements with role=columnheader/rowheader must have data cells they describe
- <dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements
- autocomplete attribute must be used correctly
- All cells in a table element that use the headers attribute must only refer to other cells of that same table
- <ul> and <ol> must only directly contain <li>, <script> or <template> elements
- Form elements must have labels
- Certain ARIA roles must contain particular children
- <dt> and <dd> elements must be contained by a <dl>
- Select element must have and accessible name
- Certain ARIA roles must be contained by particular parents
- <li> elements must be contained in a <ul> or <ol>
- ARIA hidden element must not contain focusable elements
Use of Color
WCAG Guideline 1.4: Distinguishable
Do not rely solely on color to convey information; ensure there are alternative methods for users who cannot perceive color.
WCAG Principle 2: Operable
User interface components and navigation must be operable and navigable.
Keyboard
WCAG Guideline 2.1: Keyboard Accessible
All functionality should be operable using a keyboard.
Pause, Stop, Hide
WCAG Guideline 2.2: Enough Time
Users should have control over any time-based content to pause, stop, or hide it.
Page Titled
WCAG Guideline 2.4: Navigable
Each web page should have a descriptive and meaningful title.
WCAG Principle 3: Understandable
Information and operation of the user interface must be understandable.
Language of Page
WCAG Guideline 3.1: Readable
The language of the page should be programmatically determined or declared.
- Ensure all parts of the document are tagged with the correct language
- lang attribute must have a valid value
- <html> element must have a valid value for the lang attribute
- The ISO language code used is a valid
- HTML elements with lang and xml:lang must have the same base language
- <html> element must have a lang attribute
- The ISO language code matches the language found on the page
Make Web pages appear and operate in predictable ways.
wcag32
Help users with disabilities by presenting content in a predictable order from Web page to Web page and by making the behavior of functional and interactive components predictable.
Error Identification
WCAG Guideline 3.3: Input Assistance
Users should be provided with suggestions for correcting input errors.
WCAG Principle 4: Robust
Content must be robust enough to work with current and future technologies.
Parsing
WCAG Guideline 4.1: Compatible
Content should be well-formed and able to be reliably interpreted by assistive technologies and user agents.
- Input buttons must have discernible text
- ARIA tooltip nodes must have an accessible name
- Use aria-roledescription on elements with a semantic role
- ARIA input fields must have an accessible name
- Buttons must have discernible text
- ARIA toggle fields have an accessible name
- Elements must only use allowed ARIA attributes
- Required ARIA attributes must be provided
- aria-hidden='true' must not be present on the document body
- id attribute value must be unique
- ARIA attributes must conform to valid values
- Select element must have and accessible name
- ARIA roles used must conform to valid values
- ARIA commands must have an accessible name
- ARIA hidden element must not contain focusable elements
- Links must have discernible text
- Active <area> elements must have alternate text
- IDs of active elements must be unique
- IDs used in ARIA and labels must be unique
- ARIA attributes must conform to valid names
- Form elements must have labels
- Frames must have title attribute