HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
559610775Explain accesskey better.2010-10-07 22:50
@@ -76238,34 +76238,132 @@ interface <dfn>NavigatorAbilities</dfn> {
   title="dom-blur">blur()</code> method is unwisely being used to
   remove the focus ring for aesthetics reasons, the page would become
   unusable by keyboard users. Ignoring calls to this method would thus
   allow keyboard users to interact with the page.</p>
 
   </div>
 
 
 
 
-  <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
   used by the user agent as a guide for creating a keyboard shortcut
   that activates or focuses the element.</p>
 
   <p>If specified, the value must be an <span>ordered set of unique
   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
   follows:</p>
 
   <ol>
 
    <li><p>If the element has no <code
    title="attr-accesskey">accesskey</code> attribute, then skip to the
    <i>fallback</i> step below.</p></li>
@@ -76322,101 +76420,32 @@ interface <dfn>NavigatorAbilities</dfn> {
   State</span> facet is false (visible), and the command's <span
   title="command-facet-DisabledState">Disabled State</span> facet is
   also false (enabled), then the user agent must trigger the <span
   title="command-facet-Action">Action</span> of the command.</p>
 
   <p>User agents may expose elements that have an <code
   title="attr-accesskey">accesskey</code> attribute in other ways as
   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>
 
   <p>The <dfn
   title="dom-accessKeyLabel"><code>accessKeyLabel</code></dfn> IDL
   attribute must return a string that represents the element's
   <span>assigned access key</span>, if any. If the element does not
   have one, then the IDL attribute must return the empty string.</p>
 
   </div>
 
-  <div class="example">
-
-   <p>In the following example, a variety of links are given with
-   access keys so that keyboard users familiar with the site can
-   more quickly navigate to the relevant pages:</p>
-
-   <pre>&lt;nav>
- &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
   selection">a selection</dfn>. The selection can be empty, and the
   selection can have more than one range (a disjointed selection). The
   user agent should allow the user to change the selection. User
   agents are not required to let the user select more than one range,
   and may collapse multiple ranges in the selection to a single range
   when the user interacts with the selection. (But, of course, the

|