AccessibilityOz



Bureau of Meteorology

Developer Factsheet

Keyboard

By: AccessibilityOz

Date: October 2013

Overview

Keyboard accessibility principles

Website accessibility via the keyboard is one of the most important aspects of disability access. Keyboard accessibility is important to people with the following disabilities:

▪ Blindness;

▪ Low vision;

▪ Motor impairments; and

▪ Cognitive impairments.

It is commonly known that websites are often accessed using the mouse. However, for many users, the use of the keyboard can increase their ability to navigate and access the content and functionality of a web page effectively. Some users will rely on their keyboard exclusively. Individual use and combinations of keys such as the ‘TAB’, ‘Ctrl’, ‘Shift’, ‘Enter’ and arrow keys are used, sometimes in conjunction with the use of other assistive technologies such as screen readers.

Areas of importance for keyboard access are also covered specifically in the relevant category factsheets:

• Navigation

Use of main and sub navigation with and without the use of JavaScript.

• Content

Accessing links and moving around the page, avoiding reference to device-dependent handlers within page content or feature instructions.

• Coding

Controlling moving or scrolling content.

• Forms

Entering, validating and submitting information.

• Interactive site features

Using Interactive maps and Image maps; Slideshows; Image galleries; Virtual tours; Magazines; Calendars; Flash or JavaScript features and Java applets; Audio/Video and any other interactive object.

Accessibility principles specific to the use of the keyboard include, but are not limited to:

• Avoid keyboard traps

o When a keyboard user encounters a keyboard trap and is therefore unable to exit a site feature or content area they are effectively stuck and must close the browser window and start again. If all content, controls and interactive elements cannot be accessed and/or operated via the keyboard, users that rely on the keyboard alone will be unable to navigate or understand the site.

• Ensure that all content can be accessed with the keyboard alone

o Do not prevent keyboard users from accessing any website content or functionality.

o Ensure that standard keyboard shortcuts are operable and that the navigation can be accessed through standard means.

o Avoid referring to device-dependent handlers (e.g. “click”) within page content or instructional text.

• Keyboard focus indicator is highly visible and clear

o Do not remove visible keyboard focus indicators on any items i.e. links, navigation, form fields, buttons or any other object control.

• Ensure that all information is available via the keyboard

o Avoid the use of the TITLE attribute on links and images as this information cannot be accessed by the keyboard.

o Ensure that all content appears on keyboard focus in a way which is consistent with content appearing on mouse over e.g. tool tips.

• Item presentation changes on keyboard focus

o Item presentation should change when keyboard focus is received in the same way as when a mouse hovers over the content.

Impact on users

The following is an overview of common keyboard accessibility errors and the impact on users with a disability.

• Avoid keyboard traps

When a keyboard user encounters a keyboard trap they are unable to exit a site feature or content area and are effectively stuck and must close the browser window and start again.

• Ensure that all content can be accessed with the keyboard alone

Content, controls and interactive elements that cannot be accessed and/or operated via the keyboard will not be available to keyboard users.

• Keyboard focus indicator is highly visible and clear

Without a highly visible keyboard focus indicator on all items such as links, navigations, form fields, buttons or any other object control, the keyboard user is unable to perceive where they are on the page content, or within the interactive site feature, and take their desired action.

• Ensure that all information is available via the keyboard

When the TITLE attribute is used on links and images to present information not otherwise available on the web page the keyboard user is not able to access this content.

• Item presentation changes on keyboard focus

A change in item presentation, in the same manner as when the mouse hovers over the item, aids navigation around the site, location of desired information and activation of required functionality.

Developer Checklist - Keyboard

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 and Interactive site features (e.g. Interactive Maps, Slideshow, Image Gallery etc).

Level A

|Ref |Requirement |Details |Corre|Incorrect code |Pass | |KYB_A1 |

| | | |ct | | | | |

| | | |code | | | | |

|KYB_A2i |Keyboard accessible |Is all content keyboard accessible (i.e. all interactive |⎫ |N/A |⎦ |Dropdown navigation cannot be | |

| | |features and static content can be fully accessed and | | | |activated by the keyboard. | |

| | |operated with the keyboard alone)? | | | |[pic] | |

|KYB_A2ii | |Is all content keyboard accessible (i.e. the TITLE |⎫ |Example 1: |⎦ |Example 1: Title attribute has | |

| | |attribute has not been used on links to present | |Newsletter| |extra information | |

| | |information not otherwise present on the page)? | |(PDF, 1 MB) | |Newsletter | |

| | | | |Newsletter | |Article | |

|KYB_A2iii | |Is all content keyboard accessible (i.e. the TITLE |⎫ |ALT attribute used. |⎦ |TITLE attribute used. | |

| | |attribute has not been used on images to present | | | | | |

|KYB_A3 |Item presentation |Does the item presentation (e.g. navigation, content, |⎫ |Mouse hover |⎦ |Mouse hover | |

| | |links, form elements, buttons or any other object control)| |[pic] | |[pic] | |

| | |change on keyboard focus? | |Keyboard focus – same presentation | |Keyboard focus – no presentation | |

| | | | |change | |change | |

| | | | |[pic] | |[pic] | |

|KYB_AA1 |Keyboard focus |Is there a highly visible keyboard focus indicator on all |⎫ |Visible keyboard focus indicator |⎦ |No visible keyboard focus indicator| |

| | |items (e.g. navigation, content, links, form elements, | |[pic] | |[pic] | |

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

|KYB_A4i | |Does all content appear on keyboard focus (i.e. the |⎫ |On mouse over |⎦ |On mouse over | |

| | |appearance of content such as tool tips is consistent with| |[pic] | |[pic] | |

| | |its appearance on mouse over)? | |On keyboard focus | |On keyboard focus | |

| | | | |[pic] | |[pic] | |

|KYB_A4ii | |Is the keyboard focus order meaningful - does the TAB |⎫ |TABINDEX is not used. |⎦ | | |

|KYB_A5i |Keyboard operation |Are standard keyboard shortcuts operable (i.e. the |⎫ |ACCESSKEY is not used. |⎦ | | |

| | |interfere with the shortcuts of the browser, operating | | | | | |

| | |system, or assistive technology)? | | | | | |

|KYB_A5ii | |Are standard keyboard shortcuts operable (i.e. can the |⎫ |The TAB key is used to move across |⎦ |Cannot open sub menu with the | |

| | |navigation be operated through standard keyboard means | |top level items, opening sub menus | |keyboard. | |

| | |such as using the TAB key to move across the top menu and | |as appropriate. The up and down | |[pic] | |

| | |the up and down arrow keys to move up and down the | |arrow keys are used to move up and | | | |

| | |navigation dropdown)? | |down the sub menu. | | | |

| | | | |[pic] | | | |

|KYB_A6 |Content |Is all page content and instructional text |⎫ |Use ‘select’ or provide a |⎦ |[pic] | |

| | |device-independent (i.e. "click" alone is not used)? | |descriptive link. | | | |

-----------------------

AccessibilityOz

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download