Access keys provide keyboard short-cuts to improve web accessibility, as described here - which also lists the UK government recommendations:
http://en.wikipedia.org/wiki/Access_key
I have implemented access keys using the accesskey attribute rather than the
Role Access Model
How it works for a user
For standard users, each browser uses different modifier keys and acts minorly differently when pressed. Consider accesskey '1'. In Windows Internet Explorer, pressing Alt+1 selects the corresponding link - you must press Enter to go to that link. In Firefox, pressing Alt+Shift+1 goes to the associated link immediately.
These accesskey shortcuts take precedence over standard Window commands, so if you define an accesskey 'f' it will be acted on rather than show the File menu in Windows.
In Internet Explorer, the link is not selected if the link has a style of display:none.
Search accesskey
Most of the access keys can be defined in your DNN skin using extra HTML that is not normally seen. However, accesskey 4 takes you straight to the Search text box. To make this happen, I had to amend
admin/Skins/search.ascx to add AccessKey="4" to the txtSearchNew asp:TextBox. While there, I took the opportunity to add a label for this box, as recommended for all fields to improve accessibility. This label is present but not normally displayed:
<asp:Label AssociatedControlID="txtSearchNew" style="display:none;" runat="server">Search:</asp:Label>Main accesskeys
The main site access keys can be defined using code like this at the top of your skin, which I adapted from another web site:
<ul id="skips">
<li><a href="#content" accesskey="s">Skip to page content, accesskey=s</a></li>
<li><asp:HyperLink ID="SkipToHome" NavigateUrl="~/" AccessKey="1" runat="server">Skip to Home page, accesskey=1</asp:HyperLink></li>
</ul>CSS (below) can then be used to make sure that this information is not normally seen, but each link become visible when it has the focus or is active. The list-style is set to none to avoid bullet points etc. When not in focus, the links have width and height 0; when in focus these are set to auto. Tweak the other settings as you wish.
Finally, don't forget to provide an anchor within your skin for the skip to navigation link:
<a id="content" name="content"></a>
CSS code:
ul#skips { list-style: none; }
#skips li { list-style: none; display: inline; }
#skips a
{
color: white; width: 0; height: 0; overflow: hidden; z-index: 1000;
position: absolute; top: 15px; left: 100px;
}
#skips a:active, #skips a:focus
{
color: red; border: 1px solid red;
width: auto; height: auto;
display: block; overflow: visible;
padding: 3px;
}
