Access Keys Module

Posted by Gordon Anderson on 30 October 2012 | 0 Comments

Blind (and able sighted) users can navigate your site using the keyboard

Functionality

• Adds an access key tab to every page in the CMS editor, where an access key can be optionally set
• Adds an Include template to render the access keys in your HTML
• Adds an accessibility information page that displays the access keys in readable form for reference
• Adds an accessibility tab to the Site Configuration in the CMS with option of configuring the 'Skip to Navigation' access key

Installation

git clone git://github.com/gordonbanderson/weboftalent-access-keys.git
cd weboftalent-access-keys
git checkout stable24

The name of the installation directory does not matter.

Usage

SiteMap Pages

Any class that extends Page, and thus appears in the SiteTree, will have an AccessKey field associated with it. When editing this appears in an Accessibility tab.

Access Key in Accessibility Tab

Templates

Add the following to your Page templates, after the body tag.

<% include AccessKeys %>

CSS

Note that the following CSS will be required in your site in order to not have the access key list showing visually at the top of each website page. Positioning it off the screen still allows screenreaders to read the text, but it will not be visible on the visual output.

#accesskeys {
    position: fixed;
    left: -100000px;
}

Accessibility Page

An Accessibility Information Page is like any other page except that after the main body, a list of access keys that have been configured is shown.

Accessibility Information

Site Configuration

The access key for skipping to main navigation can be configured here

site configuration access keys

Silverstripe Version Compatibility

2.4 only (tested with 2.4.5+) - stable24 branch

Tags: silverstripe, module, github, accessibility, access keys