HTML Standard Tracker

Diff (omit for latest revision)
Filter

Short URL: http://html5.org/r/5596

File a bug

SVNBugCommentTime (UTC)
559610775Explain accesskey better.2010-10-07 22:50
Index: source
===================================================================
--- source	(revision 5595)
+++ source	(revision 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>&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 @@
   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>&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>
 
   <p>Every <span>browsing context</span> has <dfn title="the

|