W3C home > Mailing lists > Public > public-html-commits@w3.org > October 2010

html5/spec Overview.html,1.4473,1.4474

From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
Date: Thu, 07 Oct 2010 22:50:52 +0000
To: public-html-commits@w3.org
Message-Id: <E1P3zIa-0008HO-BH@lionel-hutz.w3.org>
Update of /sources/public/html5/spec
In directory hutz:/tmp/cvs-serv31800

Modified Files:
	Overview.html 
Log Message:
Explain accesskey better. (whatwg r5596)

Index: Overview.html
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.4473
retrieving revision 1.4474
diff -u -d -r1.4473 -r1.4474
--- Overview.html	7 Oct 2010 21:43:51 -0000	1.4473
+++ Overview.html	7 Oct 2010 22:50:46 -0000	1.4474
@@ -1023,7 +1023,11 @@
      <li><a href="#focus-management"><span class="secno">7.4.2 </span>Focus management</a></li>
      <li><a href="#document-level-focus-apis"><span class="secno">7.4.3 </span>Document-level focus APIs</a></li>
      <li><a href="#element-level-focus-apis"><span class="secno">7.4.4 </span>Element-level focus APIs</a></ol></li>
-   <li><a href="#the-accesskey-attribute"><span class="secno">7.5 </span>The <code>accesskey</code> attribute</a></li>
+   <li><a href="#assigning-keyboard-shortcuts"><span class="secno">7.5 </span>Assigning keyboard shortcuts</a>
+    <ol>
+     <li><a href="#introduction-5"><span class="secno">7.5.1 </span>Introduction</a></li>
+     <li><a href="#the-accesskey-attribute"><span class="secno">7.5.2 </span>The <code>accesskey</code> attribute</a></li>
+     <li><a href="#processing-model-3"><span class="secno">7.5.3 </span>Processing model</a></ol></li>
    <li><a href="#selection"><span class="secno">7.6 </span>The text selection APIs</a>
     <ol>
      <li><a href="#documentSelection"><span class="secno">7.6.1 </span>APIs for the browsing context selection</a></li>
@@ -1035,7 +1039,7 @@
    <li><a href="#spelling-and-grammar-checking"><span class="secno">7.8 </span>Spelling and grammar checking</a></li>
    <li><a href="#dnd"><span class="secno">7.9 </span>Drag and drop</a>
     <ol>
-     <li><a href="#introduction-5"><span class="secno">7.9.1 </span>Introduction</a></li>
+     <li><a href="#introduction-6"><span class="secno">7.9.1 </span>Introduction</a></li>
      <li><a href="#the-dragevent-and-datatransfer-interfaces"><span class="secno">7.9.2 </span>The <code>DragEvent</code> and <code>DataTransfer</code> interfaces</a></li>
      <li><a href="#dndevents"><span class="secno">7.9.3 </span>Events fired during a drag-and-drop action</a></li>
      <li><a href="#drag-and-drop-processing-model"><span class="secno">7.9.4 </span>Drag-and-drop processing model</a>
@@ -1208,10 +1212,10 @@
    <li><a href="#parsing-xhtml-fragments"><span class="secno">9.4 </span>Parsing XHTML fragments</a></ol></li>
  <li><a href="#rendering"><span class="secno">10 </span>Rendering</a>
   <ol>
-   <li><a href="#introduction-6"><span class="secno">10.1 </span>Introduction</a></li>
+   <li><a href="#introduction-7"><span class="secno">10.1 </span>Introduction</a></li>
    <li><a href="#the-css-user-agent-style-sheet-and-presentational-hints"><span class="secno">10.2 </span>The CSS user agent style sheet and presentational hints</a>
     <ol>
-     <li><a href="#introduction-7"><span class="secno">10.2.1 </span>Introduction</a></li>
+     <li><a href="#introduction-8"><span class="secno">10.2.1 </span>Introduction</a></li>
      <li><a href="#display-types"><span class="secno">10.2.2 </span>Display types</a></li>
      <li><a href="#margins-and-padding"><span class="secno">10.2.3 </span>Margins and padding</a></li>
      <li><a href="#alignment"><span class="secno">10.2.4 </span>Alignment</a></li>
@@ -1229,7 +1233,7 @@
      <li><a href="#toolbars-0"><span class="secno">10.3.5 </span>Toolbars</a></ol></li>
    <li><a href="#bindings"><span class="secno">10.4 </span>Bindings</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="#the-button-element-0"><span class="secno">10.4.2 </span>The <code>button</code> element</a></li>
      <li><a href="#the-details-element-0"><span class="secno">10.4.3 </span>The <code>details</code> element</a></li>
      <li><a href="#the-input-element-as-a-text-entry-widget"><span class="secno">10.4.4 </span>The <code>input</code> element as a text entry widget</a></li>
@@ -49727,12 +49731,83 @@
   unusable by keyboard users. Ignoring calls to this method would thus
   allow keyboard users to interact with the page.</p>
 
-  </div><h3 id="the-accesskey-attribute"><span class="secno">7.5 </span>The <dfn title="attr-accesskey"><code>accesskey</code></dfn> attribute</h3><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
+  </div><h3 id="assigning-keyboard-shortcuts"><span class="secno">7.5 </span>Assigning keyboard shortcuts</h3><h4 id="introduction-5"><span class="secno">7.5.1 </span>Introduction</h4><p><i>This section is non-normative.</i><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>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>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>Each alternative consists of a single character, such as a letter
+  or digit.<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.<h4 id="the-accesskey-attribute"><span class="secno">7.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
   that activates or focuses the element.<p>If specified, the value must be an <a href="#ordered-set-of-unique-space-separated-tokens">ordered set of unique
   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.<div class="impl">
+  each of which must be exactly one Unicode code point in length.<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">7.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
@@ -49790,8 +49865,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>
 
@@ -49800,64 +49873,6 @@
   <a href="#assigned-access-key">assigned access key</a>, 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&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">7.6 </span>The text selection APIs</h3><p>Every <a href="#browsing-context">browsing context</a> has <dfn id="the-selection" title="the
   selection">a selection</dfn>. The selection can be empty, and the
   selection can have more than one range (a disjointed selection). The
@@ -50899,7 +50914,7 @@
   not canceled, there must be at least one element in the middle
   step).</p>
 
-  </div><h4 id="introduction-5"><span class="secno">7.9.1 </span>Introduction</h4><p><i>This section is non-normative.</i><p>To make an element draggable is simple: give the element a <code title="attr-draggable"><a href="#the-draggable-attribute">draggable</a></code> attribute, and set an event
+  </div><h4 id="introduction-6"><span class="secno">7.9.1 </span>Introduction</h4><p><i>This section is non-normative.</i><p>To make an element draggable is simple: give the element a <code title="attr-draggable"><a href="#the-draggable-attribute">draggable</a></code> attribute, and set an event
   listener for <code title="event-dragstart"><a href="#event-dragstart">dragstart</a></code> that
   stores the data being dragged.<p>The event handler typically needs to check that it's not a text
   selection that is being dragged, and then needs to store data into
@@ -61627,7 +61642,7 @@
   lead to this experience.</i></p>
 
 
-  <h3 id="introduction-6"><span class="secno">10.1 </span>Introduction</h3>
+  <h3 id="introduction-7"><span class="secno">10.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
@@ -61662,7 +61677,7 @@
 
   <h3 id="the-css-user-agent-style-sheet-and-presentational-hints"><span class="secno">10.2 </span>The CSS user agent style sheet and presentational hints</h3>
 
-  <h4 id="introduction-7"><span class="secno">10.2.1 </span>Introduction</h4>
+  <h4 id="introduction-8"><span class="secno">10.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
@@ -62885,7 +62900,7 @@
 
   <h3 id="bindings"><span class="secno">10.4 </span>Bindings</h3>
 
-  <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>A number of elements have their rendering defined in terms of the
   'binding' property. <a href="#refsBECSS">[BECSS]</a></p>
Received on Thursday, 7 October 2010 22:50:54 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Thursday, 7 October 2010 22:50:58 GMT