05 February 2010

Adding Access key support to DotNetNuke

This page explains how to add "access key" support to a DNN5 web site.
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;
}

5 comments:

Rui said...

Great post!
Nice tweak, works quite well locally,
however I have an issue since I only have Administrator privileges on the live site and I can't mess around with ~/Admin/Skins/Search.ascx, is it possible to create a customized search control and embed it with the skin ?

Chris Cant said...

You can amend the standard search box by putting this JavaScript somewhere in your skin (within script type="javascript" tags):

var search = document.getElementById("dnn_dnnSEARCH_txtSearchNew");
if (search) {
search.setAttribute("accesskey", "4");
}

Rui said...

Thanks for the quick reply,
but actually I was referring to the label control, I would like to add it so that the website could pass the WCAG v1 level A at least. Can I build my own search control and pack it with the skin ? (copy/paste search.ascx/vb to local_resource directory.

By the way, every time I validate the site through WCAG v2 A level, I get the following warning:

E872 [WCAG v2 3.2.2 (A)] The
submit button is missing:
<form name="Form".......

It happens with every DNN website.
As you can see my main goal is to increase the website's accessibility without going to the core of dnn.. hard mission.

Chris Cant said...

OK - I see. Not sure if you can do what you suggest. You may be able use JavaScript to insert the label, though that won't be visible to external validators. I might have time to think about the control part tomorrow.

Chris Cant said...

If you look at the "Retail skin token" section here, it shows that you can write a control that appears in your skin:

http://www.phdcc.com/phdcc.CodeModule/