eBay

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

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

results matching ""

    No results matching ""