Part of the Accessibility Reading List
 
 

Step into the future of online gaming with plinko casino, featuring fair play and real crypto prizes. Try your luck with adjustable volatility levels.

One of the principles of is that making websites accessible benefits everyone, not only people with differing abilities. In the past, I’ve used the accesskey attribute to enhance forms, but relatively few web developers appreciate that accesskey can also be used on tags other than <label>, most especially links, in a way that benefits both experienced users and those requiring keyboard shortcuts.

There is a loose standard for accesskey values for site site ; 1 is generally used for the Home page, 3 for Site map, 4 for search, 0 for help, etc. These can be added directly to <a> tags in navigation:

<nav role="navigation">
	<a href="index.html" accesskey="1">Home</a>
	<a href="about.html" accesskey="2">About</a>
	<a href="map.html" accesskey="3">Site Map</a>
	<a href="search.html" accesskey="4">Search</a>
	<a href="help.html" accesskey="0">Help</a>
</nav>

The keyboard combos for accesskey shortcuts differ slightly across browsers and platforms:

Accesskey Keyboard Modifiers For Different Browsers
Browser Operating System Example Internet Explorer / Chrome / Safari Windows Alt + 0 Firefox Windows Alt + SHIFT + 0 Firefox / Safari Mac Ctrl + 0 Chrome Mac Ctrl + Opt + 0

I’ve added access keys on the site you’re reading now; feel free to try them out.

Accesskeys for The New Code
Key Function 1 Home page S Focus cursor in search input 4 Initiate search 0 About . (period) Go to next page , (comma) Go to previous page

Two final points of note:

accesskey values must be unique on the page in which they are used; as navigation will still be present on a form page, this means greater restrictions on which accesskey values are available for form elements.

Ideally accesskey values should be visually indicated in the navigation, using the same CSS techniques you would use for form labels.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.