Permalink
Browse files

[acgiow] (2) First cut at ARIA integration.

git-svn-id: http://svn.whatwg.org/webapps@3657 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent d34f586 commit 36653f463d7f59e9b0c0de7a43a0853b4a3ee809 @Hixie Hixie committed Aug 22, 2009
Showing with 729 additions and 31 deletions.
  1. +318 −18 index
  2. +411 −13 source
View
336 index
@@ -71,7 +71,7 @@
<div class=head>
<p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
<h1>HTML 5</h1>
- <h2 class="no-num no-toc" id=draft-standard-&mdash;-date:-01-jan-1901>Draft Standard &mdash; 18 August 2009</h2>
+ <h2 class="no-num no-toc" id=draft-standard-&mdash;-date:-01-jan-1901>Draft Standard &mdash; 22 August 2009</h2>
<p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -276,7 +276,8 @@
<li><a href=#embedded-content><span class=secno>3.2.5.1.6 </span>Embedded content</a></li>
<li><a href=#interactive-content><span class=secno>3.2.5.1.7 </span>Interactive content</a></ol></li>
<li><a href=#transparent-content-models><span class=secno>3.2.5.2 </span>Transparent content models</a></li>
- <li><a href=#paragraphs><span class=secno>3.2.5.3 </span>Paragraphs</a></ol></ol></li>
+ <li><a href=#paragraphs><span class=secno>3.2.5.3 </span>Paragraphs</a></ol></li>
+ <li><a href=#annotations-for-assistive-technology-products><span class=secno>3.2.6 </span>Annotations for assistive technology products</a></ol></li>
<li><a href=#apis-in-html-documents><span class=secno>3.3 </span>APIs in HTML documents</a></li>
<li><a href=#interactions-with-xpath-and-xslt><span class=secno>3.4 </span>Interactions with XPath and XSLT</a></li>
<li><a href=#dynamic-markup-insertion><span class=secno>3.5 </span>Dynamic markup insertion</a>
@@ -7592,9 +7593,9 @@ interface <dfn id=htmlunknownelement>HTMLUnknownElement</dfn> : <a href=#htmlele
<li><code title=attr-subject><a href=#attr-subject>subject</a></code></li>
<li><code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code></li>
<li><code title=attr-title><a href=#the-title-attribute>title</a></code></li>
- </ul><p>In addition, unless otherwise specified, the following
- <a href=#event-handler-content-attributes>event handler content attributes</a> may be specified on
- any <a href=#html-elements title="HTML elements">HTML element</a>:</p>
+ </ul><hr><p>Unless otherwise specified, the following <a href=#event-handler-content-attributes>event handler
+ content attributes</a> may be specified on any <a href=#html-elements title="HTML
+ elements">HTML element</a>:</p>
<ul class=brief><li><code title=handler-onabort><a href=#handler-onabort>onabort</a></code></li>
<li><code title=handler-onblur><a href=#handler-onblur>onblur</a></code>*</li>
@@ -7655,12 +7656,11 @@ interface <dfn id=htmlunknownelement>HTMLUnknownElement</dfn> : <a href=#htmlele
those elements expose <a href=#event-handler-attributes-0>event handler attributes</a> of the
<code><a href=#window>Window</a></code> object with the same names.</p>
- <hr><p>Also, <a href=#custom-data-attribute title="custom data attribute">custom data
- attributes</a> (e.g. <code title="">data-foldername</code> or
- <code title="">data-msgid</code>) can be specified on any <a href=#html-elements title="HTML elements">HTML element</a>, to store custom data
+ <hr><p><a href=#custom-data-attribute title="custom data attribute">Custom data attributes</a>
+ (e.g. <code title="">data-foldername</code> or <code title="">data-msgid</code>) can be specified on any <a href=#html-elements title="HTML elements">HTML element</a>, to store custom data
specific to the page.</p>
- <p>In <a href=#html-documents>HTML documents</a>, elements in the <a href=#html-namespace-0>HTML
+ <hr><p>In <a href=#html-documents>HTML documents</a>, elements in the <a href=#html-namespace-0>HTML
namespace</a> may have an <code title="">xmlns</code> attribute
specified, if, and only if, it has the exact value
"<code>http://www.w3.org/1999/xhtml</code>". This does not apply to
@@ -7678,6 +7678,11 @@ interface <dfn id=htmlunknownelement>HTMLUnknownElement</dfn> : <a href=#htmlele
actually have an <code title="">xmlns</code> attribute in no
namespace specified.</p>
+ <hr><p>To enable assistive technology products to expose a more
+ fine-grained interface than is otherwise possible with HTML elements
+ and attributes, a set of <a href=#annotations-for-assistive-technology-products>annotations for assistive technology
+ products</a> can be specified.</p>
+
<h5 id=the-id-attribute><span class=secno>3.2.3.1 </span>The <dfn title=attr-id><code>id</code></dfn> attribute</h5>
@@ -8914,6 +8919,293 @@ http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0
+ <h4 id=annotations-for-assistive-technology-products><span class=secno>3.2.6 </span><dfn>Annotations for assistive technology products</dfn></h4>
+
+ <p>Authors may use the ARIA <code title=attr-aria-role>role</code>
+ and <code title=attr-aria-*>aria-*</code> attributes on <a href=#html-elements>HTML
+ elements</a>, in accordance with the requirements described in
+ the ARIA specifications, except where these conflict with the
+ <span>strong native semantics</span> described below. These
+ exceptions are intended to prevent authors from making assistive
+ technology products report nonsensical states that do not represent
+ the actual state of the document. <a href=#refsARIA>[ARIA]</a></p>
+
+ <div class=impl>
+
+ <p>User agents are required to implement ARIA semantics on all
+ <a href=#html-elements>HTML elements</a>, as defined in the ARIA
+ specifications. The <span>implicit ARIA semantics</span> defined
+ below must be recognised by implementations. <a href=#refsARIAIMPL>[ARIAIMPL]</a></p>
+
+ </div>
+
+ <p>The following table defines the <span>strong native
+ semantics</span> <span class=impl>and corresponding <span>implicit
+ ARIA semantics</span></span> that apply to <a href=#html-elements>HTML
+ elements</a>. Each language feature (element or attribute) in a
+ cell in the first column implies the ARIA semantics (role, states,
+ and/or properties) given in the cell in the second column of the
+ same row. Authors must not set the ARIA <code title=attr-aria-role>role</code> and <code title=attr-aria-*>aria-*</code> attributes in a manner that
+ conflicts with the semantics described in the following table. When
+ multiple rows apply to an element, the role from the last row to
+ define a role must be applied, and the states and properties from
+ all the rows must be combined.</p>
+
+ <table><thead><tr><th>Language feature
+ <th>Implied ARIA semantics
+
+ <tbody><tr><td><code><a href=#the-a-element>a</a></code>, <code><a href=#the-area-element>area</a></code>, or <code><a href=#the-link-element>link</a></code> element that represents a <a href=#hyperlink>hyperlink</a>
+ <td><code title=attr-aria-role-link>link</code> role
+
+ <tr><td><code><a href=#the-address-element>address</a></code> element
+ <td><code title=attr-aria-role-contentinfo>contentinfo</code> role
+
+ <tr><td><code><a href=#the-base-element>base</a></code> element
+ <td>No role
+
+ <tr><td><code><a href=#the-button-element>button</a></code> element
+ <td><code title=attr-aria-role-button>button</code> role
+
+ <tr><td><code><a href=#the-datalist-element>datalist</a></code> element
+ <td><code title=attr-aria-role-listbox>listbox</code> role, with the <code title=attr-aria-multiselectable>aria-multiselectable</code> property set to "false"
+
+ <tr><td><code><a href=#the-footer-element>footer</a></code> element
+ <td><code title=attr-aria-role-contentinfo>contentinfo</code> role
+
+ <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
+ <td><code title=attr-aria-role-heading>heading</code> role
+
+ <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
+ <td><code title=attr-aria-role-heading>heading</code> role
+
+ <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
+ <td><code title=attr-aria-role-heading>heading</code> role
+
+ <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
+ <td><code title=attr-aria-role-heading>heading</code> role
+
+ <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
+ <td><code title=attr-aria-role-heading>heading</code> role
+
+ <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
+ <td><code title=attr-aria-role-heading>heading</code> role
+
+ <tr><td><code><a href=#the-head-element>head</a></code> element
+ <td>No role
+
+ <tr><td><code><a href=#the-header-element>header</a></code> element
+ <td><code title=attr-aria-role-banner>banner</code> role
+
+ <tr><td><code><a href=#the-hgroup-element>hgroup</a></code> element
+ <td><code title=attr-aria-role-heading>heading</code> role
+
+ <tr><td><code><a href=#the-hr-element>hr</a></code> element
+ <td><code title=attr-aria-role-separator>separator</code> role
+
+ <tr><td><code><a href=#the-img-element>img</a></code> element whose <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute's value is empty
+ <td><code title=attr-aria-role-presentation>presentation</code> role
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#button-state title=attr-input-type-button>Button</a> state
+ <td><code title=attr-aria-role-button>button</code> role
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state
+ <td><code title=attr-aria-role-checkbox>checkbox</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "mixed" if the element's <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> DOM attribute is true, or "true" if the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> is true, or "false" otherwise
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#color-state title=attr-input-type-color>Color</a> state
+ <td>No role
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#date-state title=attr-input-type-date>Date</a> state
+ <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a> state
+ <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a> state
+ <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#e-mail-state title=attr-input-type-email>E-mail</a> state with no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
+ <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#file-upload-state title=attr-input-type-file>File Upload</a> state
+ <td><code title=attr-aria-role-button>button</code> role
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state
+ <td>No role
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state
+ <td><code title=attr-aria-role-button>button</code> role
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#month-state title=attr-input-type-month>Month</a> state
+ <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#number-state title=attr-input-type-number>Number</a> state
+ <td><code title=attr-aria-role-spinbutton>spinbutton</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute, the <code title=attr-aria-valuemax>aria-valuemax</code> property set to the element's <a href=#concept-input-max title=concept-input-max>maximum</a>, the <code title=attr-aria-valuemin>aria-valuemin</code> property set to the element's <a href=#concept-input-min title=concept-input-min>minimum</a>, and, if the result of applying the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point number values</a> to the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is a number, with the <code title=attr-aria-valuenow>aria-valuenow</code> property set to that number
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#password-state title=attr-input-type-password>Password</a> state
+ <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state
+ <td><code title=attr-aria-role-radio>radio</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "true" if the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> is true, or "false" otherwise
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#range-state title=attr-input-type-range>Range</a> state
+ <td><code title=attr-aria-role-slider>slider</code> role, with the <code title=attr-aria-valuemax>aria-valuemax</code> property set to the element's <a href=#concept-input-max title=concept-input-max>maximum</a>, the <code title=attr-aria-valuemin>aria-valuemin</code> property set to the element's <a href=#concept-input-min title=concept-input-min>minimum</a>, and the <code title=attr-aria-valuenow>aria-valuenow</code> property set to the result of applying the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point number values</a> to the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, if that that results in a number, or the <a href=#concept-input-value-default-range title=concept-input-value-default-range>default value</a> otherwise
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a> state
+ <td><code title=attr-aria-role-button>button</code> role
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#text-state-and-search-state title=attr-input-type-search>Search</a> state with no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
+ <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a> state
+ <td><code title=attr-aria-role-button>button</code> role
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#telephone-state title=attr-input-type-tel>Telephone</a> state with no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
+ <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state with no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
+ <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a>, <a href=#text-state-and-search-state title=attr-input-type-search>Search</a>, <a href=#telephone-state title=attr-input-type-tel>Telephone</a>, <a href=#url-state title=attr-input-type-url>URL</a>, or <a href=#e-mail-state title=attr-input-type-email>E-mail</a> states with a <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
+ <td><code title=attr-aria-role-combobox>combobox</code> role, with the <code title=attr-aria-owns>aria-owns</code> property set to the same value as the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute, and the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#time-state title=attr-input-type-time>Time</a> state
+ <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#url-state title=attr-input-type-url>URL</a> state with no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
+ <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
+
+ <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#week-state title=attr-input-type-week>Week</a> state
+ <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
+
+ <tr><td><code><a href=#menus>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#context-menu-state title="context menu state">context menu</a> state
+ <td>No role
+
+ <tr><td><code><a href=#menus>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
+ <td><code title=attr-aria-role-menu>menu</code> role
+
+ <tr><td><code><a href=#menus>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#tool-bar-state title="tool bar state">tool bar</a> state
+ <td><code title=attr-aria-role-toolbar>toolbar</code> role
+
+ <tr><td><code><a href=#meta>meta</a></code> element
+ <td>No role
+
+ <tr><td><code><a href=#the-nav-element>nav</a></code> element
+ <td><code title=attr-aria-role-navigation>navigation</code> role
+
+ <tr><td><code><a href=#the-option-element>option</a></code> element that is in a <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> or that represents a suggestion in a <code><a href=#the-datalist-element>datalist</a></code> element
+ <td><code title=attr-aria-role-option>option</code> role, with the <code title=attr-aria-selected>aria-selected</code> state set to "true" if the element's <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, or "false" otherwise.
+
+ <tr><td><code><a href=#the-progress-element>progress</a></code> element
+ <td><code title=attr-aria-role-progressbar>progressbar</code> role, with, if the progress bar is determinate, the <code title=attr-aria-valuemax>aria-valuemax</code> property set to the maximum value of the progress bar, the <code title=attr-aria-valuemin>aria-valuemin</code> property set to zero, and the <code title=attr-aria-valuenow>aria-valuenow</code> property set to the current value of the progress bar
+
+ <tr><td><code><a href=#the-select-element>select</a></code> element with a <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute
+ <td><code title=attr-aria-role-listbox>listbox</code> role, with the <code title=attr-aria-multiselectable>aria-multiselectable</code> property set to "true"
+
+ <tr><td><code><a href=#the-select-element>select</a></code> element with no <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute
+ <td><code title=attr-aria-role-listbox>listbox</code> role, with the <code title=attr-aria-multiselectable>aria-multiselectable</code> property set to "false"
+
+ <tr><td><code><a href=#the-style-element>style</a></code> element
+ <td>No role
+
+ <tr><td><code><a href=#the-td-element>td</a></code> element
+ <td><code title=attr-aria-role-gridcell>gridcell</code> role, with the <code title=attr-aria-labelledby>aria-labelledby</code> property set to the value of the <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute, if any
+
+ <tr><td><code><a href=#the-textarea-element>textarea</a></code> element
+ <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=attr-aria-multiline>aria-multiline</code> property set to "true", and the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> attribute
+
+ <tr><td><code><a href=#the-th-element>th</a></code> elemen that is neither a <a href=#column-header>column header</a> nor a <a href=#row-header>row header</a>
+ <td><code title=attr-aria-role-gridcell>gridcell</code> role, with the <code title=attr-aria-labelledby>aria-labelledby</code> property set to the value of the <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute, if any
+
+ <tr><td><code><a href=#the-th-element>th</a></code> element that is a <a href=#column-header>column header</a>
+ <td><code title=attr-aria-role-columnheader>columnheader</code> role, with the <code title=attr-aria-labelledby>aria-labelledby</code> property set to the value of the <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute, if any
+
+ <tr><td><code><a href=#the-th-element>th</a></code> element that is a <a href=#row-header>row header</a>
+ <td><code title=attr-aria-role-rowheader>rowheader</code> role, with the <code title=attr-aria-labelledby>aria-labelledby</code> property set to the value of the <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute, if any
+
+ <tr><td><code><a href=#the-title-element>title</a></code> element
+ <td>No role
+
+ <tr><td><code><a href=#the-tr-element>tr</a></code> element
+ <td><code title=attr-aria-role-row>row</code> role
+
+ <tr><td>An element that <a href=#concept-command title=concept-command>defines a command</a>, whose <a href=#command-facet-type title=command-facet-type>Type</a> facet is "checkbox", and that is a descendant of a <code><a href=#menus>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
+ <td><code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "true" if the command's <a href=#command-facet-checkedstate title=command-facet-checkedstate>Checked State</a> facet is true, and "false" otherwise
+
+ <tr><td>An element that <a href=#concept-command title=concept-command>defines a command</a>, whose <a href=#command-facet-type title=command-facet-type>Type</a> facet is "command", and that is a descendant of a <code><a href=#menus>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
+ <td><code title=attr-aria-role-menuitem>menuitem</code> role
+
+ <tr><td>An element that <a href=#concept-command title=concept-command>defines a command</a>, whose <a href=#command-facet-type title=command-facet-type>Type</a> facet is "radio", and that is a descendant of a <code><a href=#menus>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
+ <td><code title=attr-aria-role-menuitemradio>menuitemradio</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "true" if the command's <a href=#command-facet-checkedstate title=command-facet-checkedstate>Checked State</a> facet is true, and "false" otherwise
+
+ <tr><td>Elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>
+ <td>The <code title=title-aria-disabled>aria-disabled</code> state set to "true"
+
+ <tr><td>Elements that are <a href=#concept-input-required title=concept-input-required>required</a>
+ <td>The <code title=title-aria-required>aria-required</code> state set to "true"
+
+ </table><p>Some <a href=#html-elements>HTML elements</a> have native semantics that can be
+ overridden. The following table lists these elements<span class=impl> and their <span>implicit ARIA semantics</span></span>,
+ along with the restrictions that apply to those elements. Each
+ language feature (element or attribute) in a cell in the first
+ column implies, unless otherwise overriden, the ARIA semantic (role,
+ state, or property) given in the cell in the second column of the
+ same row, but this semantic may be overridden under the conditions
+ listed in the cell in the third column of that row.</p>
+
+ <table><thead><tr><th>Language feature
+ <th>Default implied ARIA semantic
+ <th>Restrictions
+
+ <tbody><tr><td><code><a href=#the-article-element>article</a></code> element
+ <td><code title=attr-aria-role-article>article</code> role
+ <td>Role must be either <code title=attr-aria-role-article>article</code>, <code title=attr-aria-role-document>document</code>, <code title=attr-aria-role-application>application</code>, or <code title=attr-aria-role-main>main</code>
+
+ <tr><td><code><a href=#the-aside-element>aside</a></code> element
+ <td><code title=attr-aria-role-note>note</code> role
+ <td>Role must be either <code title=attr-aria-role-note>note</code>, <code title=attr-aria-role-complementary>complementary</code>, or <code title=attr-aria-role-search>search</code>
+
+ <tr><td><code><a href=#the-div-element>div</a></code> element
+ <td><code title=attr-aria-role-presentation>presentation</code> role
+ <td>No restrictions
+
+ <tr><td><code><a href=#the-html-element>html</a></code> element
+ <td><code title=attr-aria-role-document>document</code> role
+ <td>Role must be either <code title=attr-aria-role-document>document</code> or <code title=attr-aria-role-application>application</code>
+
+ <tr><td><code><a href=#the-li-element>li</a></code> element whose parent is an <code><a href=#the-ol-element>ol</a></code> or <code><a href=#the-ul-element>ul</a></code> element
+ <td><code title=attr-aria-role-listitem>listitem</code> role
+ <td>Role must be either <code title=attr-aria-role-listitem>listitem</code> or <code title=attr-aria-role-treeitem>treeitem</code>
+
+ <tr><td><code><a href=#the-ol-element>ol</a></code> element
+ <td><code title=attr-aria-role-list>list</code> role
+ <td>Role must be either <code title=attr-aria-role-list>list</code>, <code title=attr-aria-role-tree>tree</code>, or <code title=attr-aria-role-directory>directory</code>
+
+ <tr><td><code><a href=#the-output-element>output</a></code> element
+ <td><code title=attr-aria-role-status>status</code> role
+ <td>No restrictions
+
+ <tr><td><code><a href=#the-section-element>section</a></code> element
+ <td><code title=attr-aria-role-region>region</code> role
+ <td>Role must be either <code title=attr-aria-role-region>region</code>, <code title=attr-aria-role-document>document</code>, <code title=attr-aria-role-application>application</code>, <code title=attr-aria-role-contentinfo>contentinfo</code>, <code title=attr-aria-role-main>main</code>, <code title=attr-aria-role-search>search</code>, <code title=attr-aria-role-alert>alert</code>, <code title=attr-aria-role-dialog>dialog</code>, <code title=attr-aria-role-alertdialog>alertdialog</code>, <code title=attr-aria-role-status>status</code>, or <code title=attr-aria-role-log>log</code>
+
+ <tr><td><code><a href=#the-table-element>table</a></code> element
+ <td><code title=attr-aria-role-grid>grid</code> role
+ <td>Role must be either <code title=attr-aria-role-grid>grid</code> or <code title=attr-aria-role-treegrid>treegrid</code>
+
+ <tr><td><code><a href=#the-ul-element>ul</a></code> element
+ <td><code title=attr-aria-role-list>list</code> role
+ <td>Role must be either <code title=attr-aria-role-list>list</code> or <code title=attr-aria-role-tree>tree</code>, or <code title=attr-aria-role-directory>directory</code>
+
+ </table><div class=impl>
+
+ <p>User agents may apply different defaults than those described in
+ this section in order to expose the semantics of <a href=#html-elements>HTML
+ elements</a> in a manner more fine-grained than possible with the
+ above definitions.</p>
+
+ </div>
+
+
<h3 id=apis-in-html-documents><span class=secno>3.3 </span>APIs in HTML documents</h3>
<p>For <a href=#html-documents>HTML documents</a>, and for <a href=#html-elements>HTML
@@ -17584,8 +17876,6 @@ interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href=#htmlelement
of the first such <code><a href=#the-legend-element>legend</a></code> element are the caption
information; abort these steps.</li>
- <!-- aria processing goes here -->
-
<li><p>Run the algorithm to create the <a href=#outline>outline</a> for
the document.</li>
@@ -21980,7 +22270,7 @@ interface <dfn>CueRangeCallback</dfn> {
<dd>A group of related ranges can be given the same class name so
that they can all be removed at the same time.</dd>
- <dt>An identifier<dt>
+ <dt>An identifier</dt>
<dd>A string can be assigned to each cue range for identification
by script. The string need not be unique and can contain any
value.</dd>
@@ -71237,15 +71527,15 @@ time:empty { binding: <i title="">time</i>; }</pre>
<dt><dfn id=isindex-0><code>isindex</code></dfn></dt>
<dd><p>Use an explicit <code><a href=#the-form-element>form</a></code> and <a href=#text-state-and-search-state title=attr-input-type-text>text field</a> combination instead.</dd>
- <dt><dfn id=listing><code>listing</code></dfn><dt>
- <dt><dfn id=xmp><code>xmp</code></dfn><dt>
- </dt></dt></dt><dd><p>Use <code><a href=#the-pre-element>pre</a></code> and <code><a href=#the-code-element>code</a></code> instead.</dd>
+ <dt><dfn id=listing><code>listing</code></dfn></dt>
+ <dt><dfn id=xmp><code>xmp</code></dfn></dt>
+ <dd><p>Use <code><a href=#the-pre-element>pre</a></code> and <code><a href=#the-code-element>code</a></code> instead.</dd>
<dt><dfn id=noembed><code>noembed</code></dfn></dt>
<dd><p>Use <code><a href=#the-object-element>object</a></code> instead of <code><a href=#the-embed-element>embed</a></code> when fallback is necessary.</dd>
- <dt><dfn id=plaintext><code>plaintext</code></dfn><dt>
- </dt><dd><p>Use the "<code>text/plain</code>" <a href=#mime-type>MIME type</a> instead.</dd>
+ <dt><dfn id=plaintext><code>plaintext</code></dfn></dt>
+ <dd><p>Use the "<code>text/plain</code>" <a href=#mime-type>MIME type</a> instead.</dd>
<dt><dfn id=basefont><code>basefont</code></dfn></dt>
<dt><dfn id=big><code>big</code></dfn></dt>
@@ -72952,7 +73242,7 @@ interface <a href=#htmldocument>HTMLDocument</a> {
<tbody><tr><td class=XXX colspan=1> ...
<tr><td> <code title=event-load><a href=#event-load>load</a></code>
<tr><td class=XXX colspan=1> ...
- </table><h2 class=no-num id=references>References</h2>
+ </table><h2 class=no-num id=references>References</h2><!--REFS-->
<p>All references are normative unless marked "Non-normative".</p>
@@ -72973,6 +73263,16 @@ interface <a href=#htmldocument>HTMLDocument</a> {
BNF for Syntax Specifications: ABNF</a></cite>, D. Crocker,
P. Overell. IETF, January 2008.</dd>
+ <dt id=refsARIA>[ARIA]</dt>
+ <dd><cite><a href=http://www.w3.org/WAI/PF/aria/>Accessible Rich
+ Internet Applications (WAI-ARIA)</a></cite>, J. Craig, M. Cooper, L. Pappas,
+ R. Schwerdtfeger, L. Seeman. W3C, August 2009.</dd>
+
+ <dt id=refsARIAIMPL>[ARIAIMPL]</dt>
+ <dd><cite><a href=http://www.w3.org/WAI/PF/aria-implementation/>WAI-ARIA 1.0
+ User Agent Implementation Guide</a></cite>, A. Snow-Weaver,
+ M. Cooper. W3C, August 2009.</dd>
+
<dt id=refsATOM>[ATOM]</dt>
<dd>(Non-normative) <cite><a href=http://www.ietf.org/rfc/rfc4287.txt>The Atom Syndication
Format</a></cite>, M. Nottingham, R. Sayre. IETF, December
View
424 source
@@ -7703,9 +7703,11 @@ interface <dfn>HTMLUnknownElement</dfn> : <span>HTMLElement</span> { };</pre>
<li><code title="attr-title">title</code></li>
</ul>
- <p>In addition, unless otherwise specified, the following
- <span>event handler content attributes</span> may be specified on
- any <span title="HTML elements">HTML element</span>:</p>
+ <hr>
+
+ <p>Unless otherwise specified, the following <span>event handler
+ content attributes</span> may be specified on any <span title="HTML
+ elements">HTML element</span>:</p>
<ul class="brief">
<li><code title="handler-onabort">onabort</code></li>
@@ -7771,12 +7773,14 @@ interface <dfn>HTMLUnknownElement</dfn> : <span>HTMLElement</span> { };</pre>
<hr>
- <p>Also, <span title="custom data attribute">custom data
- attributes</span> (e.g. <code title="">data-foldername</code> or
- <code title="">data-msgid</code>) can be specified on any <span
+ <p><span title="custom data attribute">Custom data attributes</span>
+ (e.g. <code title="">data-foldername</code> or <code
+ title="">data-msgid</code>) can be specified on any <span
title="HTML elements">HTML element</span>, to store custom data
specific to the page.</p>
+ <hr>
+
<p>In <span>HTML documents</span>, elements in the <span>HTML
namespace</span> may have an <code title="">xmlns</code> attribute
specified, if, and only if, it has the exact value
@@ -7795,6 +7799,13 @@ interface <dfn>HTMLUnknownElement</dfn> : <span>HTMLElement</span> { };</pre>
actually have an <code title="">xmlns</code> attribute in no
namespace specified.</p>
+ <hr>
+
+ <p>To enable assistive technology products to expose a more
+ fine-grained interface than is otherwise possible with HTML elements
+ and attributes, a set of <span>annotations for assistive technology
+ products</span> can be specified.</p>
+
<h5>The <dfn title="attr-id"><code>id</code></dfn> attribute</h5>
@@ -9169,6 +9180,384 @@ http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0
+ <h4><dfn>Annotations for assistive technology products</dfn></h4>
+
+ <p>Authors may use the ARIA <code title="attr-aria-role">role</code>
+ and <code title="attr-aria-*">aria-*</code> attributes on <span>HTML
+ elements</span>, in accordance with the requirements described in
+ the ARIA specifications, except where these conflict with the
+ <span>strong native semantics</span> described below. These
+ exceptions are intended to prevent authors from making assistive
+ technology products report nonsensical states that do not represent
+ the actual state of the document. <a href="#refsARIA">[ARIA]</a></p>
+
+ <div class="impl">
+
+ <p>User agents are required to implement ARIA semantics on all
+ <span>HTML elements</span>, as defined in the ARIA
+ specifications. The <span>implicit ARIA semantics</span> defined
+ below must be recognised by implementations. <a
+ href="#refsARIAIMPL">[ARIAIMPL]</a></p>
+
+ </div>
+
+ <p>The following table defines the <span>strong native
+ semantics</span> <span class="impl">and corresponding <span>implicit
+ ARIA semantics</span></span> that apply to <span>HTML
+ elements</span>. Each language feature (element or attribute) in a
+ cell in the first column implies the ARIA semantics (role, states,
+ and/or properties) given in the cell in the second column of the
+ same row. Authors must not set the ARIA <code
+ title="attr-aria-role">role</code> and <code
+ title="attr-aria-*">aria-*</code> attributes in a manner that
+ conflicts with the semantics described in the following table. When
+ multiple rows apply to an element, the role from the last row to
+ define a role must be applied, and the states and properties from
+ all the rows must be combined.</p>
+
+ <table>
+ <thead>
+ <tr>
+ <th>Language feature
+ <th>Implied ARIA semantics
+
+ <tbody>
+
+ <tr>
+ <td><code>a</code>, <code>area</code>, or <code>link</code> element that represents a <span>hyperlink</span>
+ <td><code title="attr-aria-role-link">link</code> role
+
+ <tr>
+ <td><code>address</code> element
+ <td><code title="attr-aria-role-contentinfo">contentinfo</code> role
+
+ <tr>
+ <td><code>base</code> element
+ <td>No role
+
+ <tr>
+ <td><code>button</code> element
+ <td><code title="attr-aria-role-button">button</code> role
+
+ <tr>
+ <td><code>datalist</code> element
+ <td><code title="attr-aria-role-listbox">listbox</code> role, with the <code title="attr-aria-multiselectable">aria-multiselectable</code> property set to "false"
+
+ <tr>
+ <td><code>footer</code> element
+ <td><code title="attr-aria-role-contentinfo">contentinfo</code> role
+
+ <tr>
+ <td><code>h1</code> element that does not have an <code>hgroup</code> ancestor
+ <td><code title="attr-aria-role-heading">heading</code> role
+
+ <tr>
+ <td><code>h2</code> element that does not have an <code>hgroup</code> ancestor
+ <td><code title="attr-aria-role-heading">heading</code> role
+
+ <tr>
+ <td><code>h3</code> element that does not have an <code>hgroup</code> ancestor
+ <td><code title="attr-aria-role-heading">heading</code> role
+
+ <tr>
+ <td><code>h4</code> element that does not have an <code>hgroup</code> ancestor
+ <td><code title="attr-aria-role-heading">heading</code> role
+
+ <tr>
+ <td><code>h5</code> element that does not have an <code>hgroup</code> ancestor
+ <td><code title="attr-aria-role-heading">heading</code> role
+
+ <tr>
+ <td><code>h6</code> element that does not have an <code>hgroup</code> ancestor
+ <td><code title="attr-aria-role-heading">heading</code> role
+
+ <tr>
+ <td><code>head</code> element
+ <td>No role
+
+ <tr>
+ <td><code>header</code> element
+ <td><code title="attr-aria-role-banner">banner</code> role
+
+ <tr>
+ <td><code>hgroup</code> element
+ <td><code title="attr-aria-role-heading">heading</code> role
+
+ <tr>
+ <td><code>hr</code> element
+ <td><code title="attr-aria-role-separator">separator</code> role
+
+ <tr>
+ <td><code>img</code> element whose <code title="attr-img-alt">alt</code> attribute's value is empty
+ <td><code title="attr-aria-role-presentation">presentation</code> role
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-button">Button</span> state
+ <td><code title="attr-aria-role-button">button</code> role
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-checkbox">Checkbox</span> state
+ <td><code title="attr-aria-role-checkbox">checkbox</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "mixed" if the element's <code title="dom-input-indeterminate">indeterminate</code> DOM attribute is true, or "true" if the element's <span title="concept-fe-checked">checkedness</span> is true, or "false" otherwise
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-color">Color</span> state
+ <td>No role
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-date">Date</span> state
+ <td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly">readonly</code> attribute
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-datetime">Date and Time</span> state
+ <td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly">readonly</code> attribute
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-datetime-local">Local Date and Time</span> state
+ <td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly">readonly</code> attribute
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-email">E-mail</span> state with no <span title="concept-input-list">suggestions source element</span>
+ <td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly">readonly</code> attribute
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-file">File Upload</span> state
+ <td><code title="attr-aria-role-button">button</code> role
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-hidden">Hidden</span> state
+ <td>No role
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-image">Image Button</span> state
+ <td><code title="attr-aria-role-button">button</code> role
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-month">Month</span> state
+ <td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly">readonly</code> attribute
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-number">Number</span> state
+ <td><code title="attr-aria-role-spinbutton">spinbutton</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly">readonly</code> attribute, the <code title="attr-aria-valuemax">aria-valuemax</code> property set to the element's <span title="concept-input-max">maximum</span>, the <code title="attr-aria-valuemin">aria-valuemin</code> property set to the element's <span title="concept-input-min">minimum</span>, and, if the result of applying the <span>rules for parsing floating point number values</span> to the element's <span title="concept-fe-value">value</span> is a number, with the <code title="attr-aria-valuenow">aria-valuenow</code> property set to that number
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-password">Password</span> state
+ <td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly">readonly</code> attribute
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-radio">Radio Button</span> state
+ <td><code title="attr-aria-role-radio">radio</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "true" if the element's <span title="concept-fe-checked">checkedness</span> is true, or "false" otherwise
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-range">Range</span> state
+ <td><code title="attr-aria-role-slider">slider</code> role, with the <code title="attr-aria-valuemax">aria-valuemax</code> property set to the element's <span title="concept-input-max">maximum</span>, the <code title="attr-aria-valuemin">aria-valuemin</code> property set to the element's <span title="concept-input-min">minimum</span>, and the <code title="attr-aria-valuenow">aria-valuenow</code> property set to the result of applying the <span>rules for parsing floating point number values</span> to the element's <span title="concept-fe-value">value</span>, if that that results in a number, or the <span title="concept-input-value-default-range">default value</span> otherwise
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-reset">Reset Button</span> state
+ <td><code title="attr-aria-role-button">button</code> role
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-search">Search</span> state with no <span title="concept-input-list">suggestions source element</span>
+ <td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly">readonly</code> attribute
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-submit">Submit Button</span> state
+ <td><code title="attr-aria-role-button">button</code> role
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-tel">Telephone</span> state with no <span title="concept-input-list">suggestions source element</span>
+ <td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly">readonly</code> attribute
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-text">Text</span> state with no <span title="concept-input-list">suggestions source element</span>
+ <td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly">readonly</code> attribute
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-text">Text</span>, <span title="attr-input-type-search">Search</span>, <span title="attr-input-type-tel">Telephone</span>, <span title="attr-input-type-url">URL</span>, or <span title="attr-input-type-email">E-mail</span> states with a <span title="concept-input-list">suggestions source element</span>
+ <td><code title="attr-aria-role-combobox">combobox</code> role, with the <code title="attr-aria-owns">aria-owns</code> property set to the same value as the <code title="attr-input-list">list</code> attribute, and the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly">readonly</code> attribute
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-time">Time</span> state
+ <td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly">readonly</code> attribute
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-url">URL</span> state with no <span title="concept-input-list">suggestions source element</span>
+ <td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly">readonly</code> attribute
+
+ <tr>
+ <td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-week">Week</span> state
+ <td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly">readonly</code> attribute
+
+ <tr>
+ <td><code>menu</code> element with a <code title="attr-menu-type">type</code> attribute in the <span title="context menu state">context menu</span> state
+ <td>No role
+
+ <tr>
+ <td><code>menu</code> element with a <code title="attr-menu-type">type</code> attribute in the <span title="list state">list</span> state
+ <td><code title="attr-aria-role-menu">menu</code> role
+
+ <tr>
+ <td><code>menu</code> element with a <code title="attr-menu-type">type</code> attribute in the <span title="tool bar state">tool bar</span> state
+ <td><code title="attr-aria-role-toolbar">toolbar</code> role
+
+ <tr>
+ <td><code>meta</code> element
+ <td>No role
+
+ <tr>
+ <td><code>nav</code> element
+ <td><code title="attr-aria-role-navigation">navigation</code> role
+
+ <tr>
+ <td><code>option</code> element that is in a <span title="concept-select-option-list">list of options</span> or that represents a suggestion in a <code>datalist</code> element
+ <td><code title="attr-aria-role-option">option</code> role, with the <code title="attr-aria-selected">aria-selected</code> state set to "true" if the element's <span title="concept-option-selectedness">selectedness</span> is true, or "false" otherwise.
+
+ <tr>
+ <td><code>progress</code> element
+ <td><code title="attr-aria-role-progressbar">progressbar</code> role, with, if the progress bar is determinate, the <code title="attr-aria-valuemax">aria-valuemax</code> property set to the maximum value of the progress bar, the <code title="attr-aria-valuemin">aria-valuemin</code> property set to zero, and the <code title="attr-aria-valuenow">aria-valuenow</code> property set to the current value of the progress bar
+
+ <tr>
+ <td><code>select</code> element with a <code title="attr-select-multiple">multiple</code> attribute
+ <td><code title="attr-aria-role-listbox">listbox</code> role, with the <code title="attr-aria-multiselectable">aria-multiselectable</code> property set to "true"
+
+ <tr>
+ <td><code>select</code> element with no <code title="attr-select-multiple">multiple</code> attribute
+ <td><code title="attr-aria-role-listbox">listbox</code> role, with the <code title="attr-aria-multiselectable">aria-multiselectable</code> property set to "false"
+
+ <tr>
+ <td><code>style</code> element
+ <td>No role
+
+ <tr>
+ <td><code>td</code> element
+ <td><code title="attr-aria-role-gridcell">gridcell</code> role, with the <code title="attr-aria-labelledby">aria-labelledby</code> property set to the value of the <code title="attr-tdth-headers">headers</code> attribute, if any
+
+ <tr>
+ <td><code>textarea</code> element
+ <td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="attr-aria-multiline">aria-multiline</code> property set to "true", and the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-textarea-readonly">readonly</code> attribute
+
+ <tr>
+ <td><code>th</code> elemen that is neither a <span>column header</span> nor a <span>row header</span>
+ <td><code title="attr-aria-role-gridcell">gridcell</code> role, with the <code title="attr-aria-labelledby">aria-labelledby</code> property set to the value of the <code title="attr-tdth-headers">headers</code> attribute, if any
+
+ <tr>
+ <td><code>th</code> element that is a <span>column header</span>
+ <td><code title="attr-aria-role-columnheader">columnheader</code> role, with the <code title="attr-aria-labelledby">aria-labelledby</code> property set to the value of the <code title="attr-tdth-headers">headers</code> attribute, if any
+
+ <tr>
+ <td><code>th</code> element that is a <span>row header</span>
+ <td><code title="attr-aria-role-rowheader">rowheader</code> role, with the <code title="attr-aria-labelledby">aria-labelledby</code> property set to the value of the <code title="attr-tdth-headers">headers</code> attribute, if any
+
+ <tr>
+ <td><code>title</code> element
+ <td>No role
+
+ <tr>
+ <td><code>tr</code> element
+ <td><code title="attr-aria-role-row">row</code> role
+
+ <tr>
+ <td>An element that <span title="concept-command">defines a command</span>, whose <span title="command-facet-type">Type</span> facet is "checkbox", and that is a descendant of a <code>menu</code> element whose <code title="attr-menu-type">type</code> attribute in the <span title="list state">list</span> state
+ <td><code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "true" if the command's <span title="command-facet-checkedstate">Checked State</span> facet is true, and "false" otherwise
+
+ <tr>
+ <td>An element that <span title="concept-command">defines a command</span>, whose <span title="command-facet-type">Type</span> facet is "command", and that is a descendant of a <code>menu</code> element whose <code title="attr-menu-type">type</code> attribute in the <span title="list state">list</span> state
+ <td><code title="attr-aria-role-menuitem">menuitem</code> role
+
+ <tr>
+ <td>An element that <span title="concept-command">defines a command</span>, whose <span title="command-facet-type">Type</span> facet is "radio", and that is a descendant of a <code>menu</code> element whose <code title="attr-menu-type">type</code> attribute in the <span title="list state">list</span> state
+ <td><code title="attr-aria-role-menuitemradio">menuitemradio</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "true" if the command's <span title="command-facet-checkedstate">Checked State</span> facet is true, and "false" otherwise
+
+ <tr>
+ <td>Elements that are <span title="concept-fe-disabled">disabled</span>
+ <td>The <code title="title-aria-disabled">aria-disabled</code> state set to "true"
+
+ <tr>
+ <td>Elements that are <span title="concept-input-required">required</span>
+ <td>The <code title="title-aria-required">aria-required</code> state set to "true"
+
+ </table>
+
+ <p>Some <span>HTML elements</span> have native semantics that can be
+ overridden. The following table lists these elements<span
+ class="impl"> and their <span>implicit ARIA semantics</span></span>,
+ along with the restrictions that apply to those elements. Each
+ language feature (element or attribute) in a cell in the first
+ column implies, unless otherwise overriden, the ARIA semantic (role,
+ state, or property) given in the cell in the second column of the
+ same row, but this semantic may be overridden under the conditions
+ listed in the cell in the third column of that row.</p>
+
+ <table>
+ <thead>
+ <tr>
+ <th>Language feature
+ <th>Default implied ARIA semantic
+ <th>Restrictions
+
+ <tbody>
+
+ <tr>
+ <td><code>article</code> element
+ <td><code title="attr-aria-role-article">article</code> role
+ <td>Role must be either <code title="attr-aria-role-article">article</code>, <code title="attr-aria-role-document">document</code>, <code title="attr-aria-role-application">application</code>, or <code title="attr-aria-role-main">main</code>
+
+ <tr>
+ <td><code>aside</code> element
+ <td><code title="attr-aria-role-note">note</code> role
+ <td>Role must be either <code title="attr-aria-role-note">note</code>, <code title="attr-aria-role-complementary">complementary</code>, or <code title="attr-aria-role-search">search</code>
+
+ <tr>
+ <td><code>div</code> element
+ <td><code title="attr-aria-role-presentation">presentation</code> role
+ <td>No restrictions
+
+ <tr>
+ <td><code>html</code> element
+ <td><code title="attr-aria-role-document">document</code> role
+ <td>Role must be either <code title="attr-aria-role-document">document</code> or <code title="attr-aria-role-application">application</code>
+
+ <tr>
+ <td><code>li</code> element whose parent is an <code>ol</code> or <code>ul</code> element
+ <td><code title="attr-aria-role-listitem">listitem</code> role
+ <td>Role must be either <code title="attr-aria-role-listitem">listitem</code> or <code title="attr-aria-role-treeitem">treeitem</code>
+
+ <tr>
+ <td><code>ol</code> element
+ <td><code title="attr-aria-role-list">list</code> role
+ <td>Role must be either <code title="attr-aria-role-list">list</code>, <code title="attr-aria-role-tree">tree</code>, or <code title="attr-aria-role-directory">directory</code>
+
+ <tr>
+ <td><code>output</code> element
+ <td><code title="attr-aria-role-status">status</code> role
+ <td>No restrictions
+
+ <tr>
+ <td><code>section</code> element
+ <td><code title="attr-aria-role-region">region</code> role
+ <td>Role must be either <code title="attr-aria-role-region">region</code>, <code title="attr-aria-role-document">document</code>, <code title="attr-aria-role-application">application</code>, <code title="attr-aria-role-contentinfo">contentinfo</code>, <code title="attr-aria-role-main">main</code>, <code title="attr-aria-role-search">search</code>, <code title="attr-aria-role-alert">alert</code>, <code title="attr-aria-role-dialog">dialog</code>, <code title="attr-aria-role-alertdialog">alertdialog</code>, <code title="attr-aria-role-status">status</code>, or <code title="attr-aria-role-log">log</code>
+
+ <tr>
+ <td><code>table</code> element
+ <td><code title="attr-aria-role-grid">grid</code> role
+ <td>Role must be either <code title="attr-aria-role-grid">grid</code> or <code title="attr-aria-role-treegrid">treegrid</code>
+
+ <tr>
+ <td><code>ul</code> element
+ <td><code title="attr-aria-role-list">list</code> role
+ <td>Role must be either <code title="attr-aria-role-list">list</code> or <code title="attr-aria-role-tree">tree</code>, or <code title="attr-aria-role-directory">directory</code>
+
+ </table>
+
+ <div class="impl">
+
+ <p>User agents may apply different defaults than those described in
+ this section in order to expose the semantics of <span>HTML
+ elements</span> in a manner more fine-grained than possible with the
+ above definitions.</p>
+
+ </div>
+
+
<h3>APIs in HTML documents</h3>
<p>For <span>HTML documents</span>, and for <span>HTML
@@ -18824,8 +19213,6 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
of the first such <code>legend</code> element are the caption
information; abort these steps.</p></li>
- <!-- aria processing goes here -->
-
<li><p>Run the algorithm to create the <span>outline</span> for
the document.</p></li>
@@ -23797,7 +24184,7 @@ interface <dfn>CueRangeCallback</dfn> {
<dd>A group of related ranges can be given the same class name so
that they can all be removed at the same time.</dd>
- <dt>An identifier<dt>
+ <dt>An identifier</dt>
<dd>A string can be assigned to each cue range for identification
by script. The string need not be unique and can contain any
value.</dd>
@@ -84568,14 +84955,14 @@ time:empty { binding: <i title="">time</i>; }</pre>
<dt><dfn><code>isindex</code></dfn></dt>
<dd><p>Use an explicit <code>form</code> and <span title="attr-input-type-text">text field</span> combination instead.</p></dd>
- <dt><dfn><code>listing</code></dfn><dt>
- <dt><dfn><code>xmp</code></dfn><dt>
+ <dt><dfn><code>listing</code></dfn></dt>
+ <dt><dfn><code>xmp</code></dfn></dt>
<dd><p>Use <code>pre</code> and <code>code</code> instead.</p></dd>
<dt><dfn><code>noembed</code></dfn></dt>
<dd><p>Use <code>object</code> instead of <code>embed</code> when fallback is necessary.</p></dd>
- <dt><dfn><code>plaintext</code></dfn><dt>
+ <dt><dfn><code>plaintext</code></dfn></dt>
<dd><p>Use the "<code>text/plain</code>" <span>MIME type</span> instead.</p></dd>
<dt><dfn><code>basefont</code></dfn></dt>
@@ -86660,7 +87047,7 @@ interface <span>HTMLDocument</span> {
<!--START websocket-api--><!--START storage--><!--START database--><!--START eventsource--><!--START workers-->
- <h2 class="no-num" id="references">References</h2>
+ <h2 class="no-num" id="references">References</h2><!--REFS-->
<p>All references are normative unless marked "Non-normative".</p>
@@ -86684,6 +87071,17 @@ interface <span>HTMLDocument</span> {
BNF for Syntax Specifications: ABNF</a></cite>, D. Crocker,
P. Overell. IETF, January 2008.</dd>
+ <dt id="refsARIA">[ARIA]</dt>
+ <dd><cite><a href="http://www.w3.org/WAI/PF/aria/">Accessible Rich
+ Internet Applications (WAI-ARIA)</a></cite>, J. Craig, M. Cooper, L. Pappas,
+ R. Schwerdtfeger, L. Seeman. W3C, August 2009.</dd>
+
+ <dt id="refsARIAIMPL">[ARIAIMPL]</dt>
+ <dd><cite><a
+ href="http://www.w3.org/WAI/PF/aria-implementation/">WAI-ARIA 1.0
+ User Agent Implementation Guide</a></cite>, A. Snow-Weaver,
+ M. Cooper. W3C, August 2009.</dd>
+
<dt id="refsATOM">[ATOM]</dt>
<dd>(Non-normative) <cite><a
href="http://www.ietf.org/rfc/rfc4287.txt">The Atom Syndication

0 comments on commit 36653f4

Please sign in to comment.