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...
1 parent ca0dca9 commit f2311dbaa19f9579678a0ff07c30ddbfc663cffd @Hixie Hixie committed Oct 7, 2010
Showing with 333 additions and 244 deletions.
  1. +121 −91 complete.html
  2. +113 −83 index
  3. +99 −70 source
View
212 complete.html
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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
@@ -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
@@ -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>
View
196 index
@@ -952,7 +952,11 @@
<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>
@@ -964,7 +968,7 @@
<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>
@@ -989,15 +993,15 @@
<li><a href=#event-definitions-0><span class=secno>9.1 </span>Event definitions</a></li>
<li><a href=#web-messaging><span class=secno>9.2 </span>Cross-document messaging</a>
<ol>
- <li><a href=#introduction-7><span class=secno>9.2.1 </span>Introduction</a></li>
+ <li><a href=#introduction-8><span class=secno>9.2.1 </span>Introduction</a></li>
<li><a href=#security-postmsg><span class=secno>9.2.2 </span>Security</a>
<ol>
<li><a href=#authors><span class=secno>9.2.2.1 </span>Authors</a></li>
<li><a href=#user-agents><span class=secno>9.2.2.2 </span>User agents</a></ol></li>
<li><a href=#posting-messages><span class=secno>9.2.3 </span>Posting messages</a></ol></li>
<li><a href=#channel-messaging><span class=secno>9.3 </span>Channel messaging</a>
<ol>
- <li><a href=#introduction-8><span class=secno>9.3.1 </span>Introduction</a></li>
+ <li><a href=#introduction-9><span class=secno>9.3.1 </span>Introduction</a></li>
<li><a href=#message-channels><span class=secno>9.3.2 </span>Message channels</a></li>
<li><a href=#message-ports><span class=secno>9.3.3 </span>Message ports</a>
<ol>
@@ -1155,10 +1159,10 @@
<li><a href=#parsing-xhtml-fragments><span class=secno>11.4 </span>Parsing XHTML fragments</a></ol></li>
<li><a href=#rendering><span class=secno>12 </span>Rendering</a>
<ol>
- <li><a href=#introduction-9><span class=secno>12.1 </span>Introduction</a></li>
+ <li><a href=#introduction-10><span class=secno>12.1 </span>Introduction</a></li>
<li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>12.2 </span>The CSS user agent style sheet and presentational hints</a>
<ol>
- <li><a href=#introduction-10><span class=secno>12.2.1 </span>Introduction</a></li>
+ <li><a href=#introduction-11><span class=secno>12.2.1 </span>Introduction</a></li>
<li><a href=#display-types><span class=secno>12.2.2 </span>Display types</a></li>
<li><a href=#margins-and-padding><span class=secno>12.2.3 </span>Margins and padding</a></li>
<li><a href=#alignment><span class=secno>12.2.4 </span>Alignment</a></li>
@@ -1184,7 +1188,7 @@
<li><a href=#toolbars-0><span class=secno>12.3.6 </span>Toolbars</a></ol></li>
<li><a href=#bindings><span class=secno>12.4 </span>Bindings</a>
<ol>
- <li><a href=#introduction-11><span class=secno>12.4.1 </span>Introduction</a></li>
+ <li><a href=#introduction-12><span class=secno>12.4.1 </span>Introduction</a></li>
<li><a href=#the-button-element-0><span class=secno>12.4.2 </span>The <code>button</code> element</a></li>
<li><a href=#the-details-element-0><span class=secno>12.4.3 </span>The <code>details</code> element</a></li>
<li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>12.4.4 </span>The <code>input</code> element as a text entry widget</a></li>
@@ -67261,7 +67265,35 @@ interface <dfn id=navigatorabilities>NavigatorAbilities</dfn> {
- <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
@@ -67272,8 +67304,75 @@ interface <dfn id=navigatorabilities>NavigatorAbilities</dfn> {
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>
@@ -67330,10 +67429,6 @@ interface <dfn id=navigatorabilities>NavigatorAbilities</dfn> {
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>
@@ -67344,71 +67439,6 @@ interface <dfn id=navigatorabilities>NavigatorAbilities</dfn> {
</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>
@@ -68560,7 +68590,7 @@ interface <dfn id=navigatorabilities>NavigatorAbilities</dfn> {
</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>
@@ -70733,7 +70763,7 @@ v2 (well, really v0):
</div>
- <h4 id=introduction-7><span class=secno>9.2.1 </span>Introduction</h4>
+ <h4 id=introduction-8><span class=secno>9.2.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -70958,7 +70988,7 @@ function receiver(e) {
<h3 id=channel-messaging><span class=secno>9.3 </span><dfn>Channel messaging</dfn></h3>
- <h4 id=introduction-8><span class=secno>9.3.1 </span>Introduction</h4>
+ <h4 id=introduction-9><span class=secno>9.3.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -80507,7 +80537,7 @@ document.body.appendChild(text);
lead to this experience.</i></p>
- <h3 id=introduction-9><span class=secno>12.1 </span>Introduction</h3>
+ <h3 id=introduction-10><span class=secno>12.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
@@ -80545,7 +80575,7 @@ document.body.appendChild(text);
<h3 id=the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>12.2 </span>The CSS user agent style sheet and presentational hints</h3>
- <h4 id=introduction-10><span class=secno>12.2.1 </span>Introduction</h4>
+ <h4 id=introduction-11><span class=secno>12.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
@@ -82690,7 +82720,7 @@ object[align=bottom] { /* <a href=#case-insensitive-selector-exception>case-inse
<h3 id=bindings><span class=secno>12.4 </span>Bindings</h3>
- <h4 id=introduction-11><span class=secno>12.4.1 </span>Introduction</h4>
+ <h4 id=introduction-12><span class=secno>12.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>
View
169 source
@@ -76245,7 +76245,38 @@ interface <dfn>NavigatorAbilities</dfn> {
- <h3>The <dfn title="attr-accesskey"><code>accesskey</code></dfn> attribute</h3>
+ <h3>Assigning keyboard shortcuts</h3>
+
+ <h4>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">accesskey</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">accesskey</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">accesskey</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">accessKeyLabel</code> IDL attribute
+ returns a string representing the actual key combination assigned by
+ the user agent.</p>
+
+
+ <h4>The <dfn title="attr-accesskey"><code>accesskey</code></dfn> attribute</h4>
<p>All <span>HTML elements</span> may have the <code
title="attr-accesskey">accesskey</code> content attribute set. The
@@ -76257,8 +76288,75 @@ interface <dfn>NavigatorAbilities</dfn> {
space-separated tokens</span> that are <span>case-sensitive</span>,
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>
+ &lt;p>
+ &lt;a title="Consortium Activities" accesskey="A" href="/Consortium/activities">Activities&lt;/a> |
+ &lt;a title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports&lt;/a> |
+ &lt;a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex">Site Index&lt;/a> |
+ &lt;a title="About This Site" accesskey="B" href="/Consortium/">About Consortium&lt;/a> |
+ &lt;a title="Contact Consortium" accesskey="C" href="/Consortium/contact">Contact&lt;/a>
+ &lt;/p>
+&lt;/nav></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">
+ &lt;label>Search: &lt;input type="search" name="q" accesskey="s 0">&lt;/label>
+ &lt;input type="submit">
+&lt;/form></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">
+...
+&lt;script>
+ 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></pre>
+
+ <p>On one user agent, the button's label might become
+ "<samp>Compose (&#x2318;N)</samp>". On another, it might become
+ "<samp>Compose (Alt+&#x21E7;+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 <span>assigned access key</span> is, and
+ on how the user agent represents that key combination.</p>
+
+ </div>
+
+
<div class="impl">
+ <h4>Processing model</h4>
+
<p>An element's <dfn>assigned access key</dfn> is a key combination
derived from the element's <code
title="attr-accesskey">accesskey</code> content attribute as
@@ -76329,10 +76427,6 @@ interface <dfn>NavigatorAbilities</dfn> {
well, e.g. in a menu displayed in response to a specific key
combination.</p>
- </div>
-
- <div class="impl">
-
<p>The <dfn title="dom-accessKey"><code>accessKey</code></dfn> IDL
attribute must <span>reflect</span> the <code
title="attr-accesskey">accesskey</code> content attribute.</p>
@@ -76345,71 +76439,6 @@ interface <dfn>NavigatorAbilities</dfn> {
</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>
- &lt;p>
- &lt;a title="Consortium Activities" accesskey="A" href="/Consortium/activities">Activities&lt;/a> |
- &lt;a title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports&lt;/a> |
- &lt;a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex">Site Index&lt;/a> |
- &lt;a title="About This Site" accesskey="B" href="/Consortium/">About Consortium&lt;/a> |
- &lt;a title="Contact Consortium" accesskey="C" href="/Consortium/contact">Contact&lt;/a>
- &lt;/p>
-&lt;/nav></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">
- &lt;label>Search: &lt;input type="search" name="q" accesskey="s 0">&lt;/label>
- &lt;input type="submit">
-&lt;/form></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">
-...
-&lt;script>
- 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></pre>
-
- <p>On one user agent, the button's label might become
- "<samp>Compose (&#x2318;N)</samp>". On another, it might become
- "<samp>Compose (Alt+&#x21E7;+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 <span>assigned access key</span> is, and
- on how the user agent represents that key combination.</p>
-
- </div>
-
-
<h3 id="selection">The text selection APIs</h3>

0 comments on commit f2311db

Please sign in to comment.