[html5] r5596 - [e] (0) Explain accesskey better. Fixing http://www.w3.org/Bugs/Public/show_bug. [...]
whatwg at whatwg.org
whatwg at whatwg.org
Thu Oct 7 15:50:42 PDT 2010
Author: ianh
Date: 2010-10-07 15:50:41 -0700 (Thu, 07 Oct 2010)
New Revision: 5596
Modified:
complete.html
index
source
Log:
[e] (0) Explain accesskey better.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10775
Modified: complete.html
===================================================================
--- complete.html 2010-10-07 21:43:45 UTC (rev 5595)
+++ complete.html 2010-10-07 22:50:41 UTC (rev 5596)
@@ -945,7 +945,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>
@@ -957,7 +961,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>
@@ -979,7 +983,7 @@
<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 @@
<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 @@
<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,7 +1046,7 @@
<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>
@@ -1050,14 +1054,14 @@
<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 @@
<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 @@
<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,8 +67259,36 @@
- <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
used by the user agent as a guide for creating a keyboard shortcut
@@ -67266,8 +67298,75 @@
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><nav>
+ <p>
+ <a title="Consortium Activities" accesskey="A" href="/Consortium/activities">Activities</a> |
+ <a title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports</a> |
+ <a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex">Site Index</a> |
+ <a title="About This Site" accesskey="B" href="/Consortium/">About Consortium</a> |
+ <a title="Contact Consortium" accesskey="C" href="/Consortium/contact">Contact</a>
+ </p>
+</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><form action="/search">
+ <label>Search: <input type="search" name="q" accesskey="s 0"></label>
+ <input type="submit">
+</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><input type=submit accesskey="N @ 1" value="Compose">
+...
+<script>
+ function labelButton(button) {
+ if (button.accessKeyLabel)
+ button.value += ' (' + button.accessKeyLabel + ')';
+ }
+ var inputs = document.getElementsByTagName('input');
+ for (var i = 0; i < inputs.length; i += 1) {
+ if (inputs[i].type == "submit")
+ labelButton(inputs[i]);
+ }
+</script></pre>
+
+ <p>On one user agent, the button's label might become
+ "<samp>Compose (⌘N)</samp>". On another, it might become
+ "<samp>Compose (Alt+⇧+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 @@
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,72 +67433,7 @@
</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><nav>
- <p>
- <a title="Consortium Activities" accesskey="A" href="/Consortium/activities">Activities</a> |
- <a title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports</a> |
- <a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex">Site Index</a> |
- <a title="About This Site" accesskey="B" href="/Consortium/">About Consortium</a> |
- <a title="Contact Consortium" accesskey="C" href="/Consortium/contact">Contact</a>
- </p>
-</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><form action="/search">
- <label>Search: <input type="search" name="q" accesskey="s 0"></label>
- <input type="submit">
-</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><input type=submit accesskey="N @ 1" value="Compose">
-...
-<script>
- function labelButton(button) {
- if (button.accessKeyLabel)
- button.value += ' (' + button.accessKeyLabel + ')';
- }
- var inputs = document.getElementsByTagName('input');
- for (var i = 0; i < inputs.length; i += 1) {
- if (inputs[i].type == "submit")
- labelButton(inputs[i]);
- }
-</script></pre>
-
- <p>On one user agent, the button's label might become
- "<samp>Compose (⌘N)</samp>". On another, it might become
- "<samp>Compose (Alt+⇧+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>
<p>Every <a href=#browsing-context>browsing context</a> has <dfn id=the-selection title="the
@@ -68554,7 +68584,7 @@
</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 @@
- <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 @@
<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 @@
</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 @@
</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 @@
<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 @@
- <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 @@
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=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 @@
<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>
Modified: index
===================================================================
--- index 2010-10-07 21:43:45 UTC (rev 5595)
+++ index 2010-10-07 22:50:41 UTC (rev 5596)
@@ -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,7 +993,7 @@
<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>
@@ -997,7 +1001,7 @@
<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,8 +67265,36 @@
- <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
used by the user agent as a guide for creating a keyboard shortcut
@@ -67272,8 +67304,75 @@
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><nav>
+ <p>
+ <a title="Consortium Activities" accesskey="A" href="/Consortium/activities">Activities</a> |
+ <a title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports</a> |
+ <a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex">Site Index</a> |
+ <a title="About This Site" accesskey="B" href="/Consortium/">About Consortium</a> |
+ <a title="Contact Consortium" accesskey="C" href="/Consortium/contact">Contact</a>
+ </p>
+</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><form action="/search">
+ <label>Search: <input type="search" name="q" accesskey="s 0"></label>
+ <input type="submit">
+</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><input type=submit accesskey="N @ 1" value="Compose">
+...
+<script>
+ function labelButton(button) {
+ if (button.accessKeyLabel)
+ button.value += ' (' + button.accessKeyLabel + ')';
+ }
+ var inputs = document.getElementsByTagName('input');
+ for (var i = 0; i < inputs.length; i += 1) {
+ if (inputs[i].type == "submit")
+ labelButton(inputs[i]);
+ }
+</script></pre>
+
+ <p>On one user agent, the button's label might become
+ "<samp>Compose (⌘N)</samp>". On another, it might become
+ "<samp>Compose (Alt+⇧+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 @@
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,72 +67439,7 @@
</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><nav>
- <p>
- <a title="Consortium Activities" accesskey="A" href="/Consortium/activities">Activities</a> |
- <a title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports</a> |
- <a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex">Site Index</a> |
- <a title="About This Site" accesskey="B" href="/Consortium/">About Consortium</a> |
- <a title="Contact Consortium" accesskey="C" href="/Consortium/contact">Contact</a>
- </p>
-</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><form action="/search">
- <label>Search: <input type="search" name="q" accesskey="s 0"></label>
- <input type="submit">
-</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><input type=submit accesskey="N @ 1" value="Compose">
-...
-<script>
- function labelButton(button) {
- if (button.accessKeyLabel)
- button.value += ' (' + button.accessKeyLabel + ')';
- }
- var inputs = document.getElementsByTagName('input');
- for (var i = 0; i < inputs.length; i += 1) {
- if (inputs[i].type == "submit")
- labelButton(inputs[i]);
- }
-</script></pre>
-
- <p>On one user agent, the button's label might become
- "<samp>Compose (⌘N)</samp>". On another, it might become
- "<samp>Compose (Alt+⇧+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>
<p>Every <a href=#browsing-context>browsing context</a> has <dfn id=the-selection title="the
@@ -68560,7 +68590,7 @@
</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 @@
</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 @@
<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 @@
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 @@
<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 @@
<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>
Modified: source
===================================================================
--- source 2010-10-07 21:43:45 UTC (rev 5595)
+++ source 2010-10-07 22:50:41 UTC (rev 5596)
@@ -76245,8 +76245,39 @@
- <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
<code title="attr-accesskey">accesskey</code> attribute's value is
@@ -76257,8 +76288,75 @@
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><nav>
+ <p>
+ <a title="Consortium Activities" accesskey="A" href="/Consortium/activities">Activities</a> |
+ <a title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports</a> |
+ <a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex">Site Index</a> |
+ <a title="About This Site" accesskey="B" href="/Consortium/">About Consortium</a> |
+ <a title="Contact Consortium" accesskey="C" href="/Consortium/contact">Contact</a>
+ </p>
+</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><form action="/search">
+ <label>Search: <input type="search" name="q" accesskey="s 0"></label>
+ <input type="submit">
+</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><input type=submit accesskey="N @ 1" value="Compose">
+...
+<script>
+ function labelButton(button) {
+ if (button.accessKeyLabel)
+ button.value += ' (' + button.accessKeyLabel + ')';
+ }
+ var inputs = document.getElementsByTagName('input');
+ for (var i = 0; i < inputs.length; i += 1) {
+ if (inputs[i].type == "submit")
+ labelButton(inputs[i]);
+ }
+</script></pre>
+
+ <p>On one user agent, the button's label might become
+ "<samp>Compose (⌘N)</samp>". On another, it might become
+ "<samp>Compose (Alt+⇧+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 @@
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,72 +76439,7 @@
</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><nav>
- <p>
- <a title="Consortium Activities" accesskey="A" href="/Consortium/activities">Activities</a> |
- <a title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports</a> |
- <a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex">Site Index</a> |
- <a title="About This Site" accesskey="B" href="/Consortium/">About Consortium</a> |
- <a title="Contact Consortium" accesskey="C" href="/Consortium/contact">Contact</a>
- </p>
-</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><form action="/search">
- <label>Search: <input type="search" name="q" accesskey="s 0"></label>
- <input type="submit">
-</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><input type=submit accesskey="N @ 1" value="Compose">
-...
-<script>
- function labelButton(button) {
- if (button.accessKeyLabel)
- button.value += ' (' + button.accessKeyLabel + ')';
- }
- var inputs = document.getElementsByTagName('input');
- for (var i = 0; i < inputs.length; i += 1) {
- if (inputs[i].type == "submit")
- labelButton(inputs[i]);
- }
-</script></pre>
-
- <p>On one user agent, the button's label might become
- "<samp>Compose (⌘N)</samp>". On another, it might become
- "<samp>Compose (Alt+⇧+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>
<p>Every <span>browsing context</span> has <dfn title="the
More information about the Commit-Watchers
mailing list