Skip to content

2bweb.biz Significance of Accessibility

Services
Information
Content

Download and documentation

Using the AccessKey-pad isn't an absolute necessity in order to implement the recommendations for shortcuts. Rather, it's a way making the available shortcuts, which need to be displayed, visible, at least according to the specification of the browser.

The AccessKey-pad's design can vary in appearance.


This is the original layout created by Ralf Hertsch at the end of 2001. [External link in German]Kai Laborenz revised the code in 2006. You will also find a reduced Version by Stephan Heller.

Download

You can also integrate the AccessKey-pad AccessKey pad onto your website.

The AccessKey-pad consists in one part of XHTML and in one part of CSS. There is also some JavaScript included. The design of the AccessKey-pad can be altered by exchanging the CSS-declaration without having to adapt the XHTML.

Download the original design as ZIP-file.

  1. An HTML-file is stored in the ZIP-file. You can incorporate the contents of this file onto your pages.
  2. You will also find a CSS-file in the ZIP-file, which you need to include on your pages. If there should be difficulties in display, it may be because CSS attributes are inherited and that you possibly carried out CSS-declarations which affect the AccessKey-pad.
  3. The little JavaScript helpers have also been included. They are both optional and may be removed.

Documentation of XHTML

On XHTML-level, the AccessKey-pad is a links list, which is designed with CSS.

XHTML Notes
<ul id="acc"> ...</ul> The XHTML-list is structured as an unsorted list. The design is set by selecting #acc in CSS
<li> ... </li> For linked buttons of the AccessKey-pad the individual links are placed in a simple listing element. The appearance of the list item is determined in CSS.
<span> ... </span> The text is located within the list item and is normally not displayed, but is issued for instance by speech synthesisers. This applies to all texts within the SPAN elements that are made invisible by CSS.
<a accesskey="[Digit]" title="[Explanation as Tool tip]" href="[uri]"> [Digit] [Explanation for screen reader users]</a> The link has, of course, got an accesskey-attribute with the respective number and a href-attribute with a URI. In addition, it makes sense to include information for mouse-users (title-attribute) and users of speech synthesisers (hidden text).
<li class="acc-n"> ...</li> The AccessKey-pad button cannot be linked sometimes. In this case, firstly allocate the LI element to the category acc-n. Within the LI-element, the respective number of the AccessKey-pad needs to be inserted. You can also insert invisible text with the SPAN-element.

Documentation of CSS

The CSS can vary. The following documentation describes the declarations for the original design.

When using the AccessKey-pad you should choose a method of including the CSS-file that excludes old browsers. You could, for example, use the XHTML-conform code:

<style type="text/css" media="all">
/*<![CDATA[*/
@import 'accesskey.css';
/*]]>*/
</style>

CSS-Deklaration Erläuterung
body{
  font-size:100.01%;
}		 A mere detail for Internet Explorer, with the purpose of resizing text adequately.
#acc{
   margin: 0;
   padding: 0;
   width: 10.3em;
   font-family: verdana,arial,helvetica,sans-serif;
   font-size: 0.9em;
   text-align: center;
   line-height: 1.1em;
}		 The general appearance of the AccessKey-pad. Please note that the text is centred.
#acc li{
   margin: 0 .25em .25em 0;
   padding: 0;
   border: 1px solid #6F6F6F;
   width: 2.9em;
   float: left;
   list-style: none;
   display: block;
}		 These CSS attributes define the appearance of the individual buttons. As we are dealing with list items, the preceding points should be hidden. The list items are not actual blocking elements either and need to be defined as such in order to be aligned on the left with a pre-defined width.
#acc li a:link,#acc li a:visited{
   color: #000000;
   background: #D3D3D3;
   padding: .25em 1em;
   width: 0.9em;
   display: block;
   text-decoration: none;
}		 The links in the AccessKey-pad are determined with these attributes. Please consider the other pseudo-attributes in the code: the sequence usually needs to be link, visited, focus, hover and active. Please also note that Internet Explorer brings in active, not focus when focussing links.
#acc .acc-n{
   border: 1px dotted #D7E9FF;
   padding: .25em 1em;
   width: 0.9em;
   color: #000000;
   background: #fff;
}		 If a button should not be linked, the list item requires the classification acc-n. This declaration defines the attributes of the deactivated buttons.
#acc li.acc-logo{
   border: 0;
   width: 6.3em;
}		 The logo is also structured as a list item. This list item is double as wide as the other list items.
#acc .acc-logo a:link, #acc .acc-logo a:visited{
   padding: .25em 0 .25em .5em;
   width: 5.8em;
   display: block;
   color: #FF0000;
   background: transparent;
   letter-spacing: 0;
   text-decoration: none;
}		 The link for the logo also carries some attributes. Please bear in mind the references made about pseudo-attributes further above.
#acc strong{
   color: #000080;
   font-variant: small-caps;
   font-weight: bold;
}		 The logo consists of two words merged together, which are both set within a STRONG element. The attributes for the logo are carried out with this declaration.
#acc strong em{
   color: #FF0000;
   font-style: italic;
   letter-spacing: 0;
}		 The first part of the logo looks different than the second part and is set within the STRONG element with an EM element. The relevant declaration can be found on the left.
#acc span{
   width: 0;
   position: absolute;
   left: -1000px;
   top: -1000px;
   height: 0;
   overflow: hidden;
}		 The declaration is for creating invisible text, which is still read out with speech synthesisers. The text is virtually pushed out of the Viewport. These attributes have been tested and are seen by today's standards as reliable. A simple display:none; is not read by speech synthesisers.

More about [External link in german language]Accessible web design