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.

General

What?

Why?

Ensure your page has a valid doctype e.g. <!doctype html> for HTML5

Standards mode helps improve consistent screen reader behaviour.

Ensure your html tag has a valid lang attribute e.g. <html lang="en">

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. <button disabled> rather than <button class="disabled">

Class names provide no semantics to screen readers

Ensure ARIA attributes are used to convey state rather than classnames e.g. <a role="tab" aria-selected="true"> rather than <a class="tab" class="selected">

Class names provide no semantics to screen readers

Ensure <i> tags are not used as CSS icon holders. Use a <span> element instead.

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

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 aria-autocomplete="list"

Informs assistive technology that list of suggestions (listbox) will be displayed

Carousel

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 aria-hidden="true"

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. <button class="icon-arrow-right" aria-label="Next slide" />

Critical icon buttons need an accessible label for screen readers

Combobox

Combobox is a composite pattern containing a textbox, listbox (in flyout) and optional button (to expand/collapse).

What?

Why?

Ensure text input has autocomplete="off"

Disables built-in HTML5 autocomplete which interferes with this control

Ensure textbox has role="combobox"

Informs assistive technology that this input has an associated listbox

Ensure textbox has aria-expanded attribute

Informs assistive technology of listbox state (true or false

Ensure textbox has aria-activedescendant state

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 role="listbox"

Informs assistive technology of listbox semantics

Ensure each option in listbox has role="option"

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 aria-selected="true"

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

Dialog

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 role="dialog"

Assistive technology will inform user of dialog behaviour when focus enters dialog

Ensure dialog is labelled with aria-labelledby or aria-label

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 ESC key

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...