Access keys or accesskeys

Posted:
Tagged with:

Introduction to access keys

Web browser Access Keys were developed to enable a computer user to go to a particular web page or field immediately when a specified key is pressed alongside the Alt key. It is not recommended that they are used because they cause more issues for users of adaptive technology (AT) than they solve.

History

In 1999 Access Keys were first introduced and most browsers now support them.

UK Government accesskeys standard

The UK Government published in May 2002 the Building in universal accessibility + checklist (which was archived on 3 July 2010) and defined the UK Government accesskeys standard which recommends the following keys and their use:

UK Government accesskeys
KeyPage
SSkip navigation
1Home page
2What's new
3Site map
4Search
5Frequently Asked Questions (FAQ)
6Help
7Complaints procedure
8Terms and conditions
9Feedback form
0Access key details

How to use access keys

Navigation with accesskeys
KeysPage
Alt + 0Access key details
Alt + 1Site homepage
Alt + 3Sitemap
Alt + SSkip navigation

How to specify access keys

It can be helpful to the user to do something to show what key is the access key and this can be done in a number of ways. For example one method is to show which key is the access key via the use of an <u>

So for the link below

<a href="index.aspx" accesskey="h">Home</a>

It would be

<a href="index.aspx" accesskey="h"><u>H</u>ome</a>

Or emphasis could be used

<a href="index.aspx" accesskey="h"><em>H</em>ome</a>

Or CSS can be used

*[accesskey]:after {content:' [' attr(accesskey) ']'}

How to specify access keys

It can be helpful to the user to do something to show what key is the access key and this can be done by showing a list of the keys and what they do.

Accessibilty concerns

Alternatives

JavaScript can be used as an alternative to activate shortcut key functionality because it is able to detect key presses, or a combination of key presses, but there may be possible conflicts that are hard to identify.

Windows virtual buffer

Screen readers used in Windows support interaction with browser rendered content by using a virtual model. A virtual buffer of content is generated using the page content, based upon the accessibility tree and information in DOM, and the screen reader presents this to the user.

The screen reader interacts with the virtual buffer by listening for events generated by the keyboard. When a key press is detected that has a corresponding command utilised by the screen reader, that command is executed in the virtual buffer. If there is not a corresponding command, the browser is passed the key where it will be captured by the JavaScript handler.

Unfortunately, most available keys are allocated for Windows screen reader specific commands, and not many keys are able to pass through to the browser, and the JavaScript shortcuts therefor do not get triggered.

You can tell Jaws and NVDA to route the next key to the browser:

Wrapping up

Good usability allows the website design to provide flexibility, and user controls will help make a website accessible, and while there are always going to be trade-offs, this will enable the adjustment of the interface to match users’ requirements, and work with their accessibility settings, assistive technology, and adaptive strategies.

We would recommend due to the noted accessibility concerns of access keys that they are not used, but if you are going to use accesskeys use the GOV.UK standard or if it does not apply:

Remember access keys are a fallback for things that do not have a standard activation behaviour.

Share on:

TwitterLinkedIn

Site preferences

Please feel free to display our site, your way by finding the preferences that work best for you. We do not track any data or preferences at all, should you select any options in the groups below, we store a small non-identifiable token to your browser's Local Storage, this is required for your preferencesto persist across pages accordion be present on repeat visits. You can remove those tokens if you wish, by simply selecting Unset, from each preference group.

Theming

Theme
Code block theme

Code theme help

Code block themes can be changed independent of the site theme.

  • Default: (Unset) Code blocks will have the same theme as the site theme.
  • Light 1: will be default for users viewing the light theme, this maintains the minimum 7:1 (WCAG Level AAA) contrast ratio we have used throughout the site, it can be quite difficult to identify the differences in colour between various syntax types, due to the similarities in colour at that contrast ratio
  • Light 2: drops the contrast for syntax highlighting down to WCAG Level AA standards (greater than 4.5:1)
  • Dark: Syntax highlighting has a minimum contrast of 7:1 and due to the dark background differences in colour may appear much more perceivable

Motion

Motion & animation

Motion & animation help

  • Default (Unset): Obeys device settings, if present. If no preference is set, there are subtle animations on this site which will be shown. If you have opted for reduce motion, smooth scrolling as well as expanding and collapsing animations will no longer be present, fading transtitions and micro animations will still be still present.
  • None: All animations and transitions are completely removed, including fade transitions.

Links

Underline all links

Underline all links help

  • Default (Unset): Most links are underlined, with a few exceptions such as: the top level links in the main navigation (on large screens), cards, tags and icon links.
  • Yes: Will add underlines to the exceptions outlined above, resulting in every link being underlined

Text and paragraphs

Font size (main content)

Font size help

This setting does not apply to the site's header or footer regions

  • Default (Unset): Font sizes are set to site defaults
  • Selecting Large or Largest will increase the font size of the main content, the size of the increase depends on various factors such as your display size and/or zoom level. The easiest way to determine which option suits you best would be to view this text after clicking either size's button
Letter spacing

Letter spacing help

  • Default (Unset): Default letter spacing applies
  • Increased: Multiplies the font size by 0.12 and adds the sum as spacing between each character
Line height

Line height help

  • Default (Unset): all text has a minimum line height of 1.5 times the size of the text
  • Increased: all text has a line height of twice the size of the text
Paragraph spacing

Paragraph spacing help

Paragraph spacing help
  • Default (Unset): The space between paragraphs is equivalent to 1.5 times the height of the paragraph's text
  • Increased: The space between paragraphs is equivalent to 2.25 times the height of the paragraph's text
Word spacing preference

Word spacing help

  • Default (Unset): No modifications to word spacing are present
  • Increased: Spaces between words are equivalent to 0.16 times the font size