Skip to content

Commit

Permalink
[e] (0) Explain accesskey better.
Browse files Browse the repository at this point in the history 
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
Hixie committed Oct 7, 2010
1 parent ca0dca9 commit f2311db
Show file tree
Hide file tree
Showing 3 changed files with 333 additions and 244 deletions.
212 changes: 121 additions & 91 deletions complete.html
View file
Expand Up @@ -945,7 +945,11 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<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>
Expand All @@ -957,7 +961,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<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>
Expand All @@ -979,7 +983,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<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>
Expand All @@ -1001,7 +1005,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<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>
Expand All @@ -1022,7 +1026,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<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>
Expand All @@ -1042,22 +1046,22 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<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>
Expand Down Expand Up @@ -1232,10 +1236,10 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<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>
Expand All @@ -1261,7 +1265,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<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>
Expand Down Expand Up @@ -67255,7 +67259,35 @@ <h4 id=element-level-focus-apis><span class=secno>8.4.4 </span>Element-level foc



<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
Expand All @@ -67266,8 +67298,75 @@ <h3 id=the-accesskey-attribute><span class=secno>8.5 </span>The <dfn title=attr-
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>
Expand Down Expand Up @@ -67324,10 +67423,6 @@ <h3 id=the-accesskey-attribute><span class=secno>8.5 </span>The <dfn title=attr-
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>

Expand All @@ -67338,71 +67433,6 @@ <h3 id=the-accesskey-attribute><span class=secno>8.5 </span>The <dfn title=attr-

</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>

Expand Down Expand Up @@ -68554,7 +68584,7 @@ <h3 id=dnd><span class=secno>8.9 </span><dfn>Drag and drop</dfn></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>

Expand Down Expand Up @@ -70588,7 +70618,7 @@ <h2 id=workers><span class=secno>9 </span>Web workers</h2>



<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>

Expand Down Expand Up @@ -71818,7 +71848,7 @@ <h4 id="the-worker's-lifetime"><span class=secno>9.2.4 </span>The worker's lifet
<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
Expand Down Expand Up @@ -73038,7 +73068,7 @@ <h4 id=the-eventsource-interface><span class=secno>10.2.2 </span>The <code><a hr
</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>

Expand Down Expand Up @@ -74084,7 +74114,7 @@ <h3 id=web-messaging><span class=secno>10.4 </span><dfn id=crossDocumentMessages
</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>

Expand Down Expand Up @@ -74309,7 +74339,7 @@ <h4 id=posting-messages><span class=secno>10.4.3 </span>Posting messages</h4>

<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>

Expand Down Expand Up @@ -74759,7 +74789,7 @@ <h2 id=webstorage><span class=secno>11 </span>Web storage</h2>



<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>

Expand Down Expand Up @@ -84593,7 +84623,7 @@ <h2 id=rendering><span class=secno>14 </span>Rendering</h2>
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
Expand Down Expand Up @@ -84631,7 +84661,7 @@ <h3 id=introduction-11><span class=secno>14.1 </span>Introduction</h3>

<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
Expand Down Expand Up @@ -86776,7 +86806,7 @@ <h4 id=toolbars-0><span class=secno>14.3.6 </span>Toolbars</h4>

<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>
Expand Down

0 comments on commit f2311db

Please sign in to comment.