- From: poot <cvsmail@w3.org>
- Date: Fri, 8 Oct 2010 07:51:09 +0900 (JST)
- To: public-html-diffs@w3.org
hixie: Explain accesskey better. (whatwg r5596)
http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.4473&r2=1.4474&f=h
http://html5.org/tools/web-apps-tracker?from=5595&to=5596
===================================================================
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><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">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><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">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:51:39 UTC