HTML5 accessKey property is a hardcoded attribute or can be implemented via CSS or Javascript. The access key is an element which enables the user to press a key to jump or perform action. This is a detailed guide on how to implement HTML5 accessKey DOM element on your website. Previously, we have discussed about HTML5 Basics, HTML5 Vocabulary and Interfaces, a sample HTML5 iOS interface.
Access keys are specified in HTML5 using the accesskey attribute. The accesskey attribute value of an element is the keyboard key that the user need to press (combination with one or more other keys, as the browsers are different modifier keys will vary) to activate or set focus on that element on the webpage. Although the accesskey attribute sets the key that can be pressed, automatically it can not notify the user the existence of the accessibility option. It is therefore necessary that the webmaster of the page notify the user the value of the access key using the or highlight the letter on the link text corresponding to the assigned access key.
HTML5 accessKey Property : The Standard
Access keys are specified in HTML5 working draft :
1 2 3 | http://www.w3.org/TR/html-markup/global-attributes.html http://www.w3.org/TR/html-markup/datatypes.html#common.data.keylabellist http://www.w3.org/TR/html5/single-page.html |
Hardcoded attribute is taken as standard and example usage can be seen on Google Plus. To provide an easy example :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | # simple example <a href="/contact-us/" accesskey="1">Contact Us</a> # of different subdomain <a href="http://cloud.thecustomizewindows.com/" accesskey="c">Press C to Browse</a> # css *[accesskey]:after {content:' [' attr(accesskey) ']'} # javascript example # things before header <script> function accesskey() { document.getElementById('tcw').accessKey="t" } </script> # things after the header <body onload="accesskey()"> <a id="tcw" href="https://thecustomizewindows.com/">TheCustomizeWindows</a> |
Modifier key can vary so much depending on the Operating System, Browser and Device, it makes the usage of accessKey Property a questionable accessibility option to really help the user. For newer Safari (on Mac) Ctrl+⌥ are the modifier keys. For newer Opera (on Mac) ⇧ + Esc must be pressed before, although no modifier keys are required. Not to forget Microsoft’s excellent browsers ver {1,2,3,4,5,6,7,8,9,10,11,X,Y…n}. From fronted designing point of view, for websites using dynamic content management system like WordPress, practically a handbook is required to provide to the user in order to use them. We can not stress enough on this golden rule – never use letters (A-Z) as the access key value. It is surreal, but it is like that. An accesskey can activate another feature, emulate click on Ad.
Advertisement---
HTML5 accessKey Property : Thoughts
Beyond these limitations, keyboard shortcuts can be used and possibly should be used whenever possible without being duped of their real value. It remains to determine the use that we can do. This is useful for the mobile devices with small keyboard, lack of QWERTY keyboard or no keyboard (full touch interface).
So in practical life, for web development, we possibly need to think about the mobile devices only. As HTML5 has Input Types for mobile OS like iOS, possibly it is better to consider. Also, instead of simple hardcoding, Javascript based design is universal. Here is an easy template, if you save it as html file (open text editor, copy the thing, save as some name.html and open it on browser), where Tab will activate the canvas, some keys can move an element, try this gist.
That is all about HTML5 accessKey Property.
