Checklist

eBay MIND Patterns
Search…
Introduction
Messaging
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.
Most, if not all, of the "general" items can be identified with an automated testing tool or browser plugin, such as Axe by Deque. The component specific level checklists will require manual testing.
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.
Carousel
A carousel is a composite pattern containing two left/right "paddle" buttons and a viewport. The viewport contains n items and the paddles 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 and flyout listbox. A combobox may optionally be enhanced with autocomplete behaviour (see specific guidance in the table below).
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 active descendant is navigable with up/down arrow keys. 
Allows keyboard user to select an option
Ensure focus remains in textbox while options are navigated with arrow keys.
Allows keyboard user to edit text
OPTIONAL: Ensure combobox has offscreen status region detailing number of suggestions
In some screen readers, combobox functionality will not be discoverable without this hint
For autocomplete behaviour, ensure text input has aria-autocomplete="list"
Informs assistive technology that list of suggestions (listbox) will be displayed
Dialog
Dialogs may be modal or non-modal (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
If modal, ensure aria-modal="true" is present
Assistive technology will present different behaviour for input device based on this value
If modal, ensure dialog contains at least one interactive element
This allows us to set focus on a window element on open.
If modal, ensure dialog has keydown event handler for ESC key
This allows keyboard users to easily dismiss the dialog
If modal, ensure keyboard focus cannot leave dialog
Modal elements should constrain keyboard focus
If modal, ensure screen reader virtual cursor cannot leave dialog
Modal elements should constrain virtual cursor
​
We will be adding more checklists soon.
Stay tuned. more checklists for custom controls to follow...
ARIA Essentials
FAQ
Last modified 4mo ago
Copy link
Outline