Skip to content
Permalink
Browse files

[e] (0) Explain accesskey better.

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10775

git-svn-id: http://svn.whatwg.org/webapps@5596 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
Hixie committed Oct 7, 2010
1 parent ca0dca9 commit f2311dbaa19f9579678a0ff07c30ddbfc663cffd
Showing with 333 additions and 244 deletions.
  1. +121 −91 complete.html
  2. +113 −83 index
  3. +99 −70 source
<li><a href=#focus-management><span class=secno>8.4.2 </span>Focus management</a></li>
<li><a href=#document-level-focus-apis><span class=secno>8.4.3 </span>Document-level focus APIs</a></li>
<li><a href=#element-level-focus-apis><span class=secno>8.4.4 </span>Element-level focus APIs</a></ol></li>
<li><a href=#the-accesskey-attribute><span class=secno>8.5 </span>The <code>accesskey</code> attribute</a></li>
<li><a href=#assigning-keyboard-shortcuts><span class=secno>8.5 </span>Assigning keyboard shortcuts</a>
<ol>
<li><a href=#introduction-6><span class=secno>8.5.1 </span>Introduction</a></li>
<li><a href=#the-accesskey-attribute><span class=secno>8.5.2 </span>The <code>accesskey</code> attribute</a></li>
<li><a href=#processing-model-3><span class=secno>8.5.3 </span>Processing model</a></ol></li>
<li><a href=#selection><span class=secno>8.6 </span>The text selection APIs</a>
<ol>
<li><a href=#documentSelection><span class=secno>8.6.1 </span>APIs for the browsing context selection</a></li>
<li><a href=#spelling-and-grammar-checking><span class=secno>8.8 </span>Spelling and grammar checking</a></li>
<li><a href=#dnd><span class=secno>8.9 </span>Drag and drop</a>
<ol>
<li><a href=#introduction-6><span class=secno>8.9.1 </span>Introduction</a></li>
<li><a href=#introduction-7><span class=secno>8.9.1 </span>Introduction</a></li>
<li><a href=#the-dragevent-and-datatransfer-interfaces><span class=secno>8.9.2 </span>The <code>DragEvent</code> and <code>DataTransfer</code> interfaces</a></li>
<li><a href=#dndevents><span class=secno>8.9.3 </span>Events fired during a drag-and-drop action</a></li>
<li><a href=#drag-and-drop-processing-model><span class=secno>8.9.4 </span>Drag-and-drop processing model</a>
<li><a href=#editing-apis><span class=secno>8.11 </span>Editing APIs</a></ol></li>
<li><a href=#workers><span class=secno>9 </span>Web workers</a>
<ol>
<li><a href=#introduction-7><span class=secno>9.1 </span>Introduction</a>
<li><a href=#introduction-8><span class=secno>9.1 </span>Introduction</a>
<ol>
<li><a href=#scope-0><span class=secno>9.1.1 </span>Scope</a></li>
<li><a href=#tutorial><span class=secno>9.1.2 </span>Tutorial</a>
<li><a href=#origins-of-workers><span class=secno>9.2.2 </span>Origins of workers</a></li>
<li><a href=#the-event-loop><span class=secno>9.2.3 </span>The event loop</a></li>
<li><a href="#the-worker's-lifetime"><span class=secno>9.2.4 </span>The worker's lifetime</a></li>
<li><a href=#processing-model-3><span class=secno>9.2.5 </span>Processing model</a></li>
<li><a href=#processing-model-4><span class=secno>9.2.5 </span>Processing model</a></li>
<li><a href=#runtime-script-errors-0><span class=secno>9.2.6 </span>Runtime script errors</a></li>
<li><a href=#creating-workers><span class=secno>9.2.7 </span>Creating workers</a>
<ol>
<ol>
<li><a href=#server-sent-events-intro><span class=secno>10.2.1 </span>Introduction</a></li>
<li><a href=#the-eventsource-interface><span class=secno>10.2.2 </span>The <code>EventSource</code> interface</a></li>
<li><a href=#processing-model-4><span class=secno>10.2.3 </span>Processing model</a></li>
<li><a href=#processing-model-5><span class=secno>10.2.3 </span>Processing model</a></li>
<li><a href=#parsing-an-event-stream><span class=secno>10.2.4 </span>Parsing an event stream</a></li>
<li><a href=#event-stream-interpretation><span class=secno>10.2.5 </span>Interpreting an event stream</a></li>
<li><a href=#notes><span class=secno>10.2.6 </span>Notes</a></li>
<li><a href=#garbage-collection-1><span class=secno>10.3.3.2 </span>Garbage collection</a></ol></ol></li>
<li><a href=#web-messaging><span class=secno>10.4 </span>Cross-document messaging</a>
<ol>
<li><a href=#introduction-8><span class=secno>10.4.1 </span>Introduction</a></li>
<li><a href=#introduction-9><span class=secno>10.4.1 </span>Introduction</a></li>
<li><a href=#security-postmsg><span class=secno>10.4.2 </span>Security</a>
<ol>
<li><a href=#authors><span class=secno>10.4.2.1 </span>Authors</a></li>
<li><a href=#user-agents><span class=secno>10.4.2.2 </span>User agents</a></ol></li>
<li><a href=#posting-messages><span class=secno>10.4.3 </span>Posting messages</a></ol></li>
<li><a href=#channel-messaging><span class=secno>10.5 </span>Channel messaging</a>
<ol>
<li><a href=#introduction-9><span class=secno>10.5.1 </span>Introduction</a></li>
<li><a href=#introduction-10><span class=secno>10.5.1 </span>Introduction</a></li>
<li><a href=#message-channels><span class=secno>10.5.2 </span>Message channels</a></li>
<li><a href=#message-ports><span class=secno>10.5.3 </span>Message ports</a>
<ol>
<li><a href=#ports-and-garbage-collection><span class=secno>10.5.3.1 </span>Ports and garbage collection</a></ol></ol></ol></li>
<li><a href=#webstorage><span class=secno>11 </span>Web storage</a>
<ol>
<li><a href=#introduction-10><span class=secno>11.1 </span>Introduction</a></li>
<li><a href=#introduction-11><span class=secno>11.1 </span>Introduction</a></li>
<li><a href=#storage><span class=secno>11.2 </span>The API</a>
<ol>
<li><a href=#the-storage-interface><span class=secno>11.2.1 </span>The <code>Storage</code> interface</a></li>
<li><a href=#parsing-xhtml-fragments><span class=secno>13.4 </span>Parsing XHTML fragments</a></ol></li>
<li><a href=#rendering><span class=secno>14 </span>Rendering</a>
<ol>
<li><a href=#introduction-11><span class=secno>14.1 </span>Introduction</a></li>
<li><a href=#introduction-12><span class=secno>14.1 </span>Introduction</a></li>
<li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>14.2 </span>The CSS user agent style sheet and presentational hints</a>
<ol>
<li><a href=#introduction-12><span class=secno>14.2.1 </span>Introduction</a></li>
<li><a href=#introduction-13><span class=secno>14.2.1 </span>Introduction</a></li>
<li><a href=#display-types><span class=secno>14.2.2 </span>Display types</a></li>
<li><a href=#margins-and-padding><span class=secno>14.2.3 </span>Margins and padding</a></li>
<li><a href=#alignment><span class=secno>14.2.4 </span>Alignment</a></li>
<li><a href=#toolbars-0><span class=secno>14.3.6 </span>Toolbars</a></ol></li>
<li><a href=#bindings><span class=secno>14.4 </span>Bindings</a>
<ol>
<li><a href=#introduction-13><span class=secno>14.4.1 </span>Introduction</a></li>
<li><a href=#introduction-14><span class=secno>14.4.1 </span>Introduction</a></li>
<li><a href=#the-button-element-0><span class=secno>14.4.2 </span>The <code>button</code> element</a></li>
<li><a href=#the-details-element-0><span class=secno>14.4.3 </span>The <code>details</code> element</a></li>
<li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>14.4.4 </span>The <code>input</code> element as a text entry widget</a></li>



<h3 id=the-accesskey-attribute><span class=secno>8.5 </span>The <dfn title=attr-accesskey><code>accesskey</code></dfn> attribute</h3>
<h3 id=assigning-keyboard-shortcuts><span class=secno>8.5 </span>Assigning keyboard shortcuts</h3>

<h4 id=introduction-6><span class=secno>8.5.1 </span>Introduction</h4>

<p><i>This section is non-normative.</i></p>

<p>Each element that can be activated or focused can be assigned a
single key combination to activate it, using the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> attribute.</p>

<p>The exact shortcut is determined by the user agent, based on
information about the user's keyboard, what keyboard shortcuts
already exist on the platform, and what other shortcuts have been
specified on the page, using the information provided in the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> attribute as a guide.</p>

<p>In order to ensure that a relevant keyboard shortcut is available
on a wide variety of input devices, the author can provide a number
of alternatives in the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code>
attribute.</p>

<p>Each alternative consists of a single character, such as a letter
or digit.</p>

<p>User agents can provide users with a list of the keyboard
shortcuts, but authors are encouraged to do so also. The <code title=dom-accessKeyLabel><a href=#dom-accesskeylabel>accessKeyLabel</a></code> IDL attribute
returns a string representing the actual key combination assigned by
the user agent.</p>


<h4 id=the-accesskey-attribute><span class=secno>8.5.2 </span>The <dfn title=attr-accesskey><code>accesskey</code></dfn> attribute</h4>

<p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute set. The
<code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> attribute's value is
space-separated tokens</a> that are <a href=#case-sensitive>case-sensitive</a>,
each of which must be exactly one Unicode code point in length.</p>

<div class=example>

<p>In the following example, a variety of links are given with
access keys so that keyboard users familiar with the site can
more quickly navigate to the relevant pages:</p>

<pre>&lt;nav&gt;
&lt;p&gt;
&lt;a title="Consortium Activities" accesskey="A" href="/Consortium/activities"&gt;Activities&lt;/a&gt; |
&lt;a title="Technical Reports and Recommendations" accesskey="T" href="/TR/"&gt;Technical Reports&lt;/a&gt; |
&lt;a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex"&gt;Site Index&lt;/a&gt; |
&lt;a title="About This Site" accesskey="B" href="/Consortium/"&gt;About Consortium&lt;/a&gt; |
&lt;a title="Contact Consortium" accesskey="C" href="/Consortium/contact"&gt;Contact&lt;/a&gt;
&lt;/p&gt;
&lt;/nav&gt;</pre>

</div>

<div class=example>

<p>In the following example, the search field is given two possible
access keys, "s" and "0" (in that order). A user agent on a device
with a full keyboard might pick
<kbd><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>S</kbd></kbd> as the
shortcut key, while a user agent on a small device with just a
numeric keypad might pick just the plain unadorned key
<kbd><kbd>0</kbd></kbd>:</p>

<pre>&lt;form action="/search"&gt;
&lt;label&gt;Search: &lt;input type="search" name="q" accesskey="s 0"&gt;&lt;/label&gt;
&lt;input type="submit"&gt;
&lt;/form&gt;</pre>

</div>

<div class=example>

<p>In the following example, a button has possible access keys
described. A script then tries to update the button's label to
advertise the key combination the user agent selected.</p>

<pre>&lt;input type=submit accesskey="N @ 1" value="Compose"&gt;
...
&lt;script&gt;
function labelButton(button) {
if (button.accessKeyLabel)
button.value += ' (' + button.accessKeyLabel + ')';
}
var inputs = document.getElementsByTagName('input');
for (var i = 0; i &lt; inputs.length; i += 1) {
if (inputs[i].type == "submit")
labelButton(inputs[i]);
}
&lt;/script&gt;</pre>

<p>On one user agent, the button's label might become
"<samp>Compose (&#8984;N)</samp>". On another, it might become
"<samp>Compose (Alt+&#8679;+1)</samp>". If the user agent doesn't
assign a key, it will be just "<samp>Compose</samp>". The exact
string depends on what the <a href=#assigned-access-key>assigned access key</a> is, and
on how the user agent represents that key combination.</p>

</div>


<div class=impl>

<h4 id=processing-model-3><span class=secno>8.5.3 </span>Processing model</h4>

<p>An element's <dfn id=assigned-access-key>assigned access key</dfn> is a key combination
derived from the element's <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute as
follows:</p>
well, e.g. in a menu displayed in response to a specific key
combination.</p>

</div>

<div class=impl>

<p>The <dfn id=dom-accesskey title=dom-accessKey><code>accessKey</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute.</p>


</div>

<div class=example>

<p>In the following example, a variety of links are given with
access keys so that keyboard users familiar with the site can
more quickly navigate to the relevant pages:</p>

<pre>&lt;nav&gt;
&lt;p&gt;
&lt;a title="Consortium Activities" accesskey="A" href="/Consortium/activities"&gt;Activities&lt;/a&gt; |
&lt;a title="Technical Reports and Recommendations" accesskey="T" href="/TR/"&gt;Technical Reports&lt;/a&gt; |
&lt;a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex"&gt;Site Index&lt;/a&gt; |
&lt;a title="About This Site" accesskey="B" href="/Consortium/"&gt;About Consortium&lt;/a&gt; |
&lt;a title="Contact Consortium" accesskey="C" href="/Consortium/contact"&gt;Contact&lt;/a&gt;
&lt;/p&gt;
&lt;/nav&gt;</pre>

</div>

<div class=example>

<p>In the following example, the search field is given two possible
access keys, "s" and "0" (in that order). A user agent on a device
with a full keyboard might pick
<kbd><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>S</kbd></kbd> as the
shortcut key, while a user agent on a small device with just a
numeric keypad might pick just the plain unadorned key
<kbd><kbd>0</kbd></kbd>:</p>

<pre>&lt;form action="/search"&gt;
&lt;label&gt;Search: &lt;input type="search" name="q" accesskey="s 0"&gt;&lt;/label&gt;
&lt;input type="submit"&gt;
&lt;/form&gt;</pre>

</div>

<div class=example>

<p>In the following example, a button has possible access keys
described. A script then tries to update the button's label to
advertise the key combination the user agent selected.</p>

<pre>&lt;input type=submit accesskey="N @ 1" value="Compose"&gt;
...
&lt;script&gt;
function labelButton(button) {
if (button.accessKeyLabel)
button.value += ' (' + button.accessKeyLabel + ')';
}
var inputs = document.getElementsByTagName('input');
for (var i = 0; i &lt; inputs.length; i += 1) {
if (inputs[i].type == "submit")
labelButton(inputs[i]);
}
&lt;/script&gt;</pre>

<p>On one user agent, the button's label might become
"<samp>Compose (&#8984;N)</samp>". On another, it might become
"<samp>Compose (Alt+&#8679;+1)</samp>". If the user agent doesn't
assign a key, it will be just "<samp>Compose</samp>". The exact
string depends on what the <a href=#assigned-access-key>assigned access key</a> is, and
on how the user agent represents that key combination.</p>

</div>



<h3 id=selection><span class=secno>8.6 </span>The text selection APIs</h3>

</div>


<h4 id=introduction-6><span class=secno>8.9.1 </span>Introduction</h4>
<h4 id=introduction-7><span class=secno>8.9.1 </span>Introduction</h4>

<p><i>This section is non-normative.</i></p>




<h3 id=introduction-7><span class=secno>9.1 </span>Introduction</h3>
<h3 id=introduction-8><span class=secno>9.1 </span>Introduction</h3>

<h4 id=scope-0><span class=secno>9.1.1 </span>Scope</h4>

<a href=#permissible-worker>permissible worker</a>.</p>


<h4 id=processing-model-3><span class=secno>9.2.5 </span>Processing model</h4>
<h4 id=processing-model-4><span class=secno>9.2.5 </span>Processing model</h4>

<p>When a user agent is to <dfn id=run-a-worker>run a worker</dfn> for a script with
<a href=#url>URL</a> <var title="">url</var>, a <a href=#browsing-context>browsing
</ul><p>These values are not currently exposed on the interface.</p>


<h4 id=processing-model-4><span class=secno>10.2.3 </span>Processing model</h4>
<h4 id=processing-model-5><span class=secno>10.2.3 </span>Processing model</h4>

<p>The resource indicated in the argument to the <code title=dom-EventSource><a href=#dom-eventsource>EventSource</a></code> constructor is <a href=#fetch title=fetch>fetched</a> when the constructor is run.</p>

</div>


<h4 id=introduction-8><span class=secno>10.4.1 </span>Introduction</h4>
<h4 id=introduction-9><span class=secno>10.4.1 </span>Introduction</h4>

<p><i>This section is non-normative.</i></p>


<h3 id=channel-messaging><span class=secno>10.5 </span><dfn>Channel messaging</dfn></h3>

<h4 id=introduction-9><span class=secno>10.5.1 </span>Introduction</h4>
<h4 id=introduction-10><span class=secno>10.5.1 </span>Introduction</h4>

<p><i>This section is non-normative.</i></p>




<h3 id=introduction-10><span class=secno>11.1 </span>Introduction</h3>
<h3 id=introduction-11><span class=secno>11.1 </span>Introduction</h3>

<p><i>This section is non-normative.</i></p>

lead to this experience.</i></p>


<h3 id=introduction-11><span class=secno>14.1 </span>Introduction</h3>
<h3 id=introduction-12><span class=secno>14.1 </span>Introduction</h3>

<p>In general, user agents are expected to support CSS, and many of
the suggestions in this section are expressed in CSS terms. User

<h3 id=the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>14.2 </span>The CSS user agent style sheet and presentational hints</h3>

<h4 id=introduction-12><span class=secno>14.2.1 </span>Introduction</h4>
<h4 id=introduction-13><span class=secno>14.2.1 </span>Introduction</h4>

<p>The CSS rules given in these subsections are, except where
otherwise specified, expected to be used as part of the user-agent

<h3 id=bindings><span class=secno>14.4 </span>Bindings</h3>

<h4 id=introduction-13><span class=secno>14.4.1 </span>Introduction</h4>
<h4 id=introduction-14><span class=secno>14.4.1 </span>Introduction</h4>

<p>A number of elements have their rendering defined in terms of the
'binding' property. <a href=#refsBECSS>[BECSS]</a></p>

0 comments on commit f2311db

Please sign in to comment.
You can’t perform that action at this time.