Skip to content

Commit 93d3476

Browse files
scottaoharascottaohara
authored
Update button and input button allowances (#446)
* Update button and input button type allowances closes #444 closes #395 closes #298 This PR makes the allowances for button-elements (button, input type=button|image|submit|reset) more consistent with each other. Additionally, slider and gridcell are now listed under the allowed roles for these elements. the LOE to properly create the necessary UX for some of these roles when specified, especially on the `input` type buttons, is rather large _but_ possible. Any failures to not implement these properly would be caught by other WCAG rules and likely other automated checks. * add missing slider allowance for input type=image * add changelog
1 parent 51dd212 commit 93d3476

File tree

2 files changed

+94
-34
lines changed

2 files changed

+94
-34
lines changed

‎index.html

Lines changed: 92 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,14 @@
6464
the following substantive additions and/or corrections have been proposed:
6565
</p>
6666
<ul>
67+
<li>
68+
<a href="https://github.com/w3c/html-aria/pull/469">5 July 2023 - Addition:</a>
69+
Update the <a href="#el-button">`button`</a>, <a href="#el-input-button">`input type=button`</a>, <a href="#el-input-image">`input type=image`</a>
70+
<a href="#el-input-reset">`input type=reset`</a>, and <a href="#el-input-submit">`input type=submit`</a> elements to align their allowed roles.
71+
</li>
6772
<li>
6873
<a href="https://github.com/w3c/html-aria/pull/469">29 June 2023 - Addition:</a>
69-
Update the <a href="#s">`s`</a> element allowed roles to indicate use of `role=deletion` on the element would be considered redundnat.
74+
Update the <a href="#el-s">`s`</a> element allowed roles to indicate use of `role=deletion` on the element would be considered redundnat.
7075
</li>
7176
<li>
7277
<a href="https://github.com/w3c/html-aria/pull/435">31 May 2023 - Correction:</a>
@@ -862,14 +867,18 @@ <h2 id="docconformance">
862867
Roles:
863868
<a href="#index-aria-checkbox">`checkbox`</a>,
864869
<span class="addition"><a href="#index-aria-combobox">`combobox`</a></span>,
870+
<span class="proposed addition"><a href="#index-aria-gridcell">`gridcell`</a></span>,
865871
<a href="#index-aria-link">`link`</a>,
866872
<a href="#index-aria-menuitem">`menuitem`</a>,
867873
<a href="#index-aria-menuitemcheckbox">`menuitemcheckbox`</a>,
868874
<a href="#index-aria-menuitemradio">`menuitemradio`</a>,
869875
<a href="#index-aria-option">`option`</a>,
870876
<a href="#index-aria-radio">`radio`</a>,
871-
<a href="#index-aria-switch">`switch`</a>
872-
or <a href="#index-aria-tab">`tab`</a>. (<code><a href="#index-aria-button">button</a></code> is also allowed, but NOT RECOMMENDED.)
877+
<span class="proposed addition"><a href="#index-aria-slider">`slider`</a></span>,
878+
<a href="#index-aria-switch">`switch`</a>,
879+
<a href="#index-aria-tab">`tab`</a>,
880+
or <span class="proposed addition"><a href="#index-aria-treeitem">`treeitem`</a></span>.
881+
(<code><a href="#index-aria-button">button</a></code> is also allowed, but NOT RECOMMENDED.)
873882
</p>
874883
<p>
875884
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
@@ -1633,14 +1642,18 @@ <h2 id="docconformance">
16331642
Roles:
16341643
<span class="correction"><a href="#index-aria-checkbox">`checkbox`</a>,</span>
16351644
<span class="addition"><a href="#index-aria-combobox">`combobox`</a>,</span>
1645+
<span class="proposed addition"><a href="#index-aria-gridcell">`gridcell`</a>,</span>
16361646
<a href="#index-aria-link">`link`</a>,
16371647
<a href="#index-aria-menuitem">`menuitem`</a>,
16381648
<a href="#index-aria-menuitemcheckbox">`menuitemcheckbox`</a>,
16391649
<a href="#index-aria-menuitemradio">`menuitemradio`</a>,
16401650
<a href="#index-aria-option">`option`</a>,
16411651
<a href="#index-aria-radio">`radio`</a>,
1642-
<a href="#index-aria-switch">`switch`</a>
1643-
or <a href="#index-aria-tab">`tab`</a>. (<code><a href="#index-aria-button">button</a></code> is also allowed, but NOT RECOMMENDED.)
1652+
<span class="proposed addition"><a href="#index-aria-slider">`slider`</a>,</span>
1653+
<a href="#index-aria-switch">`switch`</a>,
1654+
<a href="#index-aria-tab">`tab`</a>,
1655+
or <span class="addition proposed"><a href="#index-aria-treeitem">`treeitem`</a></span>.
1656+
(<code><a href="#index-aria-button">button</a></code> is also allowed, but NOT RECOMMENDED.)
16441657
</p>
16451658
<p>
16461659
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
@@ -1783,19 +1796,28 @@ <h2 id="docconformance">
17831796
<code>role=<a href="#index-aria-button">button</a></code>
17841797
</td>
17851798
<td>
1786-
<p>
1787-
Roles:
1788-
<a href="#index-aria-link">`link`</a>,
1789-
<a href="#index-aria-menuitem">`menuitem`</a>,
1790-
<a href="#index-aria-menuitemcheckbox">`menuitemcheckbox`</a>,
1791-
<a href="#index-aria-menuitemradio">`menuitemradio`</a>,
1792-
<a href="#index-aria-radio">`radio`</a>
1793-
or <a href="#index-aria-switch">`switch`</a>. (<code><a href="#index-aria-button">button</a></code> is also allowed, but NOT RECOMMENDED.)
1794-
</p>
1795-
<p>
1796-
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
1797-
and any `aria-*` attributes applicable to the allowed roles.
1798-
</p>
1799+
<div class="proposed addition">
1800+
<p>
1801+
Roles:
1802+
<a href="#index-aria-button">`button`</a>,
1803+
<a href="#index-aria-checkbox">`checkbox`</a>,
1804+
<a href="#index-aria-gridcell">`gridcell`</a>,
1805+
<a href="#index-aria-link">`link`</a>,
1806+
<a href="#index-aria-menuitem">`menuitem`</a>,
1807+
<a href="#index-aria-menuitemcheckbox">`menuitemcheckbox`</a>,
1808+
<a href="#index-aria-menuitemradio">`menuitemradio`</a>,
1809+
<a href="#index-aria-option">`option`</a>,
1810+
<a href="#index-aria-radio">`radio`</a>,
1811+
<a href="#index-aria-slider">`slider`</a>,
1812+
<a href="#index-aria-switch">`switch`</a>,
1813+
<a href="#index-aria-tab">`tab`</a>
1814+
or <a href="#index-aria-treeitem">`treeitem`</a>.
1815+
</p>
1816+
<p>
1817+
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
1818+
and any `aria-*` attributes applicable to the allowed roles.
1819+
</p>
1820+
</div>
17991821
</td>
18001822
</tr>
18011823
<tr>
@@ -1906,13 +1928,32 @@ <h2 id="docconformance">
19061928
<code>role=<a href="#index-aria-button">button</a></code>
19071929
</td>
19081930
<td>
1909-
<p>
1910-
<a><strong class="nosupport">No `role`</strong></a> other than <code><a href="#index-aria-button">button</a></code>, which is NOT RECOMMENDED.
1911-
</p>
1912-
<p>
1913-
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
1914-
and any `aria-*` attributes applicable to the `button` role.
1915-
</p>
1931+
<div class="proposed addition">
1932+
<p>
1933+
The following roles are allowed, but are NOT RECOMMENDED:
1934+
<a href="#index-aria-button">`button`</a>,
1935+
<a href="#index-aria-checkbox">`checkbox`</a>,
1936+
<a href="#index-aria-combobox">`combobox`</a>,
1937+
<a href="#index-aria-gridcell">`gridcell`</a>,
1938+
<a href="#index-aria-link">`link`</a>,
1939+
<a href="#index-aria-menuitem">`menuitem`</a>,
1940+
<a href="#index-aria-menuitemcheckbox">`menuitemcheckbox`</a>,
1941+
<a href="#index-aria-menuitemradio">`menuitemradio`</a>,
1942+
<a href="#index-aria-option">`option`</a>,
1943+
<a href="#index-aria-radio">`radio`</a>,
1944+
<a href="#index-aria-slider">`slider`</a>,
1945+
<a href="#index-aria-switch">`switch`</a>,
1946+
<a href="#index-aria-tab">`tab`</a>
1947+
or <a href="#index-aria-treeitem">`treeitem`</a>.
1948+
</p>
1949+
<p>
1950+
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
1951+
and any `aria-*` attributes applicable to the allowed roles.
1952+
</p>
1953+
<p>
1954+
If possible, authors SHOULD consider using a different HTML element which allows the specified role.
1955+
</p>
1956+
</div>
19161957
</td>
19171958
</tr>
19181959
<tr>
@@ -1941,13 +1982,32 @@ <h2 id="docconformance">
19411982
<code>role=<a href="#index-aria-button">button</a></code>
19421983
</td>
19431984
<td>
1944-
<p>
1945-
<a><strong class="nosupport">No `role`</strong></a> other than <code><a href="#index-aria-button">button</a></code>, which is NOT RECOMMENDED.
1946-
</p>
1947-
<p>
1948-
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
1949-
and any `aria-*` attributes applicable to the `button` role.
1950-
</p>
1985+
<div class="proposed addition">
1986+
<p>
1987+
The following roles are allowed, but are NOT RECOMMENDED:
1988+
<a href="#index-aria-button">`button`</a>,
1989+
<a href="#index-aria-checkbox">`checkbox`</a>,
1990+
<a href="#index-aria-combobox">`combobox`</a>,
1991+
<a href="#index-aria-gridcell">`gridcell`</a>,
1992+
<a href="#index-aria-link">`link`</a>,
1993+
<a href="#index-aria-menuitem">`menuitem`</a>,
1994+
<a href="#index-aria-menuitemcheckbox">`menuitemcheckbox`</a>,
1995+
<a href="#index-aria-menuitemradio">`menuitemradio`</a>,
1996+
<a href="#index-aria-option">`option`</a>,
1997+
<a href="#index-aria-radio">`radio`</a>,
1998+
<a href="#index-aria-slider">`slider`</a>,
1999+
<a href="#index-aria-switch">`switch`</a>,
2000+
<a href="#index-aria-tab">`tab`</a>
2001+
or <a href="#index-aria-treeitem">`treeitem`</a>.
2002+
</p>
2003+
<p>
2004+
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
2005+
and any `aria-*` attributes applicable to the allowed roles.
2006+
</p>
2007+
<p>
2008+
If possible, authors SHOULD consider using a different HTML element which allows the specified role.
2009+
</p>
2010+
</div>
19512011
</td>
19522012
</tr>
19532013
<tr>

‎tests/input-image-reset-submit.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,10 @@ <h3>
6666
</h3>
6767
<p>
6868
Authors are allowed to use the roles
69-
<code>button</code>, <code>checkbox</code>, <code>combobox</code>, <code>gridcell</code>, <code>link</code>, <code>menuitem</code>, <code>menuitemcheckbox</code>, <code>menuitemradio</code>, <code>option</code>, <code>radio</code>, <code>slider</code>, <code>switch</code>, <code>tab</code> or <code>treeitem</code> on a <code>input type=reset</code>, <code>input type=image</code> or <code>input type=submit</code> element, but their use is NOT RECOMMENDED.
69+
<code>button</code>, <code>checkbox</code>, <code>combobox</code>, <code>gridcell</code>, <code>link</code>, <code>menuitem</code>, <code>menuitemcheckbox</code>, <code>menuitemradio</code>, <code>option</code>, <code>radio</code>, <code>slider</code>, <code>switch</code>, <code>tab</code> or <code>treeitem</code> on a <code>input type=reset</code>, <code>input type=image</code> or <code>input type=submit</code> element.
7070
</p>
7171
<p>
72-
All allowed roles on the button element are now allowed on these elements as well. While there are far better elements to use as a base for these roles, and thus why it is 'not recommended' to specify these updated role allowances on these elements, if an author has no other choice and they end up using these elements to make an otherwise accessible custom widget, there is no reason to preclude their use as other automated and manual checks can call out potential accessibility gaps.
72+
All allowed roles on the button element are now allowed on these elements as well. While there are far better elements to use as a base for these roles, if an author has no other choice and they end up using these elements to make an otherwise accessible custom widget, there is no reason to preclude their use as other automated and manual checks can call out potential accessibility gaps.
7373
</p>
7474
<div class="flex">
7575
<div class="widgetDemo">

0 commit comments

Comments
 (0)