├── .github ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── auto-publish.yml ├── .gitignore ├── .pr-preview.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── index.html ├── makeup.css ├── results ├── implementation-results.html └── styles.css ├── tests ├── ahref-aria-disabled.html ├── aria-hidden-all-elements.html ├── aria-hidden-and-hidden.html ├── aria-hidden-invalid-element-test.html ├── aria-hidden-picture.html ├── aria-hidden-valid-element-test-hidden-attr.html ├── aria-hidden-valid-focusable-element-ancestor-test-tabindex-1.html ├── aria-hidden-valid-focusable-element-ancestor-test.html ├── aria-hidden-valid-focusable-element-test-tabindex-1.html ├── aria-hidden-valid-focusable-element-test.html ├── aria-hidden-valid-non-focusable-element-test.html ├── body-head-test.html ├── button-combobox.html ├── button-input-button.html ├── casing-attribute.html ├── casing-role.html ├── checked-test.html ├── colspan-test.html ├── contenteditable-readonly-test.html ├── datalist-aria-attrs.html ├── deprecated-attrs.html ├── deprecated-directory.html ├── disabled-test.html ├── empty.html ├── figure-figcaption.html ├── img-allowed-roles.html ├── input-image-reset-submit.html ├── invalid-nesting-tests.html ├── li-element-roles.html ├── max-test.html ├── menu-test.html ├── min-test.html ├── option-aria-select.html ├── placeholder-test.html ├── prohibit-names.html ├── readonly-test.html ├── required-test.html ├── rowspan-test.html ├── select-multiselectable.html ├── slot.html ├── summary-allowances.html ├── svg-test.html └── template.html ├── tidyconfig.txt └── w3c.json /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | --- 2 | labels: needs implementation commitment, needs changelog entry 3 | --- 4 | 5 | Closes #0000 6 | 7 | 8 | 9 | [test case](#...) 10 | 11 | 20 | 21 | - [ ] [TODO HTML validator](https://github.com/validator/validator/issues/) 22 | - [ ] [TODO IBM equal access accessibility checker](https://github.com/IBMa/equal-access/issues/) 23 | - [ ] [TODO axe-core](https://github.com/dequelabs/axe-core/issues/) 24 | - [ ] [TODO ARC toolkit](https://github.com/ThePacielloGroup/WAI-ARIA-Usage/issues/) 25 | -------------------------------------------------------------------------------- /.github/workflows/auto-publish.yml: -------------------------------------------------------------------------------- 1 | name: Node CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - gh-pages 7 | pull_request: {} 8 | 9 | jobs: 10 | validate-and-publish: 11 | name: Validate and Publish 12 | runs-on: ubuntu-latest # only linux supported at present 13 | steps: 14 | - uses: actions/checkout@v2 15 | - uses: w3c/spec-prod@v2 16 | with: 17 | TOOLCHAIN: respec 18 | W3C_ECHIDNA_TOKEN: ${{ secrets.ECHIDNA_TOKEN }} 19 | W3C_WG_DECISION_URL: "https://lists.w3.org/Archives/Public/public-webapps/2014JulSep/0627.html" 20 | W3C_NOTIFICATIONS_CC: "${{ secrets.CC }}" 21 | W3C_BUILD_OVERRIDE: | 22 | specStatus: REC 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /.pr-preview.json: -------------------------------------------------------------------------------- 1 | { 2 | "src_file": "index.html", 3 | "type": "respec" 4 | } 5 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | All documentation, code and communication under this repository are covered by the [W3C Code of Ethics and Professional Conduct](https://www.w3.org/Consortium/cepc/). 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to the ARIA in HTML Specification 2 | 3 | Contributions to this repository are intended to become part of Recommendation-track documents 4 | governed by the [W3C Patent Policy](http://www.w3.org/Consortium/Patent-Policy/) and 5 | [Document License](http://www.w3.org/Consortium/Legal/copyright-documents). To contribute, you must 6 | either participate in the relevant W3C Working Group or make a non-member patent licensing 7 | commitment. 8 | 9 | If you are not the sole contributor to a contribution (pull request), please identify all 10 | contributors in the pull request's body or in subsequent comments. 11 | 12 | To add a contributor (other than yourself, that's automatic), mark them one per line as follows: 13 | 14 | ``` 15 | +@github_username 16 | ``` 17 | 18 | If you added a contributor by mistake, you can remove them in a comment with: 19 | 20 | ``` 21 | -@github_username 22 | ``` 23 | 24 | If you are making a pull request on behalf of someone else but you had no part in designing the 25 | feature, you can remove yourself with the above syntax. 26 | 27 | ## Tests 28 | 29 | For normative changes, a corresponding 30 | [web-platform-tests](https://github.com/web-platform-tests/wpt) PR should be included. Typically, 31 | both PRs will be merged at the same time. Note that a test change that contradicts the spec should 32 | not be merged before the corresponding spec change. If testing is not practical, please explain why 33 | and if appropriate [file an issue](https://github.com/web-platform-tests/wpt/issues/new) to follow 34 | up later. Add the `type:untestable` or `type:missing-coverage` label as appropriate. 35 | 36 | ## Style guide to contributors 37 | 38 | - the spec uses [ReSpec](https://github.com/w3c/respec/wiki) 39 | - the spec is tidied using [HTML5 Tidy](https://github.com/w3c/tidy-html5). For 40 | instructions on running HTML5 tidy, see below. 41 | - put comments in front of sections, for better readability with 42 | syntax coloring editors 43 | 44 | ## Running HTML5 Tidy 45 | 46 | Please make sure you have HTML5 tidy installed, instead of 47 | the one that ships with \*nix systems. You can confirm this by running: 48 | 49 | ```bash 50 | tidy --version 51 | #HTML Tidy for [some OS] version... 52 | ``` 53 | 54 | Once you have confirmed (make sure you have committed your changes before 55 | running tidy, as the changes are destructive ... in a good way:)): 56 | 57 | ```bash 58 | tidy -config tidyconfig.txt -o index.html index.html 59 | ``` 60 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | All documents in this Repository are licensed by contributors 2 | under the 3 | [W3C Software and Document License](http://www.w3.org/Consortium/Legal/copyright-software). 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ARIA in HTML Specification 2 | 3 | This is the repository for [ARIA in HTML (html-aria)](https://w3c.github.io/html-aria/). This is developed by the [ARIA Working Group](http://www.w3.org/WAI/ARIA/). The W3C staff contact is Daniel Montalvo. 4 | 5 | If you would like to contribute, please [read the contributing document](https://github.com/w3c/html-aria/blob/gh-pages/CONTRIBUTING.md), and review the [W3C Code of Ethics and Professional Conduct](https://www.w3.org/Consortium/cepc/). 6 | 7 | Please review open [issues](https://github.com/w3c/html-aria/issues) and [pull requests](https://github.com/w3c/html-aria/pulls). You can contribute by engaging in those conversations, or opening new issues for discussion. 8 | 9 | If you would like to create a pull request (PR) for a potential change to the specification, please: 10 | 1. Make sure to [open an issue](https://github.com/w3c/html-aria/issues) if there is not already open for your topic. 11 | 2. Have your PR reference the issue your change is related to. This is done by using a `#` and the issue number, e.g., `#112`. 12 | - If your PR will close the referenced issue, then you can write "closes `#issueNumber`". The issue will be automatically closed when the PR is merged. 13 | - If your PR partially resolves an open issue, or is only related to the issue, then please reference as: "related to `#issueNumber`". 14 | -------------------------------------------------------------------------------- /makeup.css: -------------------------------------------------------------------------------- 1 | p.note, 2 | div.note { 3 | padding: 1em; 4 | } 5 | 6 | div.note *:last-child { 7 | margin-bottom: 0; 8 | } 9 | 10 | .note { 11 | background: none repeat scroll 0 0 #e9fbe9; 12 | border-left: 0.25em solid #52e052; 13 | } 14 | 15 | .example { 16 | background: none repeat scroll 0 0 #fcfcfc; 17 | border-color: #c0c0c0; 18 | border-left: 0.25em solid #c0c0c0; 19 | color: #222222; 20 | display: block; 21 | margin-left: 1em; 22 | padding-bottom: 0.5em; 23 | padding-left: 1em; 24 | } 25 | 26 | .example .marker { 27 | margin-bottom: 1em; 28 | } 29 | 30 | a code { 31 | color: inherit; 32 | } 33 | 34 | .simple td { 35 | padding: 10px; 36 | } 37 | 38 | .simple tbody th, 39 | .simple tbody th a, 40 | .simple tbody th code { 41 | background: inherit; 42 | color: inherit; 43 | font-weight: normal; 44 | } 45 | 46 | .simple tbody th a { 47 | display: inline-block; 48 | padding: 0; 49 | } 50 | 51 | table th ul, 52 | table td ul { 53 | padding-left: .825em; 54 | } 55 | 56 | /* these classes don't behave very well for inline changes. 57 | so these updates were made to make these work better in 58 | this spec. */ 59 | span.addition.proposed, 60 | span.addition.correction, 61 | span.correction.proposed, 62 | span.amendment.proposed { 63 | padding: .125em .25em; 64 | border-width: 3px; 65 | } 66 | -------------------------------------------------------------------------------- /results/styles.css: -------------------------------------------------------------------------------- 1 | /* Web Fonts 2 | -------------------------------------------------- */ 3 | @font-face { 4 | font-family: 'Roboto Slab'; 5 | src: url("fonts/RobotoSlab-Bold-webfont.eot"); 6 | src: url("fonts/RobotoSlab-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/RobotoSlab-Bold-webfont.woff") format("woff"), url("fonts/RobotoSlab-Bold-webfont.ttf") format("truetype"), url("fonts/RobotoSlab-Bold-webfont.svg#roboto_slabbold") format("svg"); 7 | font-weight: 700; 8 | font-style: normal; 9 | } 10 | 11 | /* Body & HTML 12 | -------------------------------------------------- */ 13 | html { 14 | font-family: Calibri, Candara, Geneva, sans-serif; 15 | } 16 | 17 | body { 18 | background: #fefefe; 19 | border-top: 6px solid #1b75bc; 20 | padding: 2.5em; 21 | } 22 | 23 | /* Flow 24 | -------------------------------------------------- */ 25 | * { 26 | font-family: inherit; 27 | margin: 0; 28 | } 29 | 30 | * + * { 31 | margin-top: .5em; 32 | } 33 | 34 | body, 35 | br, 36 | li, 37 | dt, 38 | dd, 39 | th, 40 | td, 41 | option, 42 | a + ul, 43 | :empty + * { 44 | margin-top: 0; 45 | } 46 | 47 | p + p { 48 | margin-top: .75em; 49 | } 50 | 51 | label + * { 52 | margin-top: 0; 53 | } 54 | 55 | li { 56 | margin-top: .25em; 57 | } 58 | 59 | /* Headings 60 | -------------------------------------------------- */ 61 | h1, h2, h3, h4, h5, h6 { 62 | font-weight: 700; 63 | } 64 | 65 | h1, 66 | h2, 67 | h3 { 68 | font-family: "Roboto Slab", Cambria, Georgia, serif; 69 | line-height: 1.125; 70 | } 71 | 72 | h1 { 73 | font-size: 2.5em; 74 | } 75 | 76 | h2 { 77 | font-size: 2em; 78 | } 79 | 80 | h2:not(:first-child) { 81 | margin-top: 1em; 82 | } 83 | 84 | h3 { 85 | border-top: lightgray solid 1px; 86 | font-size: 1.33em; 87 | padding-top: 1em; 88 | } 89 | 90 | h4 { 91 | font-size: 1em; 92 | font-variant: small-caps; 93 | text-transform: uppercase; 94 | } 95 | 96 | h5 { 97 | font-size: 1em; 98 | } 99 | 100 | h6 { 101 | font-size: .8em; 102 | } 103 | 104 | 105 | /* Links & Buttons 106 | -------------------------------------------------- */ 107 | a { 108 | border-bottom: 1px solid; 109 | color: #1b75bc; 110 | text-decoration: none; 111 | } 112 | 113 | a:hover { 114 | border-bottom: 2px solid; 115 | } 116 | 117 | a code { 118 | color: #14578A; 119 | } 120 | 121 | button, 122 | [type="submit"], 123 | [type="reset"], 124 | [type="file"] { 125 | background: #1b75bc; 126 | border: 0; 127 | border-radius: .125em; 128 | color: #fff; 129 | font-family: "Roboto Slab", Cambria, Georgia, serif; 130 | font-size: 1.125em; 131 | letter-spacing: 1px; 132 | padding: .5em 1em; 133 | } 134 | 135 | button::-moz-focus-inner, 136 | input[type="submit"]::-moz-focus-inner, 137 | input[type="file"] > input[type="button"]::-moz-focus-inner, 138 | select:-moz-focusring { 139 | border: 0; 140 | padding: 0; 141 | } 142 | 143 | :focus:not([tabindex="-1"]) { 144 | outline: .25rem solid #aade87; 145 | } 146 | 147 | /* fix for IE :( */ 148 | div:not([tabindex]):focus { 149 | outline: none; 150 | } 151 | 152 | button:focus, 153 | [type="submit"]:focus, 154 | [type="file"]:focus { 155 | box-shadow: 0 0 0 .25rem #aade87; 156 | outline: none !important; 157 | } 158 | 159 | button:hover, 160 | [type="submit"]:hover, 161 | [type="file"]:hover { 162 | background: #333; 163 | } 164 | 165 | /* Forms 166 | -------------------------------------------------- */ 167 | label { 168 | display: block; 169 | } 170 | 171 | input:not([type="submit"]), 172 | textarea, select { 173 | background: #fefefe; 174 | border: .125rem solid; 175 | border-radius: .125em; 176 | padding: .25em; 177 | width: 100%; 178 | } 179 | 180 | input:focus, 181 | textarea:focus { 182 | box-shadow: 0 0 0 .25em #aade87; 183 | outline: none !important; 184 | } 185 | 186 | /* Header Content Styles 187 | -------------------------------------------------- */ 188 | body > header { 189 | background: #fafafa; 190 | border-bottom: 1px solid #eee; 191 | margin: -2.5em -2.5em 1.5em; 192 | padding: 2.5em; 193 | } 194 | 195 | #logo { 196 | float:left; 197 | height: 128px; 198 | width: 128px; 199 | } 200 | 201 | /* Navigation blocks 202 | -------------------------------------------------- */ 203 | nav { 204 | background: #1b75bc; 205 | padding: 1.5em; 206 | text-align: center; 207 | } 208 | 209 | nav ul { 210 | padding: 0; 211 | } 212 | 213 | nav li { 214 | display: inline-block; 215 | } 216 | 217 | nav li + li { 218 | margin-left: .75em; 219 | } 220 | 221 | nav a { 222 | border: 0; 223 | color: #fff; 224 | } 225 | 226 | nav a:hover, 227 | nav a:focus { 228 | border-bottom: 2px solid; 229 | outline: none !important; 230 | } 231 | 232 | /* Tables 233 | -------------------------------------------------- */ 234 | table { 235 | border: 0; 236 | border-collapse: collapse; 237 | border-spacing: 0; 238 | font-size: .9em; 239 | width: 100%; 240 | } 241 | 242 | caption { 243 | font-size: 1em; 244 | font-weight: bold; 245 | padding: 0 1em 1em; 246 | } 247 | 248 | th, 249 | td { 250 | border: 1px solid #333; 251 | padding: .33em; 252 | text-align: left; 253 | } 254 | 255 | thead th { 256 | background-color: #1b75bc; 257 | color: #fff; 258 | } 259 | 260 | thead th, 261 | tfoot tr:first-of-type td { 262 | font-family: "Roboto Slab", Cambria, Georgia, serif; 263 | font-weight: bold; 264 | } 265 | 266 | tfoot tr:first-of-type > * { 267 | border-top: 4px solid #1b75bc; 268 | } 269 | 270 | tbody tr:nth-child(odd) { 271 | background-color: #f7f7f7; 272 | } 273 | 274 | tbody tr:hover { 275 | box-shadow: inset 0 0 0 2px #666; 276 | } 277 | 278 | tbody th { 279 | text-align: left; 280 | } 281 | 282 | table a { 283 | border: 0; 284 | } 285 | 286 | /*table a:after { 287 | content: '\279C'; 288 | margin-left: .25em; 289 | }*/ 290 | 291 | td ul { 292 | padding-left: 1.25em; 293 | } 294 | 295 | tbody th, 296 | tbody td { 297 | vertical-align: top; 298 | } 299 | 300 | .status-icon { 301 | height: 16px; 302 | width: 16px; 303 | } 304 | 305 | .col-1 { 306 | width: 180px; 307 | } 308 | 309 | .col-2 { 310 | width: 320px; 311 | } 312 | 313 | /* Figures, note and kbd 314 | -------------------------------------------------- */ 315 | figure { 316 | border: 1px solid #111; 317 | margin: 1em 0 0; 318 | padding: .5em; 319 | } 320 | 321 | figcaption { 322 | color: #1b75bb; 323 | } 324 | 325 | .note { 326 | background: none repeat scroll 0 0 #e9FBe9; 327 | border-left: .25em solid #52e052; 328 | padding: .5em 2em; 329 | } 330 | 331 | kbd { 332 | background-color: #333; 333 | border-radius: 3px; 334 | box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); 335 | color: #fff; 336 | display: inline-block; 337 | min-width: 16px; 338 | padding: .25em .5em; 339 | text-align: center; 340 | } 341 | 342 | /* Footer 343 | -------------------------------------------------- */ 344 | footer { 345 | background: #eee; 346 | margin: 1.5em -2.5em -2.5em; 347 | padding: 2.5em; 348 | } 349 | 350 | footer h2, 351 | footer h3 { 352 | font-size: 1.5em; 353 | } 354 | 355 | footer p:only-child { 356 | text-align: center; 357 | } 358 | 359 | footer > p, 360 | footer > ul > li { 361 | font-size: .9em; 362 | } 363 | 364 | /* Code blocks and inline code*/ 365 | pre { 366 | background: #ededed; 367 | font-family: Courier, monospace; 368 | font-size: 85%; 369 | padding: 1em; 370 | white-space: pre-wrap; 371 | } 372 | 373 | pre code { 374 | display: block; 375 | font-family: monospace; 376 | overflow: auto; 377 | } 378 | 379 | p code, 380 | li code { 381 | background-color: rgba(0, 0, 0, .04); 382 | border-radius: 3px; 383 | font-family: Courier, monospace; 384 | font-size: 85%; 385 | margin: 0; 386 | padding: .2em 0; 387 | } 388 | 389 | code p br, 390 | code p div br, 391 | code div br { 392 | display: none; 393 | } 394 | 395 | code code, 396 | code p { 397 | display: inline; 398 | padding: 0px; 399 | } 400 | 401 | strong.question { font-family: "Roboto Slab", Cambria, Georgia, serif; color:#900;font-size:larger;font weight:bold} -------------------------------------------------------------------------------- /tests/ahref-aria-disabled.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 | 47 |
48 |

ARIA in HTML - test cases for aria-disabled on a href

49 |

last updated 9 March 2021

50 |
51 |
52 |

Tests:

53 | 54 |
55 |
56 |

Test 1

57 |

Authors are NOT RECOMMENDED to use the aria-disabled attribute on the a element with an href attribute.

58 | 59 |
60 | a with href - not really disabled 61 |
62 | 63 |

Expected result: 64 |
warn authors aria-disabled is not to be used on native a element with href. (authors should use a without href instead)

65 |
66 | 67 | 68 |
69 |

Test 2

70 |

Authors can use the aria-disabled attribute on the a element if it has no href.

71 | 72 | 73 |
74 | a without href - actually disabled 75 |
76 | 77 |

Expected result: 78 |
no warning/error. This is valid.

79 |
80 | 81 |
82 |
83 | 84 | 85 | -------------------------------------------------------------------------------- /tests/aria-hidden-all-elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ARIA in HTML - Test Cases 6 | 7 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |
62 |

ARIA in HTML - test case for valid non-focusable elements which can use aria-hidden

63 |

last updated 13 March 2021

64 |
65 |
66 |

Tests:

67 | 68 |
69 |
70 |

Test 2

71 |

Authors MAY use the aria-hidden attribute on any HTML element that allows global aria-* attributes

72 | 73 |

This test case sets aria-hidden="true" to all HTML elements not covered in test 1 74 | 75 |

76 | 77 | 78 | 79 | 80 | 81 |

82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 |
90 | 91 | 92 | 93 | 94 | 95 | 96 | 98 | 99 | 100 | 104 | 107 |
108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 225 | 226 | 229 | 230 | 231 | 232 | 235 |
236 | 237 |

Expected result: 238 |
No errors or warnings for use of aria-hidden="true" on any element in this test case.

239 |
240 |
241 |
242 | 243 | 244 | -------------------------------------------------------------------------------- /tests/aria-hidden-and-hidden.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ARIA in HTML - Test Cases 6 | 7 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
64 |

ARIA in HTML - test case for use of aria-hidden and hidden

65 |

last updated 13 March 2021

66 |
67 |
68 |

Tests:

69 | 70 |
71 |
72 |

Test 3

73 |

Authors SHOULD NOT use the aria-hidden=true attribute on any element which also has a hidden attribute

74 | 75 |

This test case sets aria-hidden="true" and hidden to all HTML elements not covered in test 1 76 | 77 |

78 | 79 | 80 | 81 | 82 | 83 |

84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 |
92 | 93 | 94 | 95 | 96 | 97 | 98 | 100 | 101 | 102 | 106 | 109 |
110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 227 | 228 | 231 | 232 | 233 | 234 | 237 |
238 | 239 |

Expected result: 240 |
A conformance checker would flag all instances of elements with aria-hidden and hidden attributes as invalid

241 |
242 |
243 |
244 | 245 | 246 | -------------------------------------------------------------------------------- /tests/aria-hidden-invalid-element-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ARIA in HTML - Test Cases 6 | 7 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |
57 |

ARIA in HTML - test case for invalid aria-hidden use

58 |

last updated 28 February 2021

59 |

The aria-hidden attribute is allowed on any element that allows for global aria-* attributes.

60 |
61 |
62 |

Tests:

63 | 64 |
65 |
66 |

Test 1

67 |

Authors MAY use the aria-hidden attribute on any HTML element that allows global aria-* attributes, with the following exceptions:

68 |

69 | aria-hidden is not allowed on: 70 |

71 |
    72 |
  • base
    • 73 |
  • col
    • 74 |
  • colgroup
    • 75 |
  • head
    • 76 |
  • html
    • 77 |
  • input type=hidden
    • 78 |
  • link
    • 79 |
  • map
    • 80 |
  • meta
    • 81 |
  • noscript
    • 82 |
  • param
    • 83 |
  • picture
    • 84 |
  • script
    • 85 |
  • slot
    • 86 |
  • source
    • 87 |
  • style
    • 88 |
  • template
    • 89 |
  • title
    • 90 |
  • track
    • 91 |
92 | 93 |

All elements represented above have been added to this document, in their proper locations so as to render in the browser. Each has an aria-hidden="false" so as to help ensure the test case will remain accessible. 94 | 95 |

96 | 97 | 98 | 99 | 100 | 101 | 102 |
table contains colgroup/col with aria-hidden
103 |

all other non-head or html elements follow with aria-hidden=false

104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
116 | 117 |

Expected result: 118 |
An error for all elements with aria-hidden set, regardless if it is set to true or false.

119 |
120 |
121 |
122 | 123 | 124 | -------------------------------------------------------------------------------- /tests/aria-hidden-picture.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ARIA in HTML - Test Cases 6 | 7 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |
62 |

ARIA in HTML - test case for aria-hidden on picture

63 |

last updated 16 December 2021

64 |
65 |
66 |

Tests:

67 | 68 |
69 |
70 |

Authors MAY use the aria-hidden attribute on the picture element.

71 |
72 | 75 | 76 | 77 |
78 | 79 |

Expected result: 80 |
No errors or warnings for use of aria-hidden="true" on the picture element.

81 |

Additionally, since the image is hidden to assistive technologies per the parent picture having the aria-hidden=true 82 | attribute, checkers may consider not flagging the picture's child image for not having alternative text specified. 83 |

84 |
85 |
86 | 87 | 88 | -------------------------------------------------------------------------------- /tests/aria-hidden-valid-element-test-hidden-attr.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ARIA in HTML - Test Cases 6 | 7 | 64 | 65 | 66 | 67 |
68 |

ARIA in HTML - test case for valid non-interactive elements which can use aria-hidden

69 |

last updated 28 February 2021

70 |
71 |
72 |

Tests:

73 | 74 |
75 |
76 |

Test 3

77 |

Authors SHOULD NOT use the aria-hidden="true" attribute on any element which also has a hidden attribute.

78 | 79 |

This test case sets aria-hidden="true" and the hidden to all HTML elements where use of aria-hidden is not invalid (test 1). 80 | 81 |

82 | 83 | 84 | 85 | 86 | 87 |

88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 |
96 | 97 | 98 | 99 | 100 | 101 | 102 | 104 | 105 | 106 | 110 | 113 |
114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 231 | 232 | 233 | 234 | 235 | 236 | 239 | 240 | 241 |
242 | 243 |

Expected result: 244 |
Warning for each element that uses both aria-hidden=true and hidden attributes

245 |
246 |
247 |
248 | 249 | 250 | -------------------------------------------------------------------------------- /tests/aria-hidden-valid-focusable-element-ancestor-test-tabindex-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ARIA in HTML - Test Cases 6 | 7 | 64 | 65 | 66 | 67 |
68 |

ARIA in HTML - test case for focusable elements which can use aria-hidden

69 |

last updated 28 February 2021

70 |
71 |
72 |

Tests:

73 | 74 |
75 |
76 |

Test 7

77 |

Authors MUST NOT use aria-hidden="true" on an element that can receive keyboard focus, or on an ancestor element to an element or elements which can receive keyboard focus.

78 | 79 |

This test case sets aria-hidden="true" on a div which contains focusable elements.

80 | 81 | 134 | 135 |

Expected result: 136 |
No error produced because all elements as descendants of a aria-hidden="true" ancestor cannot receive keyboard focus from the tab key.

137 |

A warning may be desirable as these elements can still receive focus via "click", "tap", programmatically being focused (focus()), etc.

138 |
139 |
140 |
141 | 142 | 143 | -------------------------------------------------------------------------------- /tests/aria-hidden-valid-focusable-element-ancestor-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ARIA in HTML - Test Cases 6 | 7 | 64 | 65 | 66 | 67 |
68 |

ARIA in HTML - test case for focusable elements which can use aria-hidden

69 |

last updated 28 February 2021

70 |
71 |
72 |

Tests:

73 | 74 |
75 |
76 |

Test 6

77 |

Authors MUST NOT use aria-hidden="true" on an element that can receive keyboard focus, or on an ancestor element to an element or elements which can receive keyboard focus.

78 | 79 |

This test case sets aria-hidden="true" on a div which contains focusable elements.

80 | 81 | 134 | 135 |

Expected result: 136 |
Error as focusable elements within a aria-hidden="true" ancestor are still reachable via tab key navigation.

137 |
138 |
139 |
140 | 141 | 142 | -------------------------------------------------------------------------------- /tests/aria-hidden-valid-focusable-element-test-tabindex-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ARIA in HTML - Test Cases 6 | 7 | 64 | 65 | 66 | 67 |
68 |

ARIA in HTML - test case for focusable elements which can use aria-hidden

69 |

last updated 28 February 2021

70 |
71 |
72 |

Tests:

73 | 74 |
75 |
76 |

Test 5

77 |

Authors MUST NOT use aria-hidden="true" on an element that can receive keyboard focus, or on an ancestor element to an element or elements which can receive keyboard focus.

78 | 79 |

This test case sets aria-hidden="true" on HTML elements which can normally receive focus or are necessary to make interactive elements. All elements have been provided tabindex="-1", removing them from standard keyboard focus via tab key.

80 | 81 |
82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 124 | 125 | 128 | 129 | 130 | 131 | 134 |
135 | 136 |

Expected result: 137 |
No error produced because all elements with aria-hidden="true" cannot receive keyboard focus from the tab key.

138 |

A warning may be desirable as these elements can still receive focus via "click", "tap", programmatically being focused (focus()), etc.

139 |
140 |
141 |
142 | 143 | 144 | -------------------------------------------------------------------------------- /tests/aria-hidden-valid-focusable-element-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ARIA in HTML - Test Cases 6 | 7 | 64 | 65 | 66 | 67 |
68 |

ARIA in HTML - test case for focusable elements which can use aria-hidden

69 |

last updated 28 February 2021

70 |
71 |
72 |

Tests:

73 | 74 |
75 |
76 |

Test 4

77 |

Authors MUST NOT use aria-hidden="true" on an element that can receive keyboard focus, or on an ancestor element to an element or elements which can receive keyboard focus.

78 | 79 |

This test case sets aria-hidden="true" on HTML elements which can receive keyboard focus or are necessary to make interactive elements.

80 | 81 |
82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 123 | 124 | 127 | 128 | 129 | 130 | 133 |
134 | 135 |

Expected result: 136 |
Error for each element that has an aria-hidden=true and remains focusable (e.g., lacks tabindex=-1).

137 |
138 |
139 |
140 | 141 | 142 | -------------------------------------------------------------------------------- /tests/aria-hidden-valid-non-focusable-element-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ARIA in HTML - Test Cases 6 | 7 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |
62 |

ARIA in HTML - test case for valid non-focusable elements which can use aria-hidden

63 |

last updated 28 February 2021

64 |
65 |
66 |

Tests:

67 | 68 |
69 |
70 |

Test 2

71 |

Authors MAY use the aria-hidden attribute on any HTML element that allows global aria-* attributes, with exceptions tested elsewhere:

72 | 73 |

This test case sets aria-hidden="true" to 74 | 75 |

76 | 77 | 78 | 79 | 80 | 81 |

82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 |
90 | 91 | 92 | 93 | 94 | 95 | 96 | 98 | 99 | 100 | 104 | 107 |
108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 |
184 | 185 |

Expected result: 186 |
No errors or warnings for use of aria-hidden="true" on any element in this test case.

187 |
188 |
189 |
190 | 191 | 192 | -------------------------------------------------------------------------------- /tests/body-head-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ARIA in HTML - Test Cases 6 | 7 | 52 | 53 | 54 |
55 |

ARIA in HTML - test cases for body, html and head elements

56 |

last updated 31 August 2021

57 |
58 |
59 |

Tests:

60 | 61 |
62 |
63 |

Test 1

64 |

65 | No role is allowed on the body, html or head elements. 66 | To manually verify, check this page with a conformance checker. The html element has a role=document, and the head and body elements have role=presentation. 67 |

68 |

To verify additional roles, use the text field below to enter valid roles and dynamically apply them to the body, html and head elements, and then re-run the conformance checkers.

69 | 70 |

71 | Warning: adding certain ARIA roles to the body and html elements may make this page inaccessible.

72 |
73 | 77 | 78 | 79 | 93 |
94 |

Expectation: conformance checkers will indicate that role=document is redundant on html element, and that a role with any other value is invalid on the html element.

95 |

Conformance checkers will indicate that any role is invalid on the body and head elements.

96 |
97 |
98 |
99 | 100 | 101 | -------------------------------------------------------------------------------- /tests/button-combobox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ARIA in HTML - Test Cases 6 | 7 | 43 | 44 | 45 | 46 |
47 |

ARIA in HTML - test case for role=combobox on button

48 |

last updated 15 January 2022

49 |
50 |
51 |

Tests:

52 |

Authors MAY use role=combobox on a button element, so long as other required attributes of the combobox role are also specified.

53 | 54 |
55 |
56 |
57 | 58 | 59 |
60 | 61 |

Expected result: 62 | This test fails because the button element has a role=combobox, but no other required attributes (aria-controls and aria-expanded).

63 |
64 | 65 |
66 |
67 | 68 | 69 | 70 |
71 | 72 |

Expected result: 73 | This test passes. The button element has a role=combobox, 74 | and has the required aria-controls and aria-expanded attributes.

75 |
76 |
77 |
78 | 79 | 80 | -------------------------------------------------------------------------------- /tests/button-input-button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ARIA in HTML - Test Cases 6 | 7 | 54 | 55 | 56 | 57 |
58 |

ARIA in HTML - test case for additional role allowances for button and input type=button elements

59 |

last updated 15 February 2023

60 |
61 |
62 |

Tests:

63 | 64 |

65 | Authors MAY use role=gridcell, slider or treeitem on a button element. 66 |

67 | 68 |
69 |
70 |
71 | 72 | 73 | 74 |
75 | 76 |

Expected result: 77 | These test cases would pass checks for an allowed role, but other failures would be expected as the elements are not contained or owned by their expected accessibility parents (gridcell or treeitem), or lack other expected properties required by authors (slider). 78 |

79 |
80 | 81 |
82 |
83 |
84 |
85 | 86 |
87 |
88 | 89 |
90 | 91 |
92 | 93 | 94 |
95 | 96 |

97 | Expected result: 98 | No errors or warnings would be expected for these test cases, as they meet all the necessary requirements for use of these roles (necessary nesting and required attributes). 99 |

100 |
101 |
102 | 103 |

104 | Authors MAY use role=gridcell, slider or treeitem on a input type=button element. 105 |

106 |

107 | Note that while these roles are allowed, web authors will generally have a much easier time building these components using another HTML 108 | element as their base (e.g., a button or even a div). 109 |

110 |
111 |
112 |
113 | 114 | 115 | 116 |
117 | 118 |

Expected result: 119 | These test cases would pass checks for an allowed role, but other failures would be expected as the elements are not contained or owned by their expected accessibility parents (gridcell or treeitem), or lack other expected properties required by authors (slider). 120 |

121 |
122 | 123 |
124 |
125 |
126 |
127 | 128 |
129 |
130 | 131 |
132 | 133 |
134 | 135 | 136 |
137 | 138 |

139 | Expected result: 140 | No errors or warnings would be expected for these test cases, as they meet all the necessary requirements for use of these roles (necessary nesting and required attributes). 141 |

142 |
143 |
144 |
145 | 146 | 147 | -------------------------------------------------------------------------------- /tests/casing-attribute.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 | 47 |
48 |

ARIA in HTML - test cases for attribute casing

49 |

last updated 27 June 2021

50 |

51 | Authors SHOULD use lowercase ASCII letters when specifying the following aria-* attribute values. 52 |

53 |
54 |
55 |

Test:

56 | 57 |
58 |
59 |

Test 1

60 | 61 |
62 |
aria-atomic=TRUE
63 | 64 |
aria-busy=TRUE
65 |
aria-checked=TRUE
66 |
aria-current=TRUE
67 |
aria-disabled=TRUE
68 |
aria-dropeffect=MOVE
69 |
aria-expanded=TRUE
70 |
aria-grabbed=FALSE
71 |
aria-haspopup=TRUE
72 |
aria-hidden=FALSE
73 | 74 |
aria-live=FALSE
75 |
aria-modal=FALSE
76 |
77 | aria-multiline=TRUE 78 |
79 |
80 |
aria-multiselectable="FALSE"
81 |
82 | 83 |
84 |
aria-orientation=TRUE
85 |
86 |
aria-pressed=FALSE
87 | 88 |
aria-relevant=FALSE
89 | 90 |
91 |
aria-selected=TRUE
92 |
93 | 94 | 95 | 96 | 97 |
aria-sort=ASCENDING
98 |
99 | 100 |

Expected result: 101 |
Flag error or warning to authors to use lowercase ASCII letters when specifying an attribute's token value.

102 |
103 | 104 |
105 |
106 | 107 | 108 | -------------------------------------------------------------------------------- /tests/casing-role.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 | 47 |
48 |

ARIA in HTML - test cases for role casing

49 |

last updated 27 June 2021

50 |

51 | Authors SHOULD use lowercase ASCII letters when specifying role values. 52 |

53 |
54 |
55 |

Test:

56 | 57 |
58 |
59 |

Test 1

60 | 61 |
62 |
uppercase BUTTON
63 | 
<div role=BUTTON>uppercase BUTTON</div>
64 |
mixed case BuTtOn
65 | 
<div role=BuTtOn>mixed case BuTtOn</div>
66 |
67 | 68 |

Expected result: 69 |
Flag error or warning to authors to use lowercase ASCII letters when specifying a role.

70 |
71 |
72 |
73 | 74 | 75 | -------------------------------------------------------------------------------- /tests/checked-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 | 47 |
48 |

ARIA in HTML - test cases for aria-checked

49 |

last updated 27 February 2021

50 |

51 | checked is allowed on input type=checkbox and input type=radio elements 52 |

53 |
54 |
55 |

Tests:

56 | 57 |
58 |
59 |

Test 1

60 |

Authors SHOULD NOT use the aria-checked attribute on any element where the checkedness of the element can be in opposition to the current value of the aria-checked attribute.

61 | 62 |

The following input type=checkbox has an aria-checked=true, which does not update to match the checked state of the native element.

63 | 64 |
65 | 66 | 67 |
68 | 69 |

Expected result: 70 |
Warning that authors should not use aria-checked on the input.

71 |
72 | 73 |
74 |

Test 2

75 |

Authors SHOULD NOT use the aria-checked attribute on any element where the checkedness of the element can be in opposition to the current value of the aria-checked attribute.

76 | 77 |

The following input type=radio elements each have an aria-checked=true, which does not update to match the checked state of the native element.

78 | 79 |
80 |
81 | test 2 82 | 83 | 84 | 85 | 86 |
87 |
88 | 89 |

Expected result: 90 |
Warning that authors should not use aria-checked on the inputs.

91 |
92 | 93 | 94 |
95 |
96 | 97 | 98 | -------------------------------------------------------------------------------- /tests/colspan-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 | 47 |
48 |

ARIA in HTML - test cases for aria-colspan

49 |

last updated 18 August 2021

50 |

51 | colspan is allowed on td and th elements 52 |

53 |
54 |
55 |

Tests:

56 | 57 |
58 |
59 |

Test 1

60 | Edit: removed test. 61 |
62 | 63 |
64 |

Test 2

65 |

Authors SHOULD NOT use the aria-colspan. attribute on any element which also has a colspan attribute.

66 | 67 |

The first th and td each have an aria-colspan="1" and colspan="1" attribute

68 | 69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
header 1header 2
Cell 1Cell 2
82 |
83 | 84 |

Expected result: 85 |
warning for unnecessary use of aria-colspan when element has colspan.

86 |
87 | 88 |
89 |

Test 3

90 |

Authors MUST NOT use aria-colspan on any element which also has a colspan attribute, and the values of each attribute do not match.

91 | 92 |

The first th and td each have an aria-colspan="1" and colspan="2" attribute

93 | 94 |
95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 |
header 1header 2
Cell 1Cell 2
104 |
105 | 106 |

Expected result: 107 |
error for use of aria-colspan with value different than colspan

108 |
109 |
110 |
111 | 112 | 113 | -------------------------------------------------------------------------------- /tests/contenteditable-readonly-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 49 | 50 | 51 | 52 |
53 |

ARIA in HTML - test case for aria-readonly on contenteditable element

54 |

last updated 28 February 2021

55 |
56 |
57 |

Test:

58 | 59 |
60 |
61 |

Test 1

62 |

Authors MUST NOT set aria-readonly="true" on an element that has contentEditable.

63 | 64 |

The following div has an aria-readonly=true with contenteditable.

65 | 66 |
67 |
68 |
69 | 70 |

Expected result: 71 |
Error that authors must not use aria-readonly=true on an element with contenteditable.

72 |
73 |
74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /tests/datalist-aria-attrs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - datalist ARIA attributes test case 5 | 6 | 44 | 45 | 46 | 47 |
48 |

ARIA in HTML - test cases for aria-* attributes on datalist

49 |

last updated 4 December 2021

50 |
51 |
52 |

Tests:

53 | 54 |
55 |
56 |

Test 1

57 |

Authors MUST NOT use the aria-* attributes on the datalist element.

58 | 59 |
60 | 61 | 62 | 92 | 93 |
test ref
94 |
95 | 96 |

Expected result: 97 |
warn authors that the use of aria-* attributes on the datalist element is invalid.

98 |
99 | 100 | 101 |
102 |
103 | 104 | 105 | -------------------------------------------------------------------------------- /tests/deprecated-attrs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 | 47 |
48 |

ARIA in HTML - test case for deprecated aria-* attributes

49 |

last updated 9 January 2022

50 |
51 |
52 |

Tests:

53 | 54 |
55 |
56 |

Test 1

57 |

Authors are NOT RECOMMENDED to use the aria-grabbed attribute, as it has been deprecated since ARIA 1.1, and has generally poor support.

58 | 59 |
60 |
61 | element with aria-grabbed=true 62 |
63 |
64 | 65 |

Expected result: 66 |
warn authors aria-grabbed has been deprecated and may not have sufficient support.

67 |
68 | 69 | 70 |
71 |

Test 2

72 |

Authors are NOT RECOMMENDED to use the aria-dropeffect attribute, as it has been deprecated since ARIA 1.1, and has generally poor support.

73 | 74 |
75 |
76 | element with aria-dropeffect=copy 77 |
78 |
79 | 80 |

Expected result: 81 |
warn authors aria-dropeffect has been deprecated and may not have sufficient support.

82 |
83 |
84 |
85 | 86 | 87 | -------------------------------------------------------------------------------- /tests/deprecated-directory.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 | 47 |
48 |

ARIA in HTML - test case for deprecated role=directory

49 |

last updated 10 January 2022

50 |
51 |
52 |

Tests:

53 | 54 |
55 |
56 |

Test 1

57 |

Authors are NOT RECOMMENDED to use the role=directory, as it has been deprecated. The following div, ul, ol and menu elements have a role=directory.

58 |

Authors should not need to use role=listitem on li elements, however not all browsers will respect the li mapping to listitem if the 59 | parent list element has a role=directory specified. 60 |

61 |
62 |
an item in the directory
63 |
an item in the directory
64 |
65 | 66 |
    67 |
  • an item in the directory, no explicit role
    • 68 |
  • an item in the directory with role=listitem
    • 69 |
70 | 71 |
    72 |
  1. an item in the directory, no explicit role
    2. 73 |
  2. an item in the directory with role=listitem
    3. 74 |
75 | 76 | 77 |
  • an item in the directory, no explicit role
    • 78 |
  • an item in the directory with role=listitem
    • 79 |     80 |
    81 | 82 |

    Expected result: 83 |
    warn authors role=directory has been deprecated, and that they should use a native list element (ul, 84 | ol, menu) or role=list instead.

    85 |

    Note: while a directory maps to a list, 86 | if used on a ul, ol or menu, their child li elements do not remain 87 | mapped to listitem in Chromium browsers. Firefox and Webkit do still map the li 88 | elements to listitem. Essentially, if not using listitem on each child of a directory, then 89 | those lists will be broken in Chromium browsers.

    90 |
    91 |
    92 |
    93 | 94 | 95 | -------------------------------------------------------------------------------- /tests/disabled-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 51 | 52 | 53 | 54 |
    55 |

    ARIA in HTML - test cases for aria-disabled

    56 |

    last updated 27 February 2021

    57 |

    58 | disabled is allowed on input, button, select, textarea, fieldset, option, optgroup and form associated custom elements 59 |

    60 |

    note: a form associated custom element is not part of this test case

    61 |
    62 |
    63 |

    Tests:

    64 | 65 |
    66 |
    67 |

    Test 1

    68 |

    Authors MAY use the aria-disabled attribute on any element that is allowed the disabled attribute in HTML, or any element with a WAI-ARIA role which allows the aria-disabled attribute.

    69 | 70 |

    The following elements have aria-disabled=true attributes.

    71 | 72 |
    73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 |
    fieldset
    105 | 106 | 109 | 110 | 118 |
    119 | 120 |

    Expected result: 121 |
    for all but input type=hidden no warning/error

    122 |

    for input type=hidden error that no aria-* attributes are allowed. 123 |

    124 | 125 |
    126 |

    Test 2

    127 |

    Authors SHOULD NOT use aria-disabled="true" on any element which also has a disabled attribute.

    128 | 129 |

    The following elements have aria-disabled=true and disabled attributes.

    130 | 131 |
    132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 |
    fieldset
    164 | 165 | 168 | 169 | 177 |
    178 | 179 |

    Expected result: 180 |
    for all but input type=hidden unnecessary use of aria-disabled when element has disabled.

    181 |

    for input type=hidden error that no aria-* attributes are allowed. 182 |

    183 | 184 | 185 | 186 |
    187 |

    Test 3

    188 |

    Authors MUST NOT use aria-disabled="false" on any element which also has a disabled attribute.

    189 | 190 |

    The following elements have aria-disabled=false and disabled attributes.

    191 | 192 |
    193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 |
    fieldset
    225 | 226 | 229 | 230 | 238 |
    239 | 240 |

    Expected result: 241 |
    for all but input type=hidden error for use of aria-disabled="false" with disabled attribute.

    242 |

    for input type=hidden error that no aria-* attributes are allowed. 243 |

    244 |
    245 | 246 |
    247 | 248 | 249 | -------------------------------------------------------------------------------- /tests/empty.html: -------------------------------------------------------------------------------- 1 | empty 2 | -------------------------------------------------------------------------------- /tests/img-allowed-roles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 | 47 |
    48 |

    ARIA in HTML - test cases for allowed roles on img elements with and without names

    49 |

    last updated 14 June 2023

    50 |

    51 | If an image is provided a name using the alt attribute, or other valid naming mechanisms, then authors may specified the allowed roles on the element (while also meeting other requirements for the use of those roles - which are out of scope for this test). 52 |

    53 |

    54 | If an image lacks an accessible name, then only the roles of img, none and presentation are allowed, though not recommended as these are unnecessary for authors to specify. 55 |

    56 |
    57 |
    58 |

    Tests:

    59 | 60 |
    61 |
    62 |

    Test 1

    63 |

    64 | The following tests are of image elements with accessible names provided by use of alt, aria-label, aria-labelledby and the title attribute. 65 |

    66 | 67 | 68 |
    69 |

    with alt

    70 |

    image

    71 |

    button

    72 |

    checkbox

    73 |

    link

    74 |

    meter

    75 |

    menuitem

    76 |

    menuitemcheckbox

    77 |

    menuitemradio

    78 |

    option

    79 |

    progressbar

    80 |

    radio

    81 |

    scrollbar

    82 |

    separator

    83 |

    slider

    84 |

    switch

    85 |

    tab

    86 |

    treeitem

    87 |

    doc-cover

    88 | 89 |

    with title

    90 |

    91 |

    92 |

    93 |

    94 |

    95 |

    96 |

    97 |

    98 |

    99 |

    100 |

    101 |

    102 |

    103 |

    104 |

    105 |

    106 |

    107 |

    108 | 109 |

    with aria-label

    110 |

    111 |

    112 |

    113 |

    114 |

    115 |

    116 |

    117 |

    118 |

    119 |

    120 |

    121 |

    122 |

    123 |

    124 |

    125 |

    126 |

    127 |

    128 | 129 |

    with aria-labelledby

    130 |

    131 |

    132 |

    133 |

    134 |

    135 |

    136 |

    137 |

    138 |

    139 |

    140 |

    141 |

    142 |

    143 |

    144 |

    145 |

    146 |

    147 |

    148 |
    149 | 150 |

    Expected result: 151 |
    No failures for use of ARIA roles would be flagged for any of the above examples. Use of img on a named image element is NOT RECOMMENDED. Confornamce checkers may indicate this as a warning.

    152 |
    153 | 154 |
    155 |

    Test 2

    156 |

    157 | Authors MUST NOT use roles other than none/presentation on an image with an empty alt and no accessible name, and MUST NOT use roles other than none/presentation or img if the element lacks an alt and has no accessible name. 158 |

    159 | 160 | 161 |
    162 | 163 | 164 | 165 | 166 | 167 |
    168 | 169 |

    Expected result: 170 |
    The above 5 examples should not fail allowed role rules. Conformance checkers may produce warnings for use of redundant roles on each of these examples.

    171 |
    172 |
    173 |
    174 | 175 | 176 | -------------------------------------------------------------------------------- /tests/input-image-reset-submit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ARIA in HTML - Test Cases 6 | 7 | 54 | 55 | 56 | 57 |
    58 |

    ARIA in HTML - test case for additional role allowances for button and input type=button elements

    59 |

    last updated 15 February 2023

    60 |
    61 |
    62 |

    Tests:

    63 | 64 |

    65 | Allowances for input type=reset, input type=image and type=submit 66 |

    67 |

    68 | Authors are allowed to use the roles 69 | button, checkbox, combobox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, slider, switch, tab or treeitem on a input type=reset, input type=image or input type=submit element. 70 |

    71 |

    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. 73 |

    74 |
    75 |
    76 |
    77 |

    input type=reset

    78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 |

    input type=submit

    94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 |

    input type=image

    110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 |
    125 | 126 |

    Expected result: 127 | These test cases would pass checks for an allowed role, but other failures would be expected for the instances where the elements are not contained or owned by their expected accessibility parents, or where they lack other expected properties required by authors. Note: there is no need to use a role=button on one of these elements, so while it's use is not recommended due to unnecessary redundncy, it is also not likely to cause issues. 128 |

    129 |
    130 | 131 |
    132 |
    133 |

    input type=reset

    134 | 135 | 136 | 137 |
    138 |
    139 | 140 |
    141 |
    142 | 143 |
    144 | 145 |
    146 |
    147 | 148 | 149 |
    150 |
    151 | 152 |
    153 | 154 | 155 | 156 |
    157 | 158 |
    159 |
    160 | 161 |
    162 | 163 |

    input type=submit

    164 | 165 | 166 | 167 |
    168 |
    169 | 170 |
    171 |
    172 | 173 |
    174 | 175 |
    176 |
    177 | 178 | 179 |
    180 |
    181 | 182 |
    183 | 184 | 185 | 186 |
    187 | 188 |
    189 |
    190 | 191 |
    192 | 193 | 194 |

    input type=image

    195 | 196 | 197 | 198 |
    199 |
    200 | 201 |
    202 |
    203 | 204 |
    205 | 206 |
    207 |
    208 | 209 | 210 |
    211 |
    212 | 213 |
    214 | 215 | 216 | 217 |
    218 | 219 |
    220 |
    221 | 222 |
    223 |
    224 | 225 |

    226 | Expected result: 227 | No errors would be expected for these test cases, as they meet all the necessary requirements for use of these roles (necessary nesting and required attributes). Conformance checkers could provide a warning or guidance to use a different HTML element as a base for these roles, if they so choose. 228 |

    229 |
    230 |
    231 |
    232 | 233 | 234 | -------------------------------------------------------------------------------- /tests/invalid-nesting-tests.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ARIA in HTML - Test Cases 6 | 7 | 55 | 56 | 57 |
    58 |

    ARIA in HTML - test cases for invalid nesting

    59 |

    last updated 26 March 2021

    60 |
    61 |
    62 |

    Tests:

    63 | 64 |
    65 |
    66 |

    Test 1

    67 |

    68 | Invalid child of role=article 69 |

    70 |
    71 |
    72 |
    main within role=article
    73 |
    74 |
    75 |

    Expectation: <main> not allowed as a child of role=article

    76 |
    77 | 78 |
    79 |

    Test 2

    80 |

    81 | Invalid children of role=banner 82 |

    83 |
    84 |
    85 |
    header
    86 |
    main
    87 |
    footer
    88 |
    89 |
    90 |

    Expectation: <main>, <header> and <footer> are not allowed as a child of role=banner.

    91 |
    92 | 93 |
    94 |

    Test 3

    95 |

    96 | Invalid children of role=contentinfo 97 |

    98 |
    99 |
    100 |
    header
    101 |
    main
    102 |
    footer
    103 |
    104 |
    105 |

    Expectation: <main>, <header> and <footer> are not allowed as a child of role=contentinfo.

    106 |
    107 | 108 |
    109 |
    110 | 111 | 121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /tests/max-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 | 47 |
    48 |

    ARIA in HTML - test cases for aria-valuemax

    49 |

    last updated 14 March 2021

    50 |

    51 | max is allowed on meter, progress and input type date, month, week, time, datetime-local, number, range. 52 |

    53 |
    54 |
    55 |

    Tests:

    56 | 57 |
    58 |
    59 |

    Test 1

    60 |

    61 | Authors SHOULD NOT use the aria-valuemax attribute on any element which allows the max attribute. Use the max attribute instead. 62 |

    63 | 64 |
    65 |

    inputs

    66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 |

    meter

    74 | 6 blocks used (out of 8 total) 75 |

    progress

    76 | 0% 77 |
    78 | 79 |

    Expected result: 80 |
    Flag error or warning to authors to use max attribute instead. Authors may not be able to replicate all the necessary functionality of the native max attribute.

    81 |
    82 | 83 |
    84 |

    Test 2

    85 |

    86 | Authors MUST NOT use the aria-valuemax on any element which also has a max attribute, even if the values of each attribute match. 87 |

    88 | 89 |
    90 |

    inputs

    91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 |

    meter

    99 | 6 blocks used (out of 8 total) 100 |

    progress

    101 | 0% 102 |
    103 | 104 |

    Expected result: 105 |
    Error and tell authors to use max attribute by itself. Authors may not be able to replicate all the necessary functionality of the native max attribute.

    106 |
    107 |
    108 |
    109 | 110 | 111 | -------------------------------------------------------------------------------- /tests/menu-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 51 | 52 | 53 | 54 |
    55 |

    ARIA in HTML - test cases for menu

    56 |

    last updated 28 February 2021

    57 |
    58 |
    59 |

    Tests:

    60 | 61 |
    62 |
    63 |

    Test 1

    64 |

    Authors can use directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, or tree on the menu element.

    65 | 66 |
    67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 |
    143 | 144 |
    145 | 146 | 147 | 148 |
    149 |
    150 | 151 | 152 | -------------------------------------------------------------------------------- /tests/min-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 | 47 |
    48 |

    ARIA in HTML - test cases for aria-valuemin

    49 |

    last updated 14 March 2021

    50 |

    51 | min is allowed on meter, and input type date, month, week, time, datetime-local, number, range. 52 |

    53 |
    54 |
    55 |

    Tests:

    56 | 57 |
    58 |
    59 |

    Test 1

    60 |

    61 | Authors SHOULD NOT use the aria-valuemin attribute on any element which allows the min attribute. Use the min attribute instead. 62 |

    63 | 64 |
    65 |

    inputs

    66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 |

    meter

    74 | 6 blocks used (out of 8 total) 75 |
    76 | 77 |

    Expected result: 78 |
    Flag error or warning to authors to use min attribute instead. Authors may not be able to replicate all the necessary functionality of the native min attribute.

    79 |
    80 | 81 |
    82 |

    Test 2

    83 |

    84 | Authors MUST NOT use the aria-valuemin on any element which also has a min attribute, even if the values of each attribute match. 85 |

    86 | 87 |
    88 |

    inputs

    89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 |

    meter

    97 | 6 blocks used (out of 8 total) 98 |
    99 | 100 |

    Expected result: 101 |
    Error and tell authors to use min attribute by itself. Authors may not be able to replicate all the necessary functionality of the native min attribute.

    102 |
    103 |
    104 |
    105 | 106 | 107 | -------------------------------------------------------------------------------- /tests/option-aria-select.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 | 47 |
    48 |

    ARIA in HTML - test cases for aria-selected on option element

    49 |

    last updated 9 March 2021

    50 |
    51 |
    52 |

    Tests:

    53 | 54 |
    55 |
    56 |

    Test 1

    57 |

    Authors SHOULD NOT use the aria-selected attribute on the option element.

    58 | 59 | 60 |
    61 | 65 |
    66 | 67 |

    Expected result: 68 |
    warn authors aria-selected is not to be used on native option elements

    69 |
    70 | 71 | 72 |
    73 |

    Test 2

    74 |

    Authors SHOULD NOT use the aria-selected attribute on the option element.

    75 | 76 | 77 |
    78 | 82 |
    83 | 84 |

    Expected result: 85 |
    warn authors aria-selected is not to be used on native option elements

    86 |
    87 | 88 | 89 |
    90 |

    Test 3

    91 |

    Authors SHOULD NOT use the aria-selected attribute on the option element.

    92 | 93 | 94 |
    95 | 96 | 97 | 98 | 99 | 100 |
    101 | 102 |

    Expected result: 103 |
    warn authors aria-selected is not to be used on native option elements

    104 |
    105 | 106 |
    107 |
    108 | 109 | 110 | -------------------------------------------------------------------------------- /tests/placeholder-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 |
    47 |

    ARIA in HTML - test case for aria-placeholder

    48 |

    last updated 28 February 2021

    49 |

    The placeholder attribute is allowed on input type=email, number, password, search, tel, text, url.

    50 | 51 |
    52 |
    53 |

    Tests:

    54 | 55 |
    56 |
    57 |

    Test 1

    58 |

    Authors MAY use the aria-placeholder attribute on any element that is allowed the placeholder attribute in HTML, or any element with a WAI-ARIA role which allows the aria-placeholder attribute.

    59 | 60 |

    The following inputs have aria-placeholder="test" set.

    61 | 62 |
    63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |
    72 | 73 |

    Expected result: 74 |
    No warning or error.

    75 |
    76 | 77 | 78 |
    79 |

    Test 2

    80 |

    Authors MUST NOT use the aria-placeholder attribute on any element which also has a placeholder attribute.

    81 | 82 |

    The following inputs have placeholder="test" and aria-placeholder="invalid" set.

    83 | 84 |
    85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 |
    94 | 95 |

    Expected result: 96 |
    Error for use of aria-placeholder when element has a placeholder attribute set.

    97 |
    98 | 99 |
    100 |
    101 | 102 | 103 | -------------------------------------------------------------------------------- /tests/prohibit-names.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 20 | 21 | 22 | 23 |
    24 |

    ARIA in HTML - test cases for elements which prohibit naming

    25 |

    last updated 12 March 2022

    26 |
    27 |
    28 |

    Tests:

    29 |

    30 | Each of the following test cases is an instance of an HTML element which either has an aria-labelledby or a aria-label attribute, which are not allowed for these elements with their implicit ARIA roles which prohibit naming. 31 |

    32 |

    Note: the body element of this page has an aria-label and aria-labelledby specified for checking purposes, as that element too is not allowed to be named by authors.

    33 | 34 | 35 | 36 |
    37 |

    a

    38 | fail 39 | fail 40 |
    41 | 42 |
    43 |

    abbr

    44 | fail 45 | fail 46 |
    47 | 48 |
    49 |

    address

    50 |
    fail
    51 |
    fail
    52 |
    53 | 54 |
    55 |

    area

    56 | fail 57 | fail 58 |
    59 | 60 |
    61 |

    autonomous custom element

    62 | fail 63 | fail 64 |
    65 | 66 |
    67 |

    b

    68 | fail 69 | fail 70 |
    71 | 72 |
    73 |

    bdi

    74 | fail 75 | fail 76 |
    77 | 78 |
    79 |

    bdo

    80 | fail 81 | fail 82 |
    83 | 84 |
    85 |

    caption

    86 | 87 | 88 | 89 |
    fail
    ...
    90 | 91 | 92 | 93 |
    fail
    ...
    94 |
    95 | 96 |
    97 |

    cite

    98 | fail 99 | fail 100 |
    101 | 102 |
    103 |

    code

    104 | fail 105 | fail 106 |
    107 | 108 |
    109 |

    data

    110 | fail 111 | fail 112 |
    113 | 114 |
    115 |

    del

    116 | fail 117 | fail 118 |
    119 | 120 |
    121 |

    div

    122 |
    fail
    123 |
    fail
    124 |
    125 | 126 |
    127 |

    em

    128 | fail 129 | fail 130 |
    131 | 132 |
    133 |

    figcaption

    134 |
    135 |
    test
    136 |
    fail
    137 |
    138 |
    139 |
    test
    140 |
    fail
    141 |
    142 | 143 |
    144 | 145 |
    146 |

    footer not scoped to body

    147 |
    148 |
    fail
    149 |
    fail
    150 |
    151 |
    152 | 153 |
    154 |

    header not scoped to body

    155 |
    156 |
    fail
    157 |
    fail
    158 |
    159 |
    160 | 161 |
    162 |

    hgroup

    163 |

    fail

    164 |

    fail

    165 |
    166 | 167 |
    168 |

    i

    169 | fail 170 | fail 171 |
    172 | 173 |
    174 |

    ins

    175 | fail 176 | fail 177 |
    178 | 179 |
    180 |

    kbd

    181 | fail 182 | fail 183 |
    184 | 185 |
    186 |

    label

    187 | 188 | 189 |
    190 | 191 |
    192 |

    legend

    193 |
    194 | fail 195 |
    196 |
    197 | fail 198 |
    199 |
    200 | 201 |
    202 |

    mark

    203 | fail 204 | fail 205 |
    206 | 207 |
    208 |

    p

    209 |

    fail

    210 |

    fail

    211 |
    212 | 213 |
    214 |

    pre

    215 | 
    fail
    216 | 
    fail
    217 |
    218 | 219 |
    220 |

    q

    221 | fail 222 | fail 223 |
    224 | 225 |
    226 |

    rt

    227 | 228 | ( 229 | fail 230 | ) 231 | 232 | 233 | ( 234 | fail 235 | ) 236 | 237 |
    238 | 239 |
    240 |

    s

    241 | fail 242 | fail 243 |
    244 | 245 |
    246 |

    samp

    247 | fail 248 | fail 249 |
    250 | 251 |
    252 |

    small

    253 | fail 254 | fail 255 |
    256 | 257 |
    258 |

    span

    259 | fail 260 | fail 261 |
    262 | 263 |
    264 |

    strong

    265 | fail 266 | fail 267 |
    268 | 269 |
    270 |

    sub

    271 | fail 272 | fail 273 |
    274 | 275 |
    276 |

    sup

    277 | fail 278 | fail 279 |
    280 | 281 |
    282 |

    time

    283 | 284 | 285 |
    286 | 287 |
    288 |

    u

    289 | fail 290 | fail 291 |
    292 | 293 |
    294 |

    var

    295 | fail 296 | fail 297 |
    298 | 299 |
    300 | 301 | 302 | -------------------------------------------------------------------------------- /tests/readonly-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 49 | 50 | 51 | 52 |
    53 |

    ARIA in HTML - test case for aria-readonly

    54 |

    last updated 28 February 2021

    55 |

    The readonly attribute is allowed on input type=text, search, url, tel, email, password, date, month, week, time, datetime-local, number. It is NOT RECOMMENDED to use aria-readonly on these elements.

    56 |

    aria-readonly=false is not allowed on an element with contenteditable.

    57 |
    58 |
    59 |

    Tests:

    60 | 61 |
    62 |
    63 |

    Test 1

    64 |

    Authors SHOULD NOT use the aria-readonly="true" on any element which also has a readonly attribute.

    65 | 66 |

    The following inputs have readonly and aria-readonly=true set.

    67 | 68 |
    69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 |
    83 | 84 |

    Expected result: 85 |
    warning for unnecessary use of aria-readonly=true when element has readonly.

    86 |
    87 | 88 |
    89 |

    Test 2

    90 |

    Authors MUST NOT use aria-readonly="false" on any element which also has a readonly attribute.

    91 | 92 |

    The following inputs have readonly and aria-readonly=false set.

    93 | 94 |
    95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 |
    109 | 110 |

    Expected result: 111 |
    error for use of aria-readonly=false which is in opposition of readonly

    112 |
    113 | 114 |
    115 |
    116 | 117 | 118 | -------------------------------------------------------------------------------- /tests/required-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 49 | 50 | 51 | 52 |
    53 |

    ARIA in HTML - test case for aria-required

    54 |

    last updated 14 March 2021

    55 |

    The required attribute is allowed on input, select and textarea.

    56 |
    57 |
    58 |

    Tests:

    59 | 60 |
    61 |
    62 |

    Test 1

    63 |

    Authors MAY use the aria-required attribute on any element that is allowed the required attribute in HTML, or any element with a WAI-ARIA role which allows the aria-required attribute.

    64 | 65 |

    The following testcase sets aria-required on each element which allows the required attribute in HTML. The required attribute is only allowed on inputs with type of checkbox, date, datetime-local, email, file, month, number, password, radio, search, tel, text, time, url, or week. 66 | 67 |

    68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
    87 | 88 |

    Expected result: 89 |
    No warning or error for use of aria-required on these elements.

    90 |
    91 | 92 |
    93 |

    Test 2

    94 |

    Authors SHOULD NOT use the aria-required="true" on any element which also has a required attribute.

    95 | 96 |
    97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
    116 | 117 |

    Expected result: 118 |
    Conformance checkers should warn authors about not using both attributes

    119 |
    120 | 121 |
    122 |

    Test 3

    123 |

    Authors MUST NOT use the aria-required="false" on any element which also has a required attribute.

    124 | 125 |
    126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 |
    145 | 146 |

    Expected result: 147 |
    Conformance checkers should indicate an error for use of these attributes with opposite values

    148 |
    149 | 150 |
    151 |
    152 | 153 | 154 | -------------------------------------------------------------------------------- /tests/rowspan-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 | 47 |
    48 |

    ARIA in HTML - test cases for aria-rowspan

    49 |

    last updated 18 August 2021

    50 |

    51 | rowspan is allowed on td and th elements 52 |

    53 |
    54 |
    55 |

    Tests:

    56 | 57 |
    58 |
    59 |

    Test 1

    60 | Edit: removed test. 61 |
    62 | 63 |
    64 |

    Test 2

    65 |

    Authors SHOULD NOT use the aria-rowspan. attribute on any element which also has a rowspan attribute.

    66 | 67 |

    The first th and td each have an aria-rowspan="1" and rowspan="1" attribute

    68 | 69 |
    70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
    header 1header 2
    Cell 1Cell 2
    79 |
    80 | 81 |

    Expected result: 82 |
    warning for unnecessary use of aria-rowspan when element has rowspan.

    83 |
    84 | 85 |
    86 |

    Test 3

    87 |

    Authors MUST NOT use aria-rowspan on any element which also has a rowspan attribute, and the values of each attribute do not match.

    88 | 89 |

    The first th and td each have an aria-rowspan="1" and rowspan="2" attribute

    90 | 91 |
    92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 |
    header 1header 2
    Cell 1Cell 2
    101 |
    102 | 103 |

    Expected result: 104 |
    error for use of aria-rowspan with value different than rowspan

    105 |
    106 |
    107 |
    108 | 109 | 110 | -------------------------------------------------------------------------------- /tests/select-multiselectable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 | 47 |
    48 |

    ARIA in HTML - test cases for select[aria-multiselectable]

    49 |

    last updated 28 February 2021

    50 |
    51 |
    52 |

    Tests:

    53 | 54 |
    55 |
    56 |

    Test 1

    57 |

    Authors SHOULD NOT use the aria-multiselectable attribute on a select element.

    58 | 59 |
    60 | 61 | 65 |
    66 | 67 |

    Expected result: 68 |
    warning or error that aria-multiselectable is invalid on a native select element

    69 |
    70 | 71 | 72 |
    73 |

    Test 2

    74 |

    Authors SHOULD NOT use the aria-multiselectable attribute on a select element.

    75 | 76 |
    77 | 78 | 82 |
    83 | 84 |

    Expected result: 85 |
    warning or error that aria-multiselectable is invalid on a native select element

    86 |
    87 | 88 | 89 |
    90 |

    Test 3

    91 |

    Authors SHOULD NOT use the aria-multiselectable attribute on a select element.

    92 | 93 |
    94 | 95 | 99 |
    100 | 101 |
    102 | 103 | 107 |
    108 | 109 |

    Expected result: 110 |
    warning or error that aria-multiselectable is invalid on a native select element

    111 |
    112 | 113 |
    114 |
    115 | 116 | 117 | -------------------------------------------------------------------------------- /tests/slot.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 | 47 |
    48 |

    ARIA in HTML - test cases for slot

    49 |

    last updated 28 February 2021

    50 |
    51 |
    52 |

    Tests:

    53 | 54 |
    55 |
    56 |

    Test 1

    57 |

    Authors cannot use role or aria-* attributes on the slot element.

    58 | 59 |
    60 |

    a template follows with slot elements which have ARIA role and aria-label attributes set.

    61 | 138 |
    139 | 140 |

    Expected result: 141 |
    Error that role and any other aria-* attribute is invalid on slot

    142 |
    143 | 144 | 145 | 146 |
    147 |
    148 | 149 | 150 | -------------------------------------------------------------------------------- /tests/summary-allowances.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 44 | 45 | 46 | 47 |
    48 |

    ARIA in HTML - test cases for summary

    49 |

    last updated 13 February 2023

    50 |
    51 |
    52 |

    Tests:

    53 | 54 |
    55 |
    56 |

    Test 1

    57 |

    Authors can't use aria-expanded or aria-pressed 58 | attributes on a summary element if it serves as the summary for its parent details element.

    59 | 60 |
    61 |

    An aria-expanded attribute is ignored by user agents

    62 |
    63 | 64 | has aria-expanded=false attribute 65 |
    66 |
    67 | 68 |
    69 |

    An aria-pressed attribute is ignored by user agents

    70 |
    71 | test 2 72 | has aria-pressed=true attribute 73 |
    74 |
    75 | 76 |

    Expected result: 77 |
    As these attributes presently have no negative impact on the user experience, it seems that at the very least, 78 | conformance checkers should produce a warning about their use, since these 'were' previously 'allowed' but likely 79 | served no practical value then either. However, a conformance checker may expose these attributes as an error as well, as other 80 | allowed attribute checks that already exist may expose similar errors. E.g., div aria-expanded=true is another example of 81 | an invalid attribute being used on a generic element.

    82 |
    83 | 84 |
    85 |

    Test 2

    86 |

    Authors MAY specify any role on a summary element, so long as that summary element is not the 'summay for its parent details'.

    87 | 88 |
    89 |

    The summary elements beyond the first instance do not pass the algorithm to be a summary for its parent details, 90 | so they are exposed as generic elements.

    91 |
    92 | no allowed role on this summary 93 | this summary has a paragraph role, which is fine. 94 | this summary has a button role, which is also fine. 95 |
    96 |
    97 | 98 |
    99 |

    The following summary element is not a child of a details element, and thus is implicitly exposed as a generic.

    100 | this summary has a paragraph role, which is fine. 101 |
    102 |

    Expected result: 103 |
    Conformance checkers need not throw an error for summary elements that are not the first 104 | instance of the element type within a details element, 105 | or are not a descendant element of a details element. 106 | 107 |

    108 | 109 |
    110 | 111 |
    112 |

    Test 3

    113 |

    Authors can use aria-disabled or aria-haspopup 114 | attributes on a summary element when it serves as the summary for its parent details element.

    115 | 116 |
    117 |

    Using an aria-disabled attribute is allowed

    118 |
    119 | test 1 120 | has aria-disabled=true attribute 121 |
    122 |
    123 | 124 |
    125 |

    Using an aria-haspopup attribute is allowed

    126 |
    127 | test 2 128 | has aria-haspopup=true attribute 129 |
    130 |
    131 | 132 |

    Expected result: 133 |
    The aria-disabled and aria-haspopup attributes both have good support and are valid to use on the summary element when it acts as the interactive trigger for the details/summary disclosure widget. Other checks may be necessary to ensure that developers are using these attributes correctly, but that is beyond the scope of what ARIA in HTML covers.

    134 |
    135 | 136 |
    137 |
    138 | 139 | 140 | -------------------------------------------------------------------------------- /tests/svg-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ARIA in HTML - Test Cases 5 | 6 | 51 | 52 | 53 | 54 |
    55 |

    ARIA in HTML - test cases for svg with role and aria-label

    56 |

    last updated 28 February 2021

    57 |
    58 |
    59 |

    Tests:

    60 | 61 |
    62 |
    63 |

    Test 1

    64 |

    Authors can use Any role or aria-* attributes on the svg element.

    65 | 66 |
    67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 |
    143 | 144 |

    Expected result: 145 |
    No errors/warnings for using any role / aria-* attribute on svg element.

    146 |
    147 | 148 | 149 | 150 |
    151 |
    152 | 153 | 154 | -------------------------------------------------------------------------------- /tests/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | aria role tests 6 | 7 | 13 | 14 | 15 | alert test 16 | 17 | 18 | 19 | 20 |
    alertdialog
    21 | 22 | 23 |
    application
    24 | 25 | 26 |
    article
    27 | 28 | 29 |
    banner
    30 | 31 | 32 |
    button
    33 | 34 | 35 |
    checkbox
    36 | 37 | 38 |
    columnheader
    39 | 40 | 41 |
    combobox
    42 | 43 | 44 |
    complementary
    45 | 46 | 47 |
    contentinfo
    48 | 49 | 50 |
    definition
    51 | 52 | 53 |
    dialog
    54 | 55 | 56 |
    directory
    57 | 58 | 59 |
    document
    60 | 61 | 62 |
    form
    63 | 64 | 65 |
    grid
    66 | 67 | 68 |
    gridcell
    69 | 70 | 71 |
    group
    72 | 73 | 74 |
    heading
    75 | 76 | 77 |
    img
    78 | 79 | 80 | 81 |
    link
    82 | 83 | 84 |
    list
    85 | 86 | 87 |
    listbox
    88 | 89 | 90 |
    listitem
    91 | 92 | 93 |
    log
    94 | 95 | 96 |
    main
    97 | 98 | 99 |
    marquee
    100 | 101 | 102 |
    math
    103 | 104 | 105 |
    menu
    106 | 107 | 108 |
    menubar
    109 | 110 | 111 |
    menuitem
    112 | 113 | 114 |
    menuitemcheckbox
    115 | 116 | 117 |
    menuitemradio
    118 | 119 | 120 |
    navigation
    121 | 122 |
    none
    123 | 124 |
    note
    125 | 126 | 127 |
    option
    128 | 129 | 130 |
    presentation
    131 | 132 | 133 |
    progressbar
    134 | 135 | 136 |
    radio
    137 | 138 | 139 |
    radiogroup
    140 | 141 | 142 |
    row
    143 | 144 | 145 |
    row group
    146 | 147 | 148 |
    region
    149 | 150 | 151 |
    rowheader
    152 | 153 | 154 |
    search
    155 | 156 | 157 |
    separator
    158 | 159 | 160 |
    slider
    161 | 162 | 163 |
    spinbutton
    164 | 165 | 166 |
    status
    167 | 168 | 169 |
    tab
    170 | 171 | 172 |
    tablist
    173 | 174 | 175 |
    tabpanel
    176 | 177 | 178 |
    textbox
    179 | 180 | 181 |
    timer
    182 | 183 | 184 |
    toolbar
    185 | 186 | 187 |
    tooltip
    188 | 189 | 190 |
    tree
    191 | 192 | 193 |
    treegrid
    194 | 195 | 196 |
    treeitem
    197 | 198 | 199 | 200 | -------------------------------------------------------------------------------- /tidyconfig.txt: -------------------------------------------------------------------------------- 1 | char-encoding: utf8 2 | indent: yes 3 | newline: LF 4 | tidy-mark: no 5 | wrap: 80 6 | -------------------------------------------------------------------------------- /w3c.json: -------------------------------------------------------------------------------- 1 | { 2 | "group": [ 3 | "83726" 4 | ], 5 | "contacts": [ 6 | "daniel-montalvo" 7 | ], 8 | "shortName": "html-aria", 9 | "repo-type": "rec-track" 10 | } 11 | --------------------------------------------------------------------------------