In his new book "Designing for Web Standards", Jeffrey Zeldman explains how defining the accesskey attribute on link elements allows users to navigate websites via the keyboard instead of a mouse. This helps users with physical disabilities navigate through a website more easily as well as creating a "Hot-Key" like feature that benefits all frequent visitors to a site. The accesskey is a useful feature but as Jeffrey notes, no widely used browser provides a method for users to display accesskey letter assignments, short of viewing the source code. Not knowing what accesskeys are associated with each link makes them of limited value, and they are under used on most websites.
The additional features of Cascading Style Sheets, Level 2 (CSS2) that modern web browsers are beginning to support provide some possible solutions that could encourge the accesskey attribute to be more widely used. Specifically, the :before and :after pseudo-elements allow browsers to generate content and insert it within a document.
The content generated by the pseudo-elements can include quotation marks, counters, embeddable objects such as images, and strings of text. Thegenerated content is somewhat limited, as the browser will not parse HTML markup included in this manner. The text will also appear within the parent element the CSS style has been applied to, and can not be independently positioned on the page.
The good news is that this string of text can include the content from one or more of the parent element's attributes. When applied to a link these attributes include the url, title, language, link-type, and accesskey. Using the :after pseudo-element we can display the otherwise hidden accesskey information to the user:
This will insert the accesskey assignments in parentheses immediately after each link on a page without changing the underlying content of the document. This increases the usefulness of the accesskey attribute, but displaying this information is not relevant to all users and many people would prefer that it not appear onscreen at all times. Fortunately we can give users some control over when to include this information.
The first technique we can use to selectively display CSS generated content is to use a style-sheet switcher. This gives people the option of choosing a style with enhanced accessibility options, including the display of the accesskey attribute with each link. If the user doesn't want to be presented with this information, they can select a style-sheet that doesn't include this feature. The ability to use the accesskey feature will be available all users, regardless of the style-sheet they are using to view the website.
The second method, is to make use of a contextual selector to specify that the generated content is only applied to the document when the user requires it. By using :hover and :focus pseudo classes, and combining them with the :before and :after pseudo-elements, the accesskey assignments can be displayed onscreen when the user tabs onto a link or rolls over a link with their cursor. The CSS properties for these two contextual selectors can be defined at the same time by using a comma to group them together:
Depending on the pseudo-element used, the generated text will be inserted on the page either before or after the contents of the link. It's important to note that adding extra text wil change the width of the link, so careful use of CSS to control formatting and positioning may be necessary to avoid unintended visual disruptions, such as "jumping text" during a rollover.
This menu was created with an ordinary bulleted list and the CSS2 :after pseudo-element. Move your cursor over the links to see additional pop-up information including the target url, title, type of link and accesskey. These links have had their tabindex attributes set, allowing you to use the Tab key to move between them and display the pop-up information.
This example should work in Mozilla, Netscape 6+, Opera 7, Safari, and Konqueror. Browsers without CSS should be presented with regular unstyled content, in this case a simple bulleted list of links. Older web browsers, including all current versions of Internet Explorer lack support for the :before and :after pseudo-elements. When these browsers hover or tab over the links in the menu, they will not be presented with the generated content. These browsers may still display the contents of the Title attribute in a small pop-up box, and they can use both the links and accesskeys normally, although as we previously noted they would have no way of knowing what they had been set to.
This is an example of the CSS code used to create a basic menu that selectively reveals accesskey information when the user rolls or tabs over a link. This example makes further use of CSS contextual selectors to specify these styles only be applied to a bulleted list of links contained within <div id="menu">. You will likely need to spend some time adjusting the formatting and positioning of this menu before using it on a website, but this will get you started: