Access Keys

Correct way to mark them up

[HelenDev]

Presently I have a list of access keys in the code of my page. They are each marked up thus..

<a href="index.aspx?articleid=484" accessKey="D"></a>

However, I am also running the bobby accessibility checks and these links bring up the errors Create link phrases that make sense when read out of context and Separate adjacent links with more than whitespace.

Am I marking these up correctly and does anyone have any suggestions on how to solve the above issues?

Also, I might be wrong, but it appears that empty links (which obviously can't be seen in the page) are 'tabbable'. So if a user is tabbing through the page they would have to get through all these links to actually start tabbing through the links on the page. I'm thinking that this would be a hinderance to accessibility, rather than a help?

Anyone else had experience with this?

[HelenDev]

Probably going to answer my own question here - but I guess the way to do it is to make sure that the accesskeys are all on links which appear in their own right on the page, then that solves all the aforementioned problems!

[benihana]

yep sounds like youve sussed it.

screenreaders often have a 'links list' feature, if you have one or more links that say the same thing but go to different urls, its impossible to distinguish between them in the list.

the more than white space issue helps seperate links aurally when they are being read out - otherwise they can sound like one big wordy mush ;)

btw, select access keys carefully - no matter what you use there is a good chance it will conflict with something else; e.g. accesskey="D" will conflict with alt+d, which sets the focus to the address bar in IE6.

Ben

[encyclo]

Yes you need to be very careful when assigning accesskeys - as benihana said you shouldn't use D as it's a sure conflict. For example, here is a list of keyboard shortcuts for JAWS in IE [wats.ca] - and other screereader programs may have other shortcuts.

If you get it wrong, the user could get unexpected results when using their preferred shortcuts, making your page much less accessible than if you hadn't used accesskeys at all.

[dutch_dude]

I stopped using access keys a while ago. Although the basic idea of them is good, I find them to be more trouble then helpful to users.

An interesting idea though I found a while ago on some weblogs is using only numbers in a standardized way:

Access key 1
Home page
Access key 2
Skip to main content
Access key 4
Search box
Access key 9
Feedback
Access key 0
Accessibility statement

This way you won't change the standard access keys by the browser. But I still don't know if users ever use these keys :-)

[zackattack]

I have recently worked with a chap that does allot of site building for the NHS (Hospitals in the UK) he is pretty Hot on following accessibility guidelines

He uses access key numbers (as shown above by dutch_dude) apparently these are standard and recognised in this order:

Access key 1 - Home page
Access key 2 - Main content/latest information
Access key 9 - Feedback / Contact us
Access key 0 - Accessibility statement

sorry I cant provide more back up to this, someone may have more on this..
ZA

[samuil]

Access keys are very unreliable. Better not to use them and wait for XHTML 2.0 access points. There is no need to create some common standards in access keys, as power users may use whole keyboard.
In some browsers you have to press particular key before access keys will work, but it is still not easy enough to use it widely.

[victor]

Access keys are certainly a pain due to their inconsistent implementation across browsers.

But so is almost any other cross-browser issue. And most of those get a lot of detailed attention as they may lose visitors. Access keys are a forgotten asset in retaining and gaining visitors.

The UK "standard" for access keys is here:
[cabinetoffice.gov.uk...]

The complexity in selecting unused key combinations for access keys is described here:

[wats.ca...]

[HelenDev]

The complexity in selecting unused key combinations

Aargh! Another accessibility minefield!

So, basically lettered access keys are definitely out, by the looks of things?

And numbered ones? As Victor mentioned, we have to comply with The UK "standard" for access keys, which are the numbered keys 0-9. Would I be right in thinking that these don't cause quite so much conflict as the lettered ones do? That's what the jaws table appears to suggest to me.

I get the feeling that access keys are on their way out, but at the moment we are obliged to include them.

[dutch_dude]

Would I be right in thinking that these don't cause quite so much conflict as the lettered ones do?

Yes, they dont conflict in any browser i know of.

I get the feeling that access keys are on their way out

Don't know, but numbered ones can work well, that is if users know of them :) Anyway, they probably wont interfere with how well your visitors can use your site.

[erixon]

<a href="index.aspx?articleid=484" accessKey="D"></a>

, I am also running the bobby accessibility checks and these links bring up the errors Create link phrases that make sense when read out of context and Separate adjacent links with more than whitespace.

This problem is not about access keys, it's about a understandable link when it is read by a screen reader.

The link above will be read like "index.aspx?articleid=484" and it's not easy to understand what that link goes to ;)

Solution: Use the title property in the

<a>

tag,

ex

<a href="index.aspx?articleid=484" title="my homepage" accessKey="D"></a>

and/or set a descriptive text between

<a>

and

</a>

.

Remark: According to accessibility on web pages you should use link titles in a consistent way, if you have several links to a specific page should these links have exact the same title AND links to different pages should have different titles, otherwise it will be confusing for the user.

This property (title) is also a good solution when you want to use short or similar link texts between

<a>

and

</a>

ex

<a href=""index.aspx?articleid=484" title="link to a page about my homepage">read more »</a>

. It will be confusing to hear 10 different links with the information "read more". To add the title property with more descriptive text for each link will solve that problem.

Note about screen readers: These tools often includes features that analyzes the page and present a list of all links on the page for the user. When the link is presented it's out of context (the text before and after the link is missing), thats why it must be more descriptive.

If you are building pages for disability tools (like screen readers) don't forget to use header tags (like

<h1>

,

<h2>

...) which is a good help for these users for navigation in the page, the tools also often include a reader/link function for headers.

Imagine to listen to all information on a page without headers to know if the information is relevant for you (time more than 1 minute) or listen only to the headers (time less than 15 seconds). You will browse 4 times faster if you are dependent on disability tools if the page uses headers compared to a page without headers. If you don't like the size and style of headers, change it in the style tag or CSS.