Access key

Last updated

In a web browser, an access key or accesskey allows a computer user to immediately jump to a specific web page via the keyboard. They were introduced in 1999 and quickly achieved near-universal browser support.

Contents

In the summer of 2002, a Canadian Web Accessibility [1] consultancy did an informal survey to see if implementing accesskeys caused issues for users of adaptive technology, especially screen reading technology used by blind and low vision users. These users require numerous keyboard shortcuts to access web pages, as “pointing and clicking” a mouse is not an option for them. Their research showed that most key stroke combinations did in fact present a conflict for one or more of these technologies, and their final recommendation was to avoid using accesskeys altogether.

In XHTML 2, a revised web authoring language, the HTML Working Group of the World Wide Web Consortium deprecated the accesskey attribute in favor of the XHTML Role Access Module. However, XHTML 2 has been retired in favor of HTML5, which (as of August 2009) continues to permit accesskeys. [2]

Access in different browsers

For a more complete list of which browsers support the HTML Access keys, please see how they are compared in the comparison of web browsers.

Web Browser Modifier EffectNotes
Amaya CtrlorAltAdjustable in preferences
Blazer NoneElement is activated immediately upon key press.No modifier is needed for this web browser used on mobile devices.
Camino Ctrl
Chrome Alt on Windows, FreeBSD, and Linux (Note: Alt+⇧ Shift is required in some circumstances)

Ctrl + ⌥ Opt on Mac

Supported in versions of Chrome >2.x
Firefox Alt+⇧ Shift on Windows, FreeBSD and Linux [3] [4]

Ctrl on Mac (up to v14.0) [3]
Ctrl+⌥ Opt on Mac (v14.0.1 and higher)

Prior to version 2, Firefox used just Alt;
configurable via about:config [3]
Internet Explorer Alt Prior to IE8, Alt + Access Key focused on the element, but required ↵ Enter to be pressed in order to activate the element. This is still the case for hyperlinks in version 9.Alt+D cannot be used as an access key in IE 7 or above. [5]
Konqueror CtrlThe modifier key must be released before the regular key is pressed.
Microsoft Edge Alt (Note: Alt+⇧ Shift is required in some circumstances)
Opera 15 and higher Alt on Windows, FreeBSD, and Linux (Note: Alt+⇧ Shift is required in some circumstances)

Ctrl + ⌥ Opt on Mac

Opera 12 ⇧ Shift+escThe modifier keys are released before the regular key is pressed. Once the modifier key is released, the browser displays the full list of access keys and their actions, and the user can hit the desired key.
Safari 3 Ctrl on Mac

Alt on Windows

Safari 4 and higher Ctrl +⌥ Opt on Mac and iOS

Alt on Windows

Conflicting access keys

If multiple identical accesskeys are assigned within the same document, IE will tab through them on each keypress (IE will tab backwards if ⇧ Shift is pressed as well). This way, elements can be logically grouped in various accesskey rings for easier navigation. IE 4.0 only supported letters of the English alphabet as accesskeys. Firefox 2.0 will activate the last of a group of elements assigned the same accesskey.

Specifying access keys

Access keys are specified in HTML using the accesskey attribute. The value of an element’s accesskey attribute is the key the user will press (typically in combination with one or more other keys, as defined by the browser) in order to activate or focus that element. Though the accesskey attribute sets the key that can be pressed, it does not automatically notify the user of the bound access key. One convention is for the page author to show the access key value by using the <u> tag to underline the letter in the link’s text corresponding to the accesskey assigned. For the link below, a user would press Alt+H on Internet Explorer, Ctrl+H on a Mac (the command key can give undesired results) and ⇧ Shift+Esc+H on Opera to be directed to index.html.

<ahref="index.html"accesskey="h">Home</a>

or to emphasize ‹H›:

<ahref="index.html"accesskey="h"><em>H</em>ome</a>

alternatively, the following CSS can be used to indicate the character:

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

Emphasize <em> isn’t necessary, but can be useful to the user. It helps them identify which key to press to navigate to where they want to. Another possible way of displaying which accesskeys do what is to create a page with all the accesskeys displayed. Or the webmaster could do both. Another option for the end user is to install a user script such as FireFox Access Bar for GreaseMonkey.

Use of standard access key mappings

In 2004, a standard emerged using numbers, which promotes consistency for users, and enables the increased predictability of keyboard shortcuts on different sites. These include, for example, 1 to go to the homepage, 0 for search, / for contact, and others..

Ten years later, in 2014, an updated and more comprehensive standard using both letters and numbers was released [6] in order to breathe new life into browser access key standardization efforts.

See also

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts that enabled the creation of interactive and animated documents. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997.

<span class="mw-page-title-main">HTML</span> Hypertext Markup Language

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Gecko is a browser engine developed by Mozilla. It is used in the Firefox browser, the Thunderbird email client, and many other projects.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The most commonly used version is HTML 4.01, which became official standard in December 1999. An HTML document is composed of a tree of simple HTML nodes, such as text nodes, and HTML elements, which add semantics and formatting to parts of document. Each element can have HTML attributes specified. Elements can also have content, including other elements and text.

<span class="mw-page-title-main">Favicon</span> Icon associated with a particular web site

A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page. A web designer can create such an icon and upload it to a website by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.

XForms is an XML format used for collecting inputs from web forms. XForms was designed to be the next generation of HTML / XHTML forms, but is generic enough that it can also be used in a standalone manner or with presentation languages other than XHTML to describe a user interface and a set of common data manipulation tasks.

This is a comparison of both historical and current web browsers based on developer, engine, platform(s), releases, license, and cost.

A web style sheet is a form of separation of content and presentation for web design in which the markup of a webpage contains the page's semantic content and structure, but does not define its visual layout (style). Instead, the style is defined in an external style sheet file using a style sheet language such as CSS or XSLT. This design approach is identified as a "separation" because it largely supersedes the antecedent methodology in which a page's markup defined both style and structure.

DOM Events are a signal that something has occurred, or is occurring, and can be triggered by user interactions or by the browser. Client-side scripting languages like JavaScript, JScript, ECMAScript, VBScript, and Java can register various event handlers or listeners on the element nodes inside a DOM tree, such as in HTML, XHTML, XUL, and SVG documents.

Mozilla Firefox has features that allow it to be distinguished from other web browsers, such as Chrome and Internet Explorer.

Link prefetching allows web browsers to pre-load resources. This speeds up both the loading and rendering of web pages. Prefetching was first introduced in HTML5.

In computing, tabbing navigation is the ability to navigate between focusable elements within a structured document or user interface with the tab key of a computer keyboard. Usually, pressing Tab will focus on the next element, while pressing Shift + Tab will focus on the previous element. The order of focusing can be determined implicitly or explicitly. In general, tabbing is cyclical, not linear, meaning that the tabbing will cycle to the first/last element when it moves away from the last/first element.

Microformats (μF) are a set of defined HTML classes created to serve as consistent and descriptive metadata about an element, designating it as representing a certain type of data. They allow software to process the information reliably by having set classes refer to a specific type of data rather than being arbitrary. Microformats emerged around 2005 and were predominantly designed for use by search engines, web syndication and aggregators such as RSS.

In computing, quirks mode is a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for old web browsers instead of strictly complying with W3C and IETF standards in standards mode. This behavior has since been codified in the standard, so what was previously standards mode is now referred to as simply no quirks mode.

<span class="mw-page-title-main">Web typography</span> Publishing considerations for the Web

Web typography is the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the font element in 1995, which was then standardized in the HTML 3.2 specification. However, the font specified by the font element had to be installed on the user's computer or a fallback font, such as a browser's default sans-serif or monospace font, would be used. The first Cascading Style Sheets specification was published in 1996 and provided the same capabilities.

Extensible HyperText Markup Language (XHTML) is part of the family of XML markup languages. It mirrors or extends versions of the widely used HyperText Markup Language (HTML), the language in which Web pages are formulated.

A link relation is a descriptive attribute attached to a hyperlink in order to define the type of the link, or the relationship between the source and destination resources. The attribute can be used by automated systems, or can be presented to a user in a different way.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

XHTML+RDFa is an extended version of the XHTML markup language for supporting RDF through a collection of attributes and processing rules in the form of well-formed XML documents. XHTML+RDFa is one of the techniques used to develop Semantic Web content by embedding rich semantic markup. Version 1.1 of the language is a superset of XHTML 1.1, integrating the attributes according to RDFa Core 1.1. In other words, it is an RDFa support through XHTML Modularization.

References

  1. ↑ "Using Accesskeys: is it worth it?". Archived from the original on February 4, 2012.
  2. ↑ "The accesskey attribute". World Wide Web Consortium . Retrieved 2012-02-06.
  3. 1 2 3 Ui.key.contentAccess - MozillaZine Knowledge Base (retrieved 2011-01-07)
  4. ↑ "Accessibility features in Firefox - Make Firefox and web content work for all users | Firefox Help".
  5. ↑ "You cannot press ALT+D to set the focus to an object in Internet Explorer 7". Microsoft. October 31, 2007. Retrieved 10 January 2014.
  6. ↑ "Home". standardaccesskeys.com.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.