Skip to content
Permalink
Browse files

[giow] (2) Some ARIA role additions for authoring flexibility

Affected topics: HTML

git-svn-id: http://svn.whatwg.org/webapps@8412 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
Hixie committed Jan 21, 2014
1 parent 1496ce6 commit 2d4b7caf77ff43e63f7e900adc9cd978e568fe56
Showing with 153 additions and 20 deletions.
  1. +47 −5 complete.html
  2. +47 −5 index
  3. +59 −10 source
<td><a href=#concept-role-none title=concept-role-none>No role</a>

<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
options</a>

<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.
<td><code title=attr-aria-selected>aria-selected</code> and <code title=attr-aria-checked>aria-checked</code> states set to "true" if the element's <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, and "false" otherwise

<!-- we set -selected for when the role is option, and -checked for when it's menuitemradio;
hopefully having them set when they don't apply is a no-op (the ARIA spec doesn't seem clear
about this) -->

<tr><td><code><a href=#the-option-element>option</a></code> element that represents a suggestion in a <code><a href=#the-datalist-element>datalist</a></code> element
or that is in a <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> of a
<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 or a <a href=#concept-select-size title=concept-select-size>display size</a> greater than 1

<td><code title=attr-aria-role-option>option</code> role

<tr><td><code><a href=#the-param-element>param</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 "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
<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 and with a <a href=#concept-select-size title=concept-select-size>display size</a> equal to 1

<td><code title=attr-aria-multiselectable>aria-multiselectable</code> property set to "false"

<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 and with a <a href=#concept-select-size title=concept-select-size>display size</a> greater than 1

<td><code title=attr-aria-role-listbox>listbox</code> role, with the <code title=attr-aria-multiselectable>aria-multiselectable</code> property set to "false"


<td><code title=attr-aria-role-listitem>listitem</code> role

<td>Role must be either <code title=attr-aria-role-listitem>listitem</code>, <code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code>, <code title=attr-aria-role-menuitemradio>menuitemradio</code>, <code title=attr-aria-role-option>option</code>, <code title=attr-aria-role-tab>tab</code>, or
<code title=attr-aria-role-treeitem>treeitem</code>
<td>Role must be either
<code title=attr-aria-role-listitem>listitem</code>,
<code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code>,
<code title=attr-aria-role-menuitemradio>menuitemradio</code>,
<code title=attr-aria-role-option>option</code>,
<code title=attr-aria-role-tab>tab</code>, or
<code title=attr-aria-role-treeitem>treeitem</code>

<tr><td><code><a href=#the-main-element>main</a></code> element

<code title=attr-aria-role-toolbar>toolbar</code>, or
<code title=attr-aria-role-tree>tree</code>

<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> of a <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 and with a <a href=#concept-select-size title=concept-select-size>display size</a> equal to 1

<td><code title=attr-aria-role-option>option</code> role

<td>Role must be either
<code title=attr-aria-role-option>option</code>,
<code title=attr-aria-role-menuitem>menuitem</code>,
<code title=attr-aria-role-menuitemradio>menuitemradio</code>, or
<code title=attr-aria-role-separator>separator</code>

<tr><td><code><a href=#the-output-element>output</a></code> element

<td><code title=attr-aria-role-status>status</code> role
<code title=attr-aria-role-search>search</code>, or
<code title=attr-aria-role-status>status</code>

<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 and with a <a href=#concept-select-size title=concept-select-size>display size</a> equal to 1

<td><code title=attr-aria-role-listbox>listbox</code> role

<td>Role must be either
<code title=attr-aria-role-listbox>listbox</code> or
<code title=attr-aria-role-menu>menu</code>

<tr><td><code><a href=#the-ul-element>ul</a></code> element

<td><code title=attr-aria-role-list>list</code> role
52 index
<td><a href=#concept-role-none title=concept-role-none>No role</a>

<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
options</a>

<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.
<td><code title=attr-aria-selected>aria-selected</code> and <code title=attr-aria-checked>aria-checked</code> states set to "true" if the element's <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, and "false" otherwise

<!-- we set -selected for when the role is option, and -checked for when it's menuitemradio;
hopefully having them set when they don't apply is a no-op (the ARIA spec doesn't seem clear
about this) -->

<tr><td><code><a href=#the-option-element>option</a></code> element that represents a suggestion in a <code><a href=#the-datalist-element>datalist</a></code> element
or that is in a <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> of a
<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 or a <a href=#concept-select-size title=concept-select-size>display size</a> greater than 1

<td><code title=attr-aria-role-option>option</code> role

<tr><td><code><a href=#the-param-element>param</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 "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
<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 and with a <a href=#concept-select-size title=concept-select-size>display size</a> equal to 1

<td><code title=attr-aria-multiselectable>aria-multiselectable</code> property set to "false"

<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 and with a <a href=#concept-select-size title=concept-select-size>display size</a> greater than 1

<td><code title=attr-aria-role-listbox>listbox</code> role, with the <code title=attr-aria-multiselectable>aria-multiselectable</code> property set to "false"


<td><code title=attr-aria-role-listitem>listitem</code> role

<td>Role must be either <code title=attr-aria-role-listitem>listitem</code>, <code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code>, <code title=attr-aria-role-menuitemradio>menuitemradio</code>, <code title=attr-aria-role-option>option</code>, <code title=attr-aria-role-tab>tab</code>, or
<code title=attr-aria-role-treeitem>treeitem</code>
<td>Role must be either
<code title=attr-aria-role-listitem>listitem</code>,
<code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code>,
<code title=attr-aria-role-menuitemradio>menuitemradio</code>,
<code title=attr-aria-role-option>option</code>,
<code title=attr-aria-role-tab>tab</code>, or
<code title=attr-aria-role-treeitem>treeitem</code>

<tr><td><code><a href=#the-main-element>main</a></code> element

<code title=attr-aria-role-toolbar>toolbar</code>, or
<code title=attr-aria-role-tree>tree</code>

<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> of a <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 and with a <a href=#concept-select-size title=concept-select-size>display size</a> equal to 1

<td><code title=attr-aria-role-option>option</code> role

<td>Role must be either
<code title=attr-aria-role-option>option</code>,
<code title=attr-aria-role-menuitem>menuitem</code>,
<code title=attr-aria-role-menuitemradio>menuitemradio</code>, or
<code title=attr-aria-role-separator>separator</code>

<tr><td><code><a href=#the-output-element>output</a></code> element

<td><code title=attr-aria-role-status>status</code> role
<code title=attr-aria-role-search>search</code>, or
<code title=attr-aria-role-status>status</code>

<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 and with a <a href=#concept-select-size title=concept-select-size>display size</a> equal to 1

<td><code title=attr-aria-role-listbox>listbox</code> role

<td>Role must be either
<code title=attr-aria-role-listbox>listbox</code> or
<code title=attr-aria-role-menu>menu</code>

<tr><td><code><a href=#the-ul-element>ul</a></code> element

<td><code title=attr-aria-role-list>list</code> role
69 source
<tr>

<td><code>option</code> element that is in a <span data-x="concept-select-option-list">list of
options</span> or that represents a suggestion in a <code>datalist</code> element
options</span>

<td><code data-x="attr-aria-role-option">option</code> role, with the <code
data-x="attr-aria-selected">aria-selected</code> state set to "true" if the element's <span
data-x="concept-option-selectedness">selectedness</span> is true, or "false" otherwise.
<td><code data-x="attr-aria-selected">aria-selected</code> and <code
data-x="attr-aria-checked">aria-checked</code> states set to "true" if the element's <span
data-x="concept-option-selectedness">selectedness</span> is true, and "false" otherwise

<!-- we set -selected for when the role is option, and -checked for when it's menuitemradio;
hopefully having them set when they don't apply is a no-op (the ARIA spec doesn't seem clear
about this) -->

<tr>

<td><code>option</code> element that represents a suggestion in a <code>datalist</code> element
or that is in a <span data-x="concept-select-option-list">list of options</span> of a
<code>select</code> element with a <code data-x="attr-select-multiple">multiple</code>
attribute or a <span data-x="concept-select-size">display size</span> greater than 1

<td><code data-x="attr-aria-role-option">option</code> role

<tr>


<tr>

<td><code>select</code> element with no <code data-x="attr-select-multiple">multiple</code> attribute
<td><code>select</code> element with no <code data-x="attr-select-multiple">multiple</code>
attribute and with a <span data-x="concept-select-size">display size</span> equal to 1

<td><code data-x="attr-aria-multiselectable">aria-multiselectable</code> property set to "false"

<tr>

<td><code>select</code> element with no <code data-x="attr-select-multiple">multiple</code>
attribute and with a <span data-x="concept-select-size">display size</span> greater than 1

<td><code data-x="attr-aria-role-listbox">listbox</code> role, with the <code
data-x="attr-aria-multiselectable">aria-multiselectable</code> property set to "false"

<td><code data-x="attr-aria-role-listitem">listitem</code> role

<td>Role must be either <code data-x="attr-aria-role-listitem">listitem</code>, <code
data-x="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code>, <code
data-x="attr-aria-role-menuitemradio">menuitemradio</code>, <code
data-x="attr-aria-role-option">option</code>, <code data-x="attr-aria-role-tab">tab</code>, or
<code data-x="attr-aria-role-treeitem">treeitem</code>
<td>Role must be either
<code data-x="attr-aria-role-listitem">listitem</code>,
<code data-x="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code>,
<code data-x="attr-aria-role-menuitemradio">menuitemradio</code>,
<code data-x="attr-aria-role-option">option</code>,
<code data-x="attr-aria-role-tab">tab</code>, or
<code data-x="attr-aria-role-treeitem">treeitem</code>

<tr>

<code data-x="attr-aria-role-toolbar">toolbar</code>, or
<code data-x="attr-aria-role-tree">tree</code>

<tr>

<td><code>option</code> element that is in a <span data-x="concept-select-option-list">list of
options</span> of a <code>select</code> element with no <code
data-x="attr-select-multiple">multiple</code> attribute and with a <span
data-x="concept-select-size">display size</span> equal to 1

<td><code data-x="attr-aria-role-option">option</code> role

<td>Role must be either
<code data-x="attr-aria-role-option">option</code>,
<code data-x="attr-aria-role-menuitem">menuitem</code>,
<code data-x="attr-aria-role-menuitemradio">menuitemradio</code>, or
<code data-x="attr-aria-role-separator">separator</code>

<tr>

<td><code>output</code> element
<code data-x="attr-aria-role-search">search</code>, or
<code data-x="attr-aria-role-status">status</code>

<tr>

<td><code>select</code> element with no <code data-x="attr-select-multiple">multiple</code>
attribute and with a <span data-x="concept-select-size">display size</span> equal to 1

<td><code data-x="attr-aria-role-listbox">listbox</code> role

<td>Role must be either
<code data-x="attr-aria-role-listbox">listbox</code> or
<code data-x="attr-aria-role-menu">menu</code>

<tr>

<td><code>ul</code> element

0 comments on commit 2d4b7ca

Please sign in to comment.
You can’t perform that action at this time.