HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
3065Define accesskey='' and related magic to try to Solve the Problem.2009-05-03 01:55
@@ -8015,20 +8015,22 @@ interface <dfn>HTMLDocument</dfn> {
   readonly attribute <span>DOMStringMap</span> <span title="dom-dataset">dataset</span>;
 
   // <span>user interaction</span>
            attribute boolean <span title="dom-hidden">hidden</span>;
   void <span title="dom-click">click</span>();
   void <span title="dom-scrollIntoView">scrollIntoView</span>();
   void <span title="dom-scrollIntoView">scrollIntoView</span>(in boolean top);
            attribute long <span title="dom-tabindex">tabIndex</span>;
   void <span title="dom-focus">focus</span>();
   void <span title="dom-blur">blur</span>();
+           attribute DOMString <span title="dom-accessKey">accessKey</span>;
+  readonly attribute DOMString <span title="dom-accessKeyLabel">accessKeyLabel</span>;
            attribute boolean <span title="dom-draggable">draggable</span>;
            attribute DOMString <span title="dom-contentEditable">contentEditable</span>;
   readonly attribute boolean <span title="dom-isContentEditable">isContentEditable</span>;
            attribute <span>HTMLMenuElement</span> <span title="dom-contextMenu">contextMenu</span>;
            attribute boolean <span title="dom-spellcheck">spellcheck</span>;
 
   // <span>command API</span>
   readonly attribute DOMString <span title="dom-command-ro-commandType">commandType</span>;          
   readonly attribute DOMString <span title="dom-command-ro-label">label</span>;
   readonly attribute DOMString <span title="dom-command-ro-icon">icon</span>;
@@ -8104,20 +8106,21 @@ interface <dfn>HTMLDocument</dfn> {
 
 
 
   <h4><dfn>Global attributes</dfn></h4>
 
   <p>The following attributes are common to and may be specified on
   all <span>HTML elements</span><span class="impl"> (even those not
   defined in this specification)</span>:</p>
 
   <ul class="brief">
+   <li><code title="attr-accesskey">accesskey</code></li>
    <li><code title="attr-class">class</code></li>
    <li><code title="attr-contenteditable">contenteditable</code></li>
    <li><code title="attr-contextmenu">contextmenu</code></li>
    <li><code title="attr-dir">dir</code></li>
    <li><code title="attr-draggable">draggable</code></li>
    <li><code title="attr-id">id</code></li>
    <li><code title="attr-hidden">hidden</code></li>
    <li><code title="attr-lang">lang</code></li>
    <li><code title="attr-style">style</code></li>
    <li><code title="attr-spellcheck">spellcheck</code></li>
@@ -44351,20 +44354,25 @@ explain that only direct children of the <menu> matter
 
    <dd>A helpful or descriptive string that can be shown to the
    user.</dd>
 
    <dt><dfn title="command-facet-Icon">Icon</dfn></dt>
 
    <dd>An <span>absolute URL</span> identifying a graphical image that
    represents the action. A command might not have an Icon.</dd> <!--
    changing base URLs might change the icon -->
 
+   <dt><dfn title="command-facet-AccessKey">Access Key</dfn></dt>
+
+   <dd>A key combination selected by the user agent that triggers the
+   command. A command might not have an Access Key.</dd>
+
    <dt><dfn title="command-facet-HiddenState">Hidden State</dfn></dt>
 
    <dd>Whether the command is hidden or not (basically, whether it
    should be shown in menus).</dd>
 
    <dt><dfn title="command-facet-DisabledState">Disabled State</dfn></dt>
 
    <dd>Whether the command is relevant and can be triggered or not.</dd>
 
    <dt><dfn title="command-facet-CheckedState">Checked State</dfn></dt>
@@ -44427,20 +44435,28 @@ explain that only direct children of the <menu> matter
    </dd>
 
    <dt><var title="">element</var> . <code title="dom-command-ro-icon">icon</code></dt>
 
    <dd>
 
     <p>Exposes the <span title="command-facet-Icon">Icon</span> facet of the command.</p>
 
    </dd>
 
+   <dt><var title="">element</var> . <code title="dom-accessKeyLabel">accessKeyLabel</code></dt>
+
+   <dd>
+
+    <p>Exposes the <span title="command-facet-AccessKey">Access Key</span> facet of the command.</p>
+
+   </dd>
+
    <dt><var title="">element</var> . <code title="dom-hidden">hidden</code></dt>
 
    <dd>
 
     <p>Exposes the <span title="command-facet-HiddenState">Hidden State</span> facet of the command.</p>
 
    </dd>
 
    <dt><var title="">element</var> . <code title="dom-command-ro-disabled">disabled</code></dt>
 
@@ -44534,24 +44550,26 @@ explain that only direct children of the <menu> matter
   attribute must return a list containing the elements that can
   trigger the command (the command's <span
   title="command-facet-Triggers">Triggers</span>). The list must be
   <span>live</span>. While the element does not define a command, the
   list must be empty.</p>
 -->
 
   <p class="note">The <span title="command-facet-ID">ID</span> facet
   is exposed by the the <code title="dom-id">id</code> DOM attribute,
   the <span title="command-facet-Hint">Hint</span> facet is exposed by
-  the <code title="dom-title">title</code> DOM attribute, and the
-  <span title="command-facet-HiddenState">Hidden State</span> facet is
-  exposed by the <code title="dom-hidden">hidden</code> DOM
-  attribute.</p>
+  the <code title="dom-title">title</code> DOM attribute, the <span
+  title="command-facet-AccessKey">AccessKey</span> facet is exposed by
+  the <code title="dom-accessKeyLabel">accessKeyLabel</code> DOM
+  attribute, and the <span title="command-facet-HiddenState">Hidden
+  State</span> facet is exposed by the <code
+  title="dom-hidden">hidden</code> DOM attribute.</p>
 
   </div>
 
   <hr>
 
   <dl class="domintro">
 
    <dt><var title="">document</var> . <code title="dom-document-commands">commands</code></dt>
    <dd>
     <p>Returns an <code>HTMLCollection</code> of the elements in the
@@ -44565,20 +44583,29 @@ explain that only direct children of the <menu> matter
   <p>The <dfn
   title="dom-document-commands"><code>commands</code></dfn> attribute
   of the document's <code>HTMLDocument</code> interface must return an
   <code>HTMLCollection</code> rooted at the <code>Document</code>
   node, whose filter matches only elements that <span
   title="concept-command">define commands</span> and have <span
   title="command-facet-ID">IDs</span>.</p>
 
   </div>
 
+  <hr>
+
+  <p>User agents may expose the <span
+  title="concept-command">commands</span> whose <span
+  title="command-facet-HiddenState">Hidden State</span> facet is false
+  (visible), e.g. in the user agent's menu bar. User agents are
+  encouraged to do this especially for commands that have <span
+  title="command-facet-AccessKey">Access Keys</span>, as a way to
+  advertise those keys to the user.</p>
 
 
   <div class="impl">
 
   <h5><dfn title="a-command">Using the <code>a</code> element to define a command</dfn></h5>
 
   <p>An <code>a</code> element with an <code
   title="attr-hyperlink-href">href</code> attribute <span
   title="concept-command">defines a command</span>.</p>
 
@@ -44601,20 +44628,24 @@ explain that only direct children of the <menu> matter
 
   <p>The <span title="command-facet-Icon">Icon</span> of the command
   is the <span>absolute URL</span> obtained from <span title="resolve
   a url">resolving</span> the value of the <code
   title="attr-img-src">src</code> attribute of the first
   <code>img</code> element descendant of the element, relative to that
   element, if there is such an element and resolving its attribute is
   successful. Otherwise, there is no <span
   title="command-facet-Icon">Icon</span> for the command.</p>
 
+  <p>The <span title="command-facet-AccessKey">AccessKey</span> of the
+  command is the element's <span>assigned access key</span>, if
+  any.</p>
+
   <p>The <span title="command-facet-HiddenState">Hidden State</span>
   of the command is true (hidden) if the element has a <code
   title="attr-hidden">hidden</code> attribute, and false
   otherwise.</p>
 
   <p>The <span title="command-facet-DisabledState">Disabled
   State</span> facet of the command is always false. (The command is
   always enabled.)</p>
 
   <p>The <span title="command-facet-CheckedState">Checked State</span>
@@ -44628,20 +44659,21 @@ explain that only direct children of the <menu> matter
   <h5><dfn title="button-command">Using the <code>button</code> element to define a command</dfn></h5>
 
   <p>A <code>button</code> element always <span
   title="concept-command">defines a command</span>.</p>
 
   <p>The <span title="command-facet-Type">Type</span>, <span
   title="command-facet-ID">ID</span>, <span
   title="command-facet-Label">Label</span>, <span
   title="command-facet-Hint">Hint</span>, <span
   title="command-facet-Icon">Icon</span>, <span
+  title="command-facet-AccessKey">Access Key</span>, <span
   title="command-facet-HiddenState">Hidden State</span>, <span
   title="command-facet-CheckedState">Checked State</span>, and <span
   title="command-facet-Action">Action</span> facets of the command are
   determined <span title="a-command">as for <code>a</code>
   elements</span> (see the previous section).</p>
 
   <p>The <span title="command-facet-DisabledState">Disabled
   State</span> of the command mirrors the <span
   title="concept-fe-disabled">disabled</span> state of the button.</p>
 
@@ -44677,37 +44709,41 @@ explain that only direct children of the <menu> matter
   then it is the string given by the <code
   title="attr-input-value">value</code> attribute, if any, and a
   <span>UA-dependent value</span><!-- XXX xref--> that the UA uses to
   label the button itself if the attribute is absent.</p>
 
   <p>Otherwise, the <span title="command-facet-Type">Type</span> is
   "radio" or "checkbox". If the element is a <span>labeled
   control</span>, the <code>textContent</code> of the first
   <code>label</code> element in <span>tree order</span> whose
   <span>labeled control</span> is the element in question is the <span
-  title="command-facet-Label">Label</span> (in DOM terms, this the
+  title="command-facet-Label">Label</span> (in DOM terms, this is the
   string given by <code><var
   title="">element</var>.labels[0].textContent</code>).  Otherwise,
   the value of the <code title="attr-input-value">value</code>
   attribute, if present, is the <span
   title="command-facet-Label">Label</span>. Otherwise, the <span
   title="command-facet-Label">Label</span> is the empty string.</p>
 
   <p>The <span title="command-facet-Hint">Hint</span> of the command
   is the value of the <code title="attr-title">title</code> attribute
   of the <code>input</code> element. If the attribute is not present, the
   <span title="command-facet-Hint">Hint</span> is the empty
   string.</p>
 
   <p>There is no <span title="command-facet-Icon">Icon</span> for the
   command.</p>
 
+  <p>The <span title="command-facet-AccessKey">AccessKey</span> of the
+  command is the element's <span>assigned access key</span>, if
+  any.</p>
+
   <p>The <span title="command-facet-HiddenState">Hidden State</span>
   of the command is true (hidden) if the element has a <code
   title="attr-hidden">hidden</code> attribute, and false
   otherwise.</p>
 
   <p>The <span title="command-facet-DisabledState">Disabled
   State</span> of the command mirrors the <span
   title="concept-fe-disabled">disabled</span> state of the
   control.</p>
 
@@ -44751,20 +44787,24 @@ explain that only direct children of the <menu> matter
   <code>textContent</code> DOM attribute if there isn't.</p>
 
   <p>The <span title="command-facet-Hint">Hint</span> of the command
   is the string given by the element's <code
   title="attr-title">title</code> attribute, if any, and the empty
   string if the attribute is absent.</p>
 
   <p>There is no <span title="command-facet-Icon">Icon</span> for the
   command.</p>
 
+  <p>The <span title="command-facet-AccessKey">AccessKey</span> of the
+  command is the element's <span>assigned access key</span>, if
+  any.</p>
+
   <p>The <span title="command-facet-HiddenState">Hidden State</span>
   of the command is true (hidden) if the element has a <code
   title="attr-hidden">hidden</code> attribute, and false
   otherwise.</p>
 
   <p>The <span title="command-facet-DisabledState">Disabled
   State</span> of the command is true (disabled) if the element is
   <span title="concept-option-disabled">disabled</span> or if its
   nearest ancestor <code>select</code> element is <span
   title="concept-option-disabled">disabled</span>, and false
@@ -44814,20 +44854,24 @@ explain that only direct children of the <menu> matter
   empty string if the attribute is absent.</p>
 
   <p>The <span title="command-facet-Icon">Icon</span> for the command
   is the <span>absolute URL</span> obtained from <span title="resolve
   a url">resolving</span> the value of the element's <code
   title="attr-command-icon">icon</code> attribute, relative to the
   element, if it has such an attribute and resolving it is
   successful. Otherwise, there is no <span
   title="command-facet-Icon">Icon</span> for the command.</p>
 
+  <p>The <span title="command-facet-AccessKey">AccessKey</span> of the
+  command is the element's <span>assigned access key</span>, if
+  any.</p>
+
   <p>The <span title="command-facet-HiddenState">Hidden State</span>
   of the command is true (hidden) if the element has a <code
   title="attr-hidden">hidden</code> attribute, and false
   otherwise.</p>
 
   <p>The <span title="command-facet-DisabledState">Disabled
   State</span> of the command is true (disabled) if the element has a
   <code title="attr-command-disabled">disabled</code> attribute, and
   false otherwise.</p>
 
@@ -44873,40 +44917,110 @@ explain that only direct children of the <menu> matter
   is the <span>absolute URL</span> obtained from <span title="resolve
   a url">resolving</span> the value of the <code
   title="attr-img-src">src</code> attribute of the first
   <code>img</code> element descendant of the element, relative to that
   element, if there is such an element and resolving its attribute is
   successful. Otherwise, the <span
   title="command-facet-Icon">Icon</span> is a user-agent-defined image
   appropriate for the <code>bb</code> element's <code
   title="attr-bb-type">type</code> attribute's state.</p>
 
+  <p>The <span title="command-facet-AccessKey">AccessKey</span> of the
+  command is the element's <span>assigned access key</span>, if
+  any.</p>
+
   <p>The <span title="command-facet-HiddenState">Hidden State</span>
   facet of the command is true (hidden) if the <code>bb</code>
   element's <code title="attr-bb-type">type</code> attribute's state
   is <i title="attr-bb-type-null-state">null</i> or if the element has
   a <code title="attr-hidden">hidden</code> attribute, and false
   otherwise.</p>
 
   <p>The <span title="command-facet-DisabledState">Disabled
   State</span> facet of the command is true if the <code>bb</code>
   element's <code title="attr-bb-type">type</code> attribute's state's
   <i>relevance</i> is false, and true otherwise.</p>
 
   <p>The <span title="command-facet-CheckedState">Checked State</span>
   of the command is always false. (The command is never checked.)</p>
 
   <p>The <span title="command-facet-Action">Action</span> of the
   command is to perform the <i>action</i> of the <code>bb</code>
   element's <code title="attr-bb-type">type</code> attribute's
   state.</p>
 
+
+  <h5><dfn title="accesskey-command">Using the <code title="attr-accesskey">accesskey</code> attribute to define a command</dfn></h5>
+
+  <p>An element that is <span>focusable</span>, has an <span>assigned
+  access key</span>, and is neither an <code>a</code> element with an
+  <code title="attr-a-href">href</code> attribute, a
+  <code>button</code> element, an <code>input</code> element whose
+  attribute is in one of the <span
+  title="attr-input-type-submit">Submit Button</span>, <span
+  title="attr-input-type-reset">Reset Button</span>, <span
+  title="attr-input-type-button">Button</span>, <span
+  title="attr-input-type-radio">Radio Button</span>, or <span
+  title="attr-input-type-checkbox">Checkbox</span> states, an
+  <code>option</code> element with an ancestor <code>select</code>
+  element and either no <code title="attr-option-value">value</code>
+  attribute or a <code title="attr-option-value">value</code>
+  attribute that is not the empty string, a <code>command</code>
+  element, nor a <code>bb</code> element, <span
+  title="concept-command">defines a command</span>.</p>
+
+  <p>The <span title="command-facet-Type">Type</span> of the command
+  is "command".</p>
+
+  <p>The <span title="command-facet-ID">ID</span> of the command is
+  the value of the <code title="attr-id">id</code> attribute of the
+  element, if the attribute is present and not empty. Otherwise the
+  command is an <span>anonymous command</span>.</p>
+
+  <p>The <span title="command-facet-Label">Label</span> of the command
+  depends on the element. If the element is a <span>labeled
+  control</span>, the <code>textContent</code> of the first
+  <code>label</code> element in <span>tree order</span> whose
+  <span>labeled control</span> is the element in question is the <span
+  title="command-facet-Label">Label</span> (in DOM terms, this is the
+  string given by <code><var
+  title="">element</var>.labels[0].textContent</code>). Otherwise, the
+  <span title="command-facet-Label">Label</span> is the
+  <code>textContent</code> of the element itself.</p>
+
+  <p>The <span title="command-facet-Hint">Hint</span> of the command
+  is the value of the <code title="attr-title">title</code> attribute
+  of the element. If the attribute is not present, the <span
+  title="command-facet-Hint">Hint</span> is the empty string.</p>
+
+  <p>There is no <span title="command-facet-Icon">Icon</span> for the
+  command.</p>
+
+  <p>The <span title="command-facet-AccessKey">AccessKey</span> of the
+  command is the element's <span>assigned access key</span>.</p>
+
+  <p>The <span title="command-facet-HiddenState">Hidden State</span>
+  of the command is true (hidden) if the element has a <code
+  title="attr-hidden">hidden</code> attribute, and false
+  otherwise.</p>
+
+  <p>The <span title="command-facet-DisabledState">Disabled
+  State</span> facet of the command is always false. (The command is
+  always enabled.)</p>
+
+  <p>The <span title="command-facet-CheckedState">Checked State</span>
+  of the command is always false. (The command is never checked.)</p>
+
+  <p>The <span title="command-facet-Action">Action</span> of the
+  command is to run the <span>focusing steps</span> for the
+  element.</p>
+
   </div>
 
 
   <h3>Miscellaneous elements</h3>
 
   <h4>The <dfn><code>legend</code></dfn> element</h4>
 
   <dl class="element">
    <dt>Categories</dt>
    <dd>None.</dd>
@@ -56122,28 +56236,32 @@ at the first element with the given ID must be treated as if it was cloned and r
   because the tabbed interface is merely a kind of overflow
   presentation &mdash; showing all the form controls in one big page
   with a scrollbar would be equivalent, and no less correct.</p>
 
   <p>Elements in a section hidden by the <code
   title="attr-hidden">hidden</code> attribute are still active,
   e.g. scripts and form controls in such sections still render execute
   and submit respectively. Only their presentation to the user
   changes.</p>
 
+  <div class="impl">
+
   <!-- XXX might be worth disabling user interaction event submission
   in hidden areas? e.g. make onmousemove and onclick and form controls
   not respond to input? -->
 
   <p>The <dfn title="dom-hidden"><code>hidden</code></dfn> DOM
   attribute must <span>reflect</span> the content attribute of the
   same name.</p>
 
+  </div>
+
 
 
   <h3>Activation</h3>
 
   <!-- v2 idea: HTMLImageElement.click(x, y); or clickPoint(), if
        click() can't be done in IE; can this be emulated in IE by
        posting a synthetic mouse click event with those X and Y
        coords? (ack Csaba Gabor)
   -->
 
@@ -56665,20 +56783,182 @@ at the first element with the given ID must be treated as if it was cloned and r
   invoked, should run the <span>focusing steps</span> for <span>the
   body element</span>, if there is one; if there is not, then it
   should run the <span>unfocusing steps</span> for the element on
   which the method was called instead. User agents may selectively or
   uniformly ignore calls to this method for usability reasons.</p>
 
   </div>
 
 
 
+
+
+  <h3>The <dfn title="attr-accesskey"><code>accesskey</code></dfn> attribute</h3>
+
+  <p>All elements 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>, each of which must be exactly one
+  Unicode code point in length.</p>
+
+  <div class="impl">
+
+  <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 the element
+   has no <span>assigned access key</span>.</p></li>
+
+   <li><p>Otherwise, the user agent must must <span title="split a
+   string on spaces">split the attribute's value on spaces</span>, and
+   let <var title="">keys</var> be the resulting tokens.</p></li>
+
+   <li>
+
+    <p>For each value in <var title="">keys</var> in turn, in the
+    order the tokens appeared in the attribute's value, run the
+    following substeps:</p>
+
+    <ol>
+
+     <li><p>If the value is not a string exactly one Unicode code
+     point in length, then skip the remainder of these steps for this
+     value.</p></li>
+
+     <li><p>If the value does not correspond to a key on the system's
+     keyboard, then skip the remainder of these steps for this
+     value.</p></li>
+
+     <li><p>If the user agent can find a combination of modifier keys
+     that, with the key that corresponds to the value given in the
+     attribute, can be used as a shortcut key, then the user agent may
+     assign that combination of keys as the element's <span>assigned
+     access key</span> and abort these steps.</p></li>
+
+    </ol>
+
+   </li>
+
+   <li><p>If none of the values (if any) result in an access key being
+   assigned, then the element has no <span>assigned access
+   key</span>.</p></li>
+
+  </ol>
+
+  <p>Once a user agent has selected and assigned an access key for an
+  element, the user agent should not change the element's
+  <span>assigned access key</span> unless the <code
+  title="attr-accesskey">accesskey</code> content attribute is changed
+  or the element is moved to another <code>Document</code>.</p>
+
+  <p>When the user presses the key combination corresponding to the
+  <span>assigned access key</span> for an element, if the element
+  <span title="concept-command">defines a command</span>, 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> DOM
+  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> DOM
+  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 DOM 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
   user agent may let the user create selections with multiple

|