Checklist
A manual checklist is of course no substitute for automated testing, or static analysis, of your page. A checklist can though help us catch a certain class of issues that might not be surfaced by such tools, or that might result in false positives.
What? | Why? |
Ensure your page has a valid doctype e.g. | Standards mode helps improve consistent screen reader behaviour. |
Ensure your html tag has a valid lang attribute e.g. | Informs the screen reader of which language to read your page in. |
Ensure your head section has a valid title element | Informs the screen reader of the purpose and/or content of the page. |
Ensure unique ids for all elements | Duplicate IDs can prevent screen reader from reading form labels. |
Ensure dynamically generated ids are unique | Duplicate IDs can prevent screen reader from reading form labels. |
Ensure HTML attributes are used to convey state rather than classnames e.g. | Class names provide no semantics to screen readers |
Ensure ARIA attributes are used to convey state rather than classnames e.g. | Class names provide no semantics to screen readers |
Ensure | These tags have specific semantics to screen readers. |
Ensure a single h1 heading exists on the page | This tells the user where they are and the purpose of the page. |
Ensure that all main page regions have a single h2 heading | This will help a screen reader user make a mental model of the page. |
Ensure any page landmarks have relevant ARIA roles (e.g. banner, nav, main, complementary) | This will help a screenreader user scan & navigate the page. |
Ensure all page landmarks are labelled (except role="main"). | This will provide a human readable description of the landmark. |
Ensure that your main content wrapper has id="mainContent", tabindex="-1", role="main" | This is required by "Skip to Main Content" link in eBay global header. |
Do not set a tabindex attribute other than -1 or 0 | Only the DOM order should be used to dictate order of keyboard navigation. A value of -1 allows programmatic focus with JavaScript. A value of 0 adds element to natural tab order. Use with care. |
Do not set a non-negative tabindex attribute on non-interactive elements or text | Non-interactive elements must never be in the tab order. |
Ensure non-modal overlays are placed adjacent in the DOM to their nearest visual element | Allows natural tab order and screen reading order from page into flyout overlay |
Ensure noscript tag is only used as a fallback for lazy loaded images | Noscript tag is an anti-pattern. Use progressive enhancement instead. |
Autocomplete is an extension of Combobox. In addition to the checklist below, please follow all items in Combobox checklist.
What? | Why? |
Ensure text input has | Informs assistive technology that list of suggestions (listbox) will be displayed |
A carousel is a composite containing two buttons and a viewport. The viewport contains n items and the buttons update the content of this viewport.
What? | Why? |
Ensure the carousel is preceded by a heading | Screen reader users (all users, infact) want to know what the carousel contains |
Ensure a list is used to markup the carousel items | A list informs screen reader user of number of items and current position in list |
Ensure carousel items outside of viewport are not in taborder | Only the visible items should be in tab order |
Ensure carousel items outside of viewport are hidden from screen reader using | Only the visible items should be available to screen reader |
Ensure any slideshow behaviour can be paused | Slideshows are distracting to users with cognitive disabilities |
Ensure any auto-play slideshow behaviour loops only once | Some users prefer to wait for slideshow to end before interacting with page |
Ensure carousels have left/right pagination buttons | Keyboard user needs a way of paginating the carousel viewport |
Ensure all pagination controls have an accessible label e.g. | Critical icon buttons need an accessible label for screen readers |
Combobox is a composite pattern containing a textbox, listbox (in flyout) and optional button (to expand/collapse).
What? | Why? |
Ensure text input has | Disables built-in HTML5 autocomplete which interferes with this control |
Ensure textbox has | Informs assistive technology that this input has an associated listbox |
Ensure textbox has | Informs assistive technology of listbox state (true or false |
Ensure textbox has | Informs assistive technology of current active suggestion in list |
Ensure listbox has a unique id | The textbox input needs to reference this ID |
Ensure suggestion listbox has | Informs assistive technology of listbox semantics |
Ensure each option in listbox has | Informs assistive technology of listbox option semantics |
Ensure each option in listbox has unique id | Used in conjunction with aria-activedescendant |
Ensure active option in listbox has | Required by voiceover (but not other screen readers) to identify the active listbox option |
Ensure listbox is navigable with up/down arrow keys | Allows keyboard user to make select an option |
Ensure combobox has offscreen status region detailing number of suggestions | In some screen readers, combobox functionality will not be discoverable without this hint |
Our dialogs are always modal. It is feasible for a dialog to be non-modal, but these cases are typically less common.
What? | Why? |
Ensure dialog has | Assistive technology will inform user of dialog behaviour when focus enters dialog |
Ensure dialog is labelled with | Assistive technology will inform user of dialog purpose when focus enters dialog |
Ensure dialog contains at least one interactive element | This allows us to set focus on a window element on open. |
Ensure dialog has keydown event handler for | This allows keyboard users to easily dismiss the dialog |
Ensure keyboard focus cannot leave dialog | Our dialog has modal behaviour |
Ensure screen reader virtual cursor cannot leave dialog | Our dialog has modal behaviour |
We will be adding more checklists soon.
Stay tuned. more checklists for custom controls to follow...