Developer checklist

The following checklists are intended to guide developers on the implementation of success criterion for the keyboard. The checklists should be used during the development phase to ensure WCAG 2.0 compliance of keyboard use on the site and should form part of the unit testing phase undergone by developers when updating or creating new content or functionality.

Areas of importance to be reviewed for keyboard access are also covered specifically in the relevant category factsheet:

  • Navigation
  • Content
  • Coding
  • Forms
  • Interactive site features (e.g. Interactive Maps, Slideshow, Image Gallery, etc.).

Level A

Keyboard accessibility

KYB_A1: Keyboard trap

Is the site keyboard accessible (i.e. there are no keyboard traps within the navigation, content, links, form elements, buttons or any other object control within interactive or static content of the site)?

Correct example(s)

N/A

Incorrect example(s)

Keyboard user is unable to tab out of this plugin.
Incorrect Example Of KYB_A1. AddThis plugin pop-up.

KYB_A2i: Keyboard accessible

Is all content keyboard accessible (i.e. all interactive features and static content can be fully accessed and operated with the keyboard alone)?

Correct example(s)

N/A

Incorrect example(s)

Dropdown navigation cannot be activated by the keyboard.
Incorrect Example of KYB_A2i. Top navigation tab is open to a dropdown menu.

KYB_A2ii:

Is all content keyboard accessible (i.e. the TITLE attribute has not been used on links to present information not otherwise present on the page)?

Correct example(s)
Example 1:
<a href="newsletter.PDF">Newsletter(PDF, 1 MB)</a>
Example 2:
<a href="newsletter.PDF">Newsletter</a>
Incorrect example(s)

Example 1: TITLE attribute has extra information

<a href="newsletter.PDF" title="PDF, 1 MB">Newsletter</a>

Example 2: TITLE attribute has same information

<a href="newsletter.PDF" title="newsletter">Article</a>

KYB_A2iii:

Is all content keyboard accessible (i.e. the TITLE attribute has not been used on images to present information not otherwise present on the page)?

Correct example(s)

ALT attribute used.

<IMG id=fav_rd_18 alt="Add to Favourites" src="/fav_off.png">

Incorrect example(s)

TITLE attribute used.
Incorrect Example of KYB_A2iii. Pop-up text reads "Add to Favourites".

KYB_A3: Item presentation

Does the item presentation (e.g. navigation, content, links, form elements, buttons or any other object control) change on keyboard focus?

Correct example(s)

Mouse hover
Correct Example of KYB_A3 on mouse hover. Focused link is underlined.

Keyboard focus—same presentation change
Correct Example of KYB_A3 on keyboard focus. Focused link is underlined and has a yellow frame.

Incorrect example(s)

Mouse hover
Incorrect Example of KYB_A3 on mouse hover. Link is underlined and has a dotted frame.

Keyboard focus—no presentation change
Incorrect Example of KYB_A3 on keyboard focus. Link has not changed presentation.

KYB_AA1: Keyboard focus

Is there a highly visible keyboard focus indicator on all items (e.g. navigation, content, links, form elements, buttons or any other object control)?

Note: Although this is a AA issue, its impact on users is very high and addressing it as if it were a Level A, high impact issue is recommended.

Correct example(s)

Visible keyboard focus indicator
Correct Example of KYB_AA1. Link has a blue frame.

Incorrect example(s)

No visible keyboard focus indicator
Incorrect Example of KYB_AA1. Link has no visible focus indicator.

KYB_A4i:

Does all content appear on keyboard focus (i.e. the appearance of content such as tool tips is consistent with its appearance on mouse over)?

Correct example(s)

On mouse over
Correct example of KYB_A4i on mouse over. A pop-up over the focused link reads "Melbourne observations".

On keyboard focus
Correct example of KYB_A4i on keyboard focus. A pop-up over the focused link reads "Melbourne observations".

Incorrect example(s)

On mouse over
Incorrect example of KYB_A4i on mouse over. A pop-up over the focused link reads "1 Cafe style dining area with blackboard menu".

On keyboard focus
Incorrect example of KYB_A4i on keyboard focus. There is no pop-up with additional information.

KYB_A4ii:

Is the keyboard focus order meaningful – does the TAB order preserve meaning and operability (i.e. the TABINDEX attribute has not been used as this may interfere with built-in logical tab order)?

Correct example(s)

TABINDEX is not used.

Incorrect example(s)
<input name="query" value="" size="50" class="QSInput" id="query" tabindex="3" type="text">

KYB_A5i: Keyboard operation

Are standard keyboard shortcuts operable (i.e. the ACCESSKEY attribute has not been used as this may interfere with the shortcuts of the browser, operating system or assistive technology)?

Correct example(s)

ACCESSKEY is not used.

Incorrect example(s)
<label class="QSLabel" accesskey="s" for="query">

KYB_A5ii:

Are standard keyboard shortcuts operable (i.e. can the navigation be operated through standard keyboard means such as using the TAB key to move across the top menu and the up and down arrow keys to move up and down the navigation dropdown)?

Correct example(s)

The TAB key is used to move across top level items, opening sub menus as appropriate. The up and down arrow keys are used to move up and down the sub menu. Correct example of KYB_A5ii. A top-level navigational tab is receiving focus and has opened a dropdown menu.

Incorrect example(s)
Cannot open sub menu with the keyboard. Incorrect example of KYB_A5ii. A top navigation with no dropdown menu opened. No tabs are receiving focus.

KYB_A6: Content

Is all page content and instructional text device-independent (i.e. “click” alone is not used)?

Correct example(s)

Use ‘select’ or provide a descriptive link.

Incorrect example(s)
Incorrect example of KYB_A6. "Click on Find Jobs."