├── favicon.ico ├── assets ├── img │ ├── cross.png │ ├── rotor-chrome01.png │ ├── rotor-chrome02.png │ ├── rotor-chrome03.png │ ├── rotor-chrome04.png │ ├── rotor-firefox01.png │ ├── rotor-firefox02.png │ ├── rotor-firefox03.png │ ├── rotor-firefox04.png │ ├── rotor-safari01.png │ ├── rotor-safari02.png │ ├── rotor-safari03.png │ └── rotor-safari04.png └── masters │ └── voiceover.numbers ├── x-accessible-forms.sublime-project ├── README.md ├── debug.log ├── x-other-tests ├── link.html ├── image.html ├── xxx.html ├── alert02.html ├── alert01.html ├── andrew01.html ├── fieldset-button-test.html ├── badge01.html ├── empty-aria-label-test.html ├── select-test.html ├── andrew02.html ├── autocomplete-component-test.html ├── firefox-focus-test.html ├── line-break-in-legend-test.html ├── empty-id-name-attributes-test.html ├── space-inside-icon-test.html ├── content-injected.html ├── clickable-label-test.html ├── modal-test3.html ├── modal-test4.html ├── list-test.html ├── metadata-test.html ├── display-test.html ├── modal-test5.html ├── non-native-dropdown-test.html ├── metadata-test2.html ├── uppercase-test.html ├── greg-test.html ├── button-with-aria-label-test.html └── error-message-test.html ├── LICENSE ├── 04-button.html ├── 01-input-button.html ├── 01-input-submit.html ├── 01-input-reset.html ├── 01-input-file.html ├── 01-input-text.html ├── 01-input-email.html ├── 01-input-range.html ├── 01-input-radio.html ├── 01-input-checkbox.html ├── 01-input-url.html ├── 03-textarea.html ├── 01-input-color.html ├── 01-input-tel.html ├── 01-input-number.html ├── invalid02.html ├── 01-input-search.html ├── accessible-description-link03.html ├── 01-input-time.html ├── 01-input-password.html ├── 01-input-week.html ├── 01-input-date.html ├── 01-input-month.html ├── accessible-description-button03.html ├── voiceover01.html ├── 01-input-datetime-local.html ├── voiceover02.html ├── landmarks-form.html ├── invalid01.html ├── landmarks-banner03.html ├── required02.html ├── landmarks-banner19.html ├── accessible-description-link02.html ├── landmarks-footer01.html ├── landmarks-section01.html ├── disabled01.html ├── voiceover04.html ├── landmarks-main01.html ├── landmarks-footer02.html ├── landmarks-section02.html ├── landmarks-search.html ├── 02-select.html ├── landmarks-banner01.html ├── landmarks-main02.html ├── landmarks-banner15.html ├── landmarks-banner02.html ├── landmarks-banner11.html ├── landmarks-banner07.html ├── accessible-description-button02.html ├── landmarks-nav01.html ├── voiceover03.html ├── accessible-description-link01.html ├── accessible-description-input03.html ├── landmarks-aside01.html ├── landmarks-nav02.html ├── support-readonly-fields.html ├── attributes09.html ├── landmarks-search02.html ├── disabled02.html ├── landmarks-aside02.html ├── fieldset-buttons.html ├── input-help-text-aria-label.html ├── invalid03.html └── landmarks-article01.html /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russmaxdesign/accessible-forms/HEAD/favicon.ico -------------------------------------------------------------------------------- /assets/img/cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russmaxdesign/accessible-forms/HEAD/assets/img/cross.png -------------------------------------------------------------------------------- /x-accessible-forms.sublime-project: -------------------------------------------------------------------------------- 1 | { 2 | "folders": 3 | [ 4 | { 5 | "path": "." 6 | } 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /assets/img/rotor-chrome01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russmaxdesign/accessible-forms/HEAD/assets/img/rotor-chrome01.png -------------------------------------------------------------------------------- /assets/img/rotor-chrome02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russmaxdesign/accessible-forms/HEAD/assets/img/rotor-chrome02.png -------------------------------------------------------------------------------- /assets/img/rotor-chrome03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russmaxdesign/accessible-forms/HEAD/assets/img/rotor-chrome03.png -------------------------------------------------------------------------------- /assets/img/rotor-chrome04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russmaxdesign/accessible-forms/HEAD/assets/img/rotor-chrome04.png -------------------------------------------------------------------------------- /assets/img/rotor-firefox01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russmaxdesign/accessible-forms/HEAD/assets/img/rotor-firefox01.png -------------------------------------------------------------------------------- /assets/img/rotor-firefox02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russmaxdesign/accessible-forms/HEAD/assets/img/rotor-firefox02.png -------------------------------------------------------------------------------- /assets/img/rotor-firefox03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russmaxdesign/accessible-forms/HEAD/assets/img/rotor-firefox03.png -------------------------------------------------------------------------------- /assets/img/rotor-firefox04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russmaxdesign/accessible-forms/HEAD/assets/img/rotor-firefox04.png -------------------------------------------------------------------------------- /assets/img/rotor-safari01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russmaxdesign/accessible-forms/HEAD/assets/img/rotor-safari01.png -------------------------------------------------------------------------------- /assets/img/rotor-safari02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russmaxdesign/accessible-forms/HEAD/assets/img/rotor-safari02.png -------------------------------------------------------------------------------- /assets/img/rotor-safari03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russmaxdesign/accessible-forms/HEAD/assets/img/rotor-safari03.png -------------------------------------------------------------------------------- /assets/img/rotor-safari04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russmaxdesign/accessible-forms/HEAD/assets/img/rotor-safari04.png -------------------------------------------------------------------------------- /assets/masters/voiceover.numbers: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/russmaxdesign/accessible-forms/HEAD/assets/masters/voiceover.numbers -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # accessible-forms 2 | A series of simple tests on accessible form controls 3 | 4 | https://russmaxdesign.github.io/accessible-forms/. 5 | -------------------------------------------------------------------------------- /debug.log: -------------------------------------------------------------------------------- 1 | [0228/223613.424:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 2 | [0301/080009.874:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 3 | [0302/212948.423:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 4 | [0302/235628.511:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 5 | [0303/001857.982:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 6 | -------------------------------------------------------------------------------- /x-other-tests/link.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Link test 7 | 8 | 9 | 10 |
11 |

Link tes

12 |

← Index page

13 |
14 | 15 |

Link 1

16 |

Link 2

17 | 18 |
19 |

← Index page

20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /x-other-tests/image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image test 7 | 8 | 9 | 10 |
11 |

Image test

12 |

← Index page

13 |
14 | 15 |

Test 1

16 | 17 | 18 |

Test 2

19 | 20 | 21 |

Test 3

22 | 23 | 24 | 25 |
26 |

← Index page

27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Russ Weakley 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /x-other-tests/xxx.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DIV inside BUTTON test 7 | 8 | 9 | 10 |

DIV inside BUTTON test

11 |

Dummy link before

12 | 13 |
14 |
15 | Policy excess currently set to: 16 | $500 17 |
18 |
19 | 22 | 25 |
26 |
27 | 28 | 29 |

Dummy link after

30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /x-other-tests/alert02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Alert test 02 7 | 8 | 23 | 24 | 25 |
26 |

Alert test 02

27 |

← Index page

28 |
29 | 30 |
31 | 32 |
33 |

Do you need eggs?

34 |
35 |

Everyone needs eggs from the shops

36 |
37 |
38 |
39 | 40 |
41 |

← Index page

42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /x-other-tests/alert01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Alert test 01 7 | 8 | 23 | 24 | 25 |
26 |

Alert test 01

27 |

← Index page

28 |
29 | 30 |
31 | 32 |
33 |

Do you need eggs?

34 |
35 |

Everyone needs eggs from the shops

36 |
37 |
38 |
39 | 40 |
41 |

← Index page

42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /x-other-tests/andrew01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Andrew test 1 7 | 8 | 16 | 17 | 18 |
19 |

Andrew test 1

20 |

← Index page

21 |

In this first example, the <div> with an id of one does not receive focus on initial page load.

22 |
23 | 24 | 27 |

Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Nemo ducimus provident corporis vitae voluptatum exercitationem, officia accusantium et soluta iure dolore repellendus cupiditate quaerat dolorem qui ratione incidunt? Voluptatibus, recusandae.

28 | 29 |
30 |

← Index page

31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /x-other-tests/fieldset-button-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fieldset test 7 | 8 | 9 | 10 |
11 |

Fieldset test

12 |

← Index page

13 |

This test is to determine if Firefox and Safari will allow focus on links, form controls and buttons.

14 |
15 | 16 |

Example

17 |
18 |
19 | Choose a method 20 | 21 | 22 |
23 |
24 |

Code

25 | 
<form action="#">
26 |   <fieldset>
27 |     <legend>Choose a method</legend>
28 |     <button class="button">Australia only</button>
29 |     <button class="button">Overseas</button>
30 |   </fieldset>
31 | </form>
32 |

← Index page

33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /x-other-tests/badge01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Badge test 01 7 | 8 | 15 | 16 | 17 |
18 |

Badge test 01

19 |

← Index page

20 |
21 | 22 |

Badges in current form

23 |
Apple
24 |
Banana
25 |
Watermelon
26 |
Grape
27 | 28 |

Badges without status

29 |
Dog
30 |
Cat
31 |
Fish
32 |
Rabbit
33 | 34 |
35 |

← Index page

36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /x-other-tests/empty-aria-label-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Empty aria-label test 7 | 8 | 9 | 10 |
11 |

Empty aria-label test

12 |

← Index page

13 |

To determine if an empty aria-label attribute is announced to assistive technologies, or affects the accessible name.

14 |
15 | 16 |

Example 01: empty aria-label attribute

17 | 18 |

Code

19 | 
<button aria-label="">Test one</button>
20 |

Dummy link after

21 |
22 | 23 |

Results

24 | 28 |

29 |

← Index page

30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /x-other-tests/select-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | select test 7 | 8 | 9 | 10 |
11 |

<select> test

12 |

← Index page

13 |

This test is to determine if the label is announced when associated with a <select> element.

14 |
15 | 16 |

Example

17 |
18 | 19 | 25 |
26 |

Code

27 | 
<form action="#">
28 |   <label for="one">Subscribe</label>
29 |   <select id="one">
30 |     <option>Choose an option</option>
31 |     <option value="red">Red</option>
32 |     <option value="green">Green</option>
33 |     <option value="blue">Blue</option>
34 |   </select>
35 | </form>
36 |

← Index page

37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /x-other-tests/andrew02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Andrew test 2 7 | 8 | 16 | 24 | 25 | 26 |
27 |

Andrew test 2

28 |

← Index page

29 |

In this second example, the <div> with an id of two receives focus on initial page load.

30 |
31 | 32 | 35 |

Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Nemo ducimus provident corporis vitae voluptatum exercitationem, officia accusantium et soluta iure dolore repellendus cupiditate quaerat dolorem qui ratione incidunt? Voluptatibus, recusandae.

36 | 37 |
38 |

← Index page

39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /x-other-tests/autocomplete-component-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Autocomplete component test 7 | 8 | 9 | 10 |
11 |

Autocomplete component test

12 |

← Index page

13 |

To determine how the autocomplete <label> is announced in relation to the form control.

14 |
15 | 16 |

Example

17 |
18 | 21 |
22 |
23 |
24 | 25 |
26 |
27 |
28 | 29 |
30 |
31 |
32 |
33 |
34 |

← Index page

35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /x-other-tests/firefox-focus-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Firefox and Safari focus test 7 | 8 | 9 | 10 |
11 |

Firefox and Safari focus test

12 |

← Index page

13 |

This test is to determine if Firefox and Safari will allow focus on links, form controls and buttons.

14 |
15 | 16 |

Example

17 |
18 |
19 | 20 | 21 |
22 | 23 |
24 |

Code

25 | 
<form action="#">
26 |   <div>
27 |     <label for="form-name">Name</label>
28 |     <input id="form-name" type="text" autocomplete="name">
29 |   </div>
30 |   <button>Submit</button>
31 | </form>
32 |

Dummy link after

33 |
34 | 35 |

Resources

36 | 40 |

← Index page

41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /x-other-tests/line-break-in-legend-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Line break inside a Legend test 7 | 8 | 9 | 10 |
11 |

Line break inside a <legend> test

12 |

← Index page

13 |

This test is to determine if line breaks are allowed inside the <legend> element. This is based on the W3C content model, which defines content that must be included as children and descendants of the element.

14 |
15 | 16 |

Example

17 |
18 |
19 | Something
Another thing 20 |
21 |
22 | 
<form action="#">
23 |   <fieldset>
24 |     <legend>Something<br> Another thing</legend>
25 |   </fieldset>
26 | </form>
27 |

Dummy link after

28 |
29 | 30 |

Results

31 |

The <legend> element can contain phrasing content, optionally intermixed with heading content.

32 |

← Index page

33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /04-button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | button 6 | 7 | 8 | 9 | 10 | 11 |

<button>

12 |

← Return to main list

13 |

This is a test case designed to determine how the <button> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 |
19 |
20 |

Code

21 | 22 | 
<button>Submit</button>
23 | 24 |

Assistive technologies

25 |
26 |

VoiceOver

27 | 32 |
33 |
34 |

NVDA

35 | 40 |
41 |
42 |

JAWS

43 | 48 |
49 |

← Return to main list

50 | 51 | 52 | -------------------------------------------------------------------------------- /01-input-button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="button" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="button">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="button"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 |
19 |
20 |

Code

21 | 22 | 
<input type="button" value="Login">
23 | 24 |

Assistive technologies

25 |
26 |

VoiceOver

27 | 32 |
33 |
34 |

NVDA

35 | 40 |
41 |
42 |

JAWS

43 | 48 |
49 |

← Return to main list

50 | 51 | 52 | -------------------------------------------------------------------------------- /x-other-tests/empty-id-name-attributes-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Empty id and name attributes tests 7 | 8 | 9 | 10 |
11 |

Empty id and name attributes tests

12 |

← Index page

13 |

To determine if id and name attributes are considered invalid if written as boolean attributes, or attributes with blank values.

14 |
15 | 16 |

Example 01: id and name attributes without values

17 | 18 |

Code

19 | 
<button id name aria-label="">Test one</button>
20 |

Dummy link after

21 |
22 | 23 |

Example 02: empty id and name attributes

24 | 25 |

Code

26 | 
<button id="" name="" aria-label="">Test two</button>
27 |

Dummy link after

28 |
29 | 30 |

Results

31 |

Both methods are considered invalid.

32 | 37 |

← Index page

38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /x-other-tests/space-inside-icon-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Space inside icon test 7 | 8 | 9 | 10 |
11 |

Space inside icon test

12 |

← Index page

13 |

This test is to determine if a non-breaking space inside an icon is announced to screen readers.

14 |
15 | 16 |

Example 01: icon with space

17 |

Some text before icon:  

18 |

Code

19 | 
Some text before icon: <i> </i>
20 |

Dummy link after

21 |
22 | 23 |

Example 01: icon with space

24 |

Some text before icon:

25 |

Code

26 | 
Some text before icon: <i aria-hidden="true"> </i>
27 |

Dummy link after

28 |
29 | 30 |

Results

31 | 36 |

Recommendation: Apply aria-hidden="true" to hide the element from the Accessibility Tree.

37 |

← Index page

38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /01-input-submit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="submit" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="submit">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="submit"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 |
19 |
20 |

Code

21 | 22 | 
<input type="submit" value="Logout">
23 | 24 |

Assistive technologies

25 |
26 |

VoiceOver

27 | 32 |
33 |
34 |

NVDA

35 | 40 |
41 |
42 |

JAWS

43 | 48 |
49 |

← Return to main list

50 | 51 | 52 | -------------------------------------------------------------------------------- /01-input-reset.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="reset" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="reset">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="reset"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 |
19 |
20 |

Code

21 | 22 | 
<input type="reset" value="Start over">
23 | 24 |

Assistive technologies

25 |
26 |

VoiceOver

27 | 32 |
33 |
34 |

NVDA

35 | 40 |
41 |
42 |

JAWS

43 | 48 |
49 |

← Return to main list

50 | 51 | 52 | -------------------------------------------------------------------------------- /x-other-tests/content-injected.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Using role="alert" 6 | 7 | 8 | 9 | 38 | 39 | 40 |

Using role="alert"

41 |

List of all exercises

42 |

Example

43 | 44 | 45 |
46 | 47 | 48 |

It was the best of times, it was the worst of times, it was the age 49 | of wisdom, it was the age of foolishness, it was the epoch of belief, 50 | it was the epoch of incredulity, it was the season of Light, it was 51 | the season of Darkness, it was the spring of hope, it was the winter 52 | of despair, we had everything before us, we had nothing before us, 53 | we were all going direct to Heaven, we were all going direct the 54 | other way.

55 |

List of all exercises

56 | 57 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /x-other-tests/clickable-label-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Clickable label test 7 | 8 | 9 | 10 |
11 |

Clickable <label> test

12 |

← Index page

13 |

These tests are to determine whether the <label> contents are clickable as well as the form control itself when the <label> is wrapped or unwrapped.

14 |

15 | 16 |

Example 01: Unwrapped <label>

17 |
18 | 19 | 20 |
21 |

Code

22 | 
<form action="#">
23 |   <input id="one" type="checkbox">
24 |   <label for="one">Subscribe</label>
25 | </form>
26 |

Dummy link after

27 |
28 | 29 |

Example 02: Wrapped <label>

30 |
31 | 35 |
36 |

Code

37 | 
<form action="#">
38 |   <label for="two">
39 |     <input id="two" type="checkbox">
40 |     Subscribe
41 |   </label>
42 | </form>
43 |

Dummy link after

44 |
45 | 46 |

Results

47 |

All modern browsers include the <label> and checkbox as triggers to change the state of the checkbox.

48 |

← Index page

49 |
50 | 51 | 52 | -------------------------------------------------------------------------------- /x-other-tests/modal-test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modal test 3 7 | 8 | 9 | 10 |
11 |

Modal test 3

12 |

← Index page

13 | 14 |
15 |
16 |

Chat with us

17 | 20 |
21 |
22 |
23 |
24 |
25 |
26 | What can we help you with? 27 |
    28 |
  • 29 | 30 | 31 |
    • 32 |
  • 33 | 34 | 35 |
    • 36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | 44 | 45 | 46 |

← Index page

47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /x-other-tests/modal-test4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modal test 4 7 | 8 | 9 | 10 |
11 |

Modal test 4

12 |

← Index page

13 | 14 | 43 | 44 | 45 | 46 |

← Index page

47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /01-input-file.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input="file" 6 | 7 | 8 | 9 | 10 | 11 |

<input="file">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="file"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="file">Choose a file</label>
25 |   <input type="file" id="file">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /x-other-tests/list-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Paragraph inside list item test 7 | 8 | 9 | 10 |
11 |

Paragraph inside list item test

12 |

← Index page

13 |

This test is to determine if the <p> element is considered valid when placed inside an <li> element. This is based on the W3C content model, which defines content that must be included as children and descendants of the element.

14 |
15 | 16 |

Example

17 | 25 |

Code

26 | 
<ul>
27 |   <li>
28 |     <p>Lorem ipsum dolor...</p>
29 |   </li>
30 |   <li>
31 |     <p>Lorem ipsum dolor...</p>
32 |   </li>
33 | </ul>
34 |

Dummy link after

35 |
36 | 37 |

Results

38 |

The <li> element can contain any flow content.

39 |

← Index page

40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /x-other-tests/metadata-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Metadata validation test 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Metadata validation test

19 |

← Index page

20 |

This test is to determine which IAG metadata elements are valid.

21 |
22 | 23 |

Example

24 | 
<meta name="description" content="IAG CTP Insurance">
25 | <meta name="keywords" content="CTP, Insurance">
26 | <meta name="author" content="IAG">
27 | <meta name="viewport" content="width=device-width">
28 | <meta http-equiv="expires" content="0">
29 | <meta http-equiv="Pragma" content="no-cache">
30 |

Dummy link after

31 |
32 | 33 |

Results

34 |

These two should be removed:

35 | 
<meta http-equiv="expires" content="0">
36 | <meta http-equiv="Pragma" content="no-cache">
37 |

The http-equiv only allows thw following values:

38 | 45 |

← Index page

46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /x-other-tests/display-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | aria-hidden="true", hidden and display:none tests 7 | 8 | 9 | 10 |
11 |

aria-hidden="true", hidden and display:none tests

12 |

← Index page

13 |

These tests are to determine how aria-hidden="true" and hidden attributes, as well as the display: none CSS property are applied visually as well as how they are announced to screen readers.

14 |
15 | 16 |

The aria-hidden="true" attribute

17 |

The following information should be visible on screen but not announced to screen readers.

18 |

.

19 |

Code

20 | 
<span aria-hidden="true">Green spider</span>
21 |

Dummy link after

22 |
23 | 24 |

The hidden attribute

25 |

The following information should not be visible on screen and not announced to screen readers.

26 |

.

27 |

Code

28 | 
<span hidden>Yellow frog</span>
29 |

Dummy link after

30 |
31 | 32 |

The display:none CSS property/value

33 |

The following information should not be visible on screen and not announced to screen readers.

34 |

Red wolf.

35 |

Code

36 | 
<span style="display: none;">Red wolf</span>
37 |

← Index page

38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /01-input-text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="text" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="text">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="text"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="name">Full name</label>
25 |   <input type="text" id="name">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /x-other-tests/modal-test5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modal test 5 7 | 8 | 9 | 10 |
11 |

Modal test 5

12 |

← Index page

13 | 14 |
15 | 16 |
17 | 18 | 19 |
20 |
21 |

Chat with us

22 | 25 |
26 |
27 |
28 |
29 |
30 |
31 | What can we help you with? 32 | 42 |
43 |
44 |
45 |
46 |
47 |
48 | 49 | 50 | 51 |

← Index page

52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /01-input-email.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="email" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="email">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="email"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="email">Email address</label>
25 |   <input type="email" id="email">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /01-input-range.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="range" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="range">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="range"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="range">Choose a range</label>
25 |   <input type="range" id="range">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /01-input-radio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="radio" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="radio">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="radio"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <input type="radio" id="yes">
25 |   <label for="yes">Yes</label>
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /01-input-checkbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="checkbox" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="checkbox">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="checkbox"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <input type="checkbox" id="subscribe">
25 |   <label for="subscribe">Subscribe</label>
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /01-input-url.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="url" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="url">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="url"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="url">Enter web address</label>
25 |   <input type="url" id="url">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /03-textarea.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | textarea 6 | 7 | 8 | 9 | 10 | 11 |

<textarea>

12 |

← Return to main list

13 |

This is a test case designed to determine how the <textarea> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="comment">Add a comment</label>
25 |   <textarea id="comment" rows="10"></textarea>
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /01-input-color.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="color" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="color">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="color"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="color">Choose a color</label>
25 |   <input type="color" id="color">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /01-input-tel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="tel" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="tel">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="tel"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="tel">Enter phone number</label>
25 |   <input type="tel" id="tel">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /x-other-tests/non-native-dropdown-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Non-native dropdown test 7 | 8 | 9 | 10 |
11 |

Non-native dropdown test

12 |

← Index page

13 |

These tests are to determine how different online examples mark up non-native dropdown lists.

14 |
15 | 16 |

Example 01: <li> items

17 | 18 | 25 |

Code

26 | 
<button
27 |   aria-haspopup="listbox"
28 |   aria-labelledby="aaa bbb"
29 |   id="aaa"
30 | >
31 |   Choose a fruit
32 | </button>
33 | <ul role="listbox" aria-activedescendant="bbb">
34 |   <li id="bbb" role="option" aria-selected="true">Apple</li>
35 |   <li id="ccc" role="option">Banana</li>
36 | </ul>
37 |

Dummy link after

38 |
39 | 40 |

Example 02: <a> items

41 | 42 | 46 |

Code

47 | 
<button role="combobox">Choose a fruit</button>
48 | <ul role="presentation">
49 |   <li><a role="option" aria-selected="true" href="#">Apple</a></li>
50 |   <li><a role="option" href="#">Banana</a></li>
51 | </ul>
52 |

← Index page

53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /01-input-number.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="number" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="number">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="number"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="number">Choose a number</label>
25 |   <input type="number" id="number">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /invalid02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input with aria-invalid="false" 6 | 7 | 8 | 9 | 10 | 11 |

<input> with aria-invalid="false"

12 |

← Return to main list

13 |

This is a test case designed to determine how the aria-invalid attribute, applied to the <input> element, is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="name">Name</label>
25 |   <input type="text" id="name" aria-invalid="false">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /01-input-search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="search" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="search">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="search"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="search">Search the site</label>
25 |   <input type="search" id="search">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /accessible-description-link03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | a with no accessible description 6 | 7 | 8 | 9 | 10 | 11 |

<a> with no accessible description

12 |

← Return to main list

13 |

The purpose this test is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <a> element. The priority order from highest to lowest is:

14 |
    15 |
  1. If present, use aria-describedby value (as per the "Cat" example below).
    2. 16 |
  2. Otherwise, if present, use title value.
    3. 17 |
  3. If none of the above are provided, there is no accessible description.
    4. 18 |
19 |

This example should not be considered proper practice, and is for testing purposes only.

20 |

Example

21 |
22 |
23 | Fish 24 |
25 |
26 |

Code

27 | 28 | 
<a href="#">Fish</a>
29 | 30 |

Assistive technologies

31 |
32 |

VoiceOver

33 | 37 |
38 |
39 |

NVDA

40 | 45 |
46 |
47 |

JAWS

48 | 53 |
54 |

← Return to main list

55 | 56 | 57 | -------------------------------------------------------------------------------- /01-input-time.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="time" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="time">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="time"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="time">Choose a time</label>
25 |   <input type="time" id="time">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /x-other-tests/metadata-test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Metadata validation test 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |

Metadata validation test

22 |

← Index page

23 |

This test is to determine which IAG metadata elements are valid.

24 |
25 | 26 |

Example

27 | 
<meta name="description" content="IAG CTP Insurance">
28 | <meta name="keywords" content="CTP, Insurance">
29 | <meta name="author" content="IAG">
30 | <meta name="viewport" content="width=device-width">
31 | <meta http-equiv="expires" content="0">
32 | <meta http-equiv="Pragma" content="no-cache">
33 |

Dummy link after

34 |
35 | 36 |

Results

37 |

These two should be removed:

38 | 
<meta http-equiv="expires" content="0">
39 | <meta http-equiv="Pragma" content="no-cache">
40 |

The http-equiv only allows thw following values:

41 | 48 |

← Index page

49 |
50 | 51 | 52 | -------------------------------------------------------------------------------- /01-input-password.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="password" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="password">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="password"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="password">Enter password</label>
25 |   <input type="password" id="password">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /01-input-week.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="week" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="week">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="week"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="week">Choose a week</label>
25 |   <input type="week" id="week">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /01-input-date.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="date" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="date">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="date"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="date">Choose a date</label>
25 |   <input type="date" id="date">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /01-input-month.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="month" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="month">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="month"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="month">Choose a month</label>
25 |   <input type="month" id="month">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /accessible-description-button03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | button with no accessible description 6 | 7 | 8 | 9 | 10 | 11 |

<button> with no accessible description

12 |

← Return to main list

13 |

The purpose this test is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <button> element. The priority order from highest to lowest is:

14 |
    15 |
  1. If present, use aria-describedby value.
    2. 16 |
  2. Otherwise, if present, use title value (as per the "Rabbit" example below).
    3. 17 |
  3. If none of the above are provided, there is no accessible description.
    4. 18 |
19 |

This example should not be considered proper practice, and is for testing purposes only.

20 |

Example

21 |
22 |
23 | 24 |
25 |
26 |

Code

27 | 28 | 
<button>Fish</button>
29 | 30 |

Assistive technologies

31 |
32 |

VoiceOver

33 | 38 |
39 |
40 |

NVDA

41 | 46 |
47 |
48 |

JAWS

49 | 54 |
55 |

← Return to main list

56 | 57 | 58 | -------------------------------------------------------------------------------- /voiceover01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | VoiceOver test without ARIA 6 | 7 | 8 | 9 | 10 | 11 |

VoiceOver test without ARIA

12 |

← Return to main list

13 |

This test case is designed to determine how landmark elements are displayed in VoiceOver's Rotor Landmark list.

14 |

Example

15 |
16 |
17 |

Red

18 |
19 |
20 |

Orange

21 |
22 | 25 | 28 |
29 |

Blue

30 |
31 | 34 |
35 |

Code

36 | 37 | 
<header>
38 |   <h4>Red</h4>
39 | </header>
40 | <main>
41 |   <h4>Orange</h4>
42 | </main>
43 | <aside>
44 |   <h4>Yellow</h4>
45 | </aside>
46 | <nav>
47 |   <h4>Green</h4>
48 | </nav>
49 | <article>
50 |   <h4>Blue</h4>
51 | </article>
52 | <footer>
53 |   <h4>Violet</h4>
54 | </footer>
55 | 56 |

Results

57 |
58 | Chome Rotor Landmarks View 59 |
Chome Rotor Landmarks View
60 |
61 |
62 | Firefox Rotor Landmarks View 63 |
Firefox Rotor Landmarks View
64 |
65 |
66 | Safari Rotor Landmarks View 67 |
Safari Rotor Landmarks View
68 |
69 |

VoiceOver Rotor support chart

70 |

← Return to main list

71 | 72 | 73 | -------------------------------------------------------------------------------- /01-input-datetime-local.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input type="datetime-local" 6 | 7 | 8 | 9 | 10 | 11 |

<input type="datetime-local">

12 |

← Return to main list

13 |

This is a test case designed to determine how the <input type="datetime-local"> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="datetime-local">Choose a date/time</label>
25 |   <input type="datetime-local" id="datetime-local">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /voiceover02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | VoiceOver test with ARIA roles 6 | 7 | 8 | 9 | 10 | 11 |

VoiceOver test with ARIA roles

12 |

← Return to main list

13 |

This test case is designed to determine how landmark elements are displayed in VoiceOver's Rotor Landmark list.

14 |

Example

15 |
16 | 19 |
20 |

Orange

21 |
22 | 25 | 28 |
29 |

Blue

30 |
31 | 34 |
35 |

Code

36 | 37 | 
<header role="banner">
38 |   <h4>Red</h4>
39 | </header>
40 | <main role="main">
41 |   <h4>Orange</h4>
42 | </main>
43 | <aside role="complementary">
44 |   <h4>Yellow</h4>
45 | </aside>
46 | <nav role="navigation">
47 |   <h4>Green</h4>
48 | </nav>
49 | <article>
50 |   <h4>Blue</h4>
51 | </article>
52 | <footer role="contentinfo">
53 |   <h4>Violet</h4>
54 | </footer>
55 | 56 |

Results

57 |
58 | Chome Rotor Landmarks View 59 |
Chome Rotor Landmarks View
60 |
61 |
62 | Firefox Rotor Landmarks View 63 |
Firefox Rotor Landmarks View
64 |
65 |
66 | Safari Rotor Landmarks View 67 |
Safari Rotor Landmarks View
68 |
69 |

VoiceOver Rotor support chart

70 |

← Return to main list

71 | 72 | 73 | -------------------------------------------------------------------------------- /landmarks-form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | role="form" 6 | 7 | 8 | 9 | 10 | 11 |

role="form"

12 |

← Return to main list

13 |

This test case is designed to determine how role="form" is announced by various screen readers.

14 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

15 | 19 |

Example

20 |
21 |
22 |
23 | Test content 24 |
25 |
26 |
27 |

Code

28 | 29 | 
<div role="form">
30 |   <form action="#">
31 |     Test content
32 |   </form>
33 | </div>
34 | 35 |

Assistive technologies

36 |
37 |

VoiceOver

38 | 43 |
44 |
45 |

NVDA

46 | 51 |
52 |
53 |

JAWS

54 | 59 |
60 |

← Return to main list

61 | 62 | 63 | -------------------------------------------------------------------------------- /x-other-tests/uppercase-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Uppercase conversion in form controls test 7 | 8 | 31 | 32 | 33 |
34 |

Uppercase conversion in form controls test

35 |

← Index page

36 |

This is Andrew's quick and nasty lower to uppercase conversion to determine if screen readers announce uppercase lettering. The second input will change all characters to uppercase onchange.

37 |
38 | 39 |

Example

40 |
41 |
42 | 43 | 44 |
45 |
46 | 47 | 48 |
49 | 50 |
51 |

52 |

← Index page

53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /invalid01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input with aria-invalid="true" 6 | 7 | 8 | 9 | 10 | 11 |

<input> with aria-invalid="true"

12 |

← Return to main list

13 |

This is a test case designed to determine how the aria-invalid attribute, applied to the <input> element, is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="name">Name</label>
25 |   <input type="text" id="name" aria-invalid="true">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /landmarks-banner03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | header descendant of article 6 | 7 | 8 | 9 | 10 | 11 |

<header> descendant of <article>

12 |

← Return to main list

13 |

This test case is designed to determine how the <header> element will be announced by various screen readers when it is a descendant of the <article> element.

14 |

In this case, the element should not be announced as a banner landmark, as it is not scoped to the <body> element, it is scoped to the <article> element

15 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

16 | 20 |

Example

21 |
22 |
23 |

Other content

24 |
25 |

Test content

26 |
27 |
28 |
29 |

Code

30 | 31 | 
<article>
32 |   Other content
33 |   <header>
34 |     <h4>Test content</h4>
35 |   </header>
36 | </article>
37 | 38 |

Assistive technologies

39 |
40 |

VoiceOver

41 | 46 |
47 |
48 |

NVDA

49 | 54 |
55 |
56 |

JAWS

57 | 62 |
63 |

← Return to main list

64 | 65 | 66 | -------------------------------------------------------------------------------- /required02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input with "aria-required" 6 | 7 | 8 | 9 | 10 | 11 |

<input> with aria-required

12 |

← Return to main list

13 |

This is a test case designed to determine how the aria-required attribute, applied to the <input> element, is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="name">Full name</label>
25 |   <input aria-required="true" type="text" id="name">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /landmarks-banner19.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | header descendant of section 6 | 7 | 8 | 9 | 10 | 11 |

<header> descendant of <section>

12 |

← Return to main list

13 |

This test case is designed to determine how the <header> element will be announced by various screen readers when it is a descendant of the <section> element.

14 |

In this case, the element should not be announced as a banner landmark, as it is not scoped to the <body> element, it is scoped to the <section> element

15 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

16 | 20 |

Example

21 |
22 |
23 |

Other content

24 |
25 |

Test content

26 |
27 |
28 |
29 |

Code

30 | 31 | 
<section>
32 |   <h4>Other content</h4>
33 |   <header>
34 |     <h4>Test content</h4>
35 |   </header>
36 | </section>
37 | 38 |

Assistive technologies

39 |
40 |

VoiceOver

41 | 46 |
47 |
48 |

NVDA

49 | 54 |
55 |
56 |

JAWS

57 | 62 |
63 |

← Return to main list

64 | 65 | 66 | -------------------------------------------------------------------------------- /accessible-description-link02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | a where "title" should be accessible description 6 | 7 | 8 | 9 | 10 | 11 |

<a> where title should be accessible description

12 |

← Return to main list

13 |

The purpose this test is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <a> element. The priority order from highest to lowest is:

14 |
    15 |
  1. If present, use aria-describedby value.
    2. 16 |
  2. Otherwise, if present, use title value (as per the "Rabbit" example below).
    3. 17 |
  3. If none of the above are provided, there is no accessible description.
    4. 18 |
19 |

This example should not be considered proper practice, and is for testing purposes only.

20 |

Example

21 |
22 |
23 | Fish 24 |
25 |
26 |

Code

27 | 28 | 
<a href="#" title="rabbit">Fish</a>
29 | 30 |

Assistive technologies

31 |
32 |

VoiceOver

33 | 37 |
38 |
39 |

NVDA

40 | 45 |
46 |
47 |

JAWS

48 | 53 |
54 |

← Return to main list

55 | 56 | 57 | -------------------------------------------------------------------------------- /landmarks-footer01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | footer 6 | 7 | 8 | 9 | 10 | 11 |

<footer>

12 |

← Return to main list

13 |

This test case is designed to determine how the <footer> element is announced by various screen readers.

14 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

15 | 19 |

Example

20 |
21 | 24 |
25 |

Code

26 | 27 | 
<footer>
28 |   Test content
29 | </footer>
30 | 31 |

Assistive technologies

32 |
33 |

VoiceOver

34 | 39 |
40 |
41 |

NVDA

42 | 47 |
48 |
49 |

JAWS

50 | 55 |
56 |

← Return to main list

57 | 58 | 59 | -------------------------------------------------------------------------------- /x-other-tests/greg-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Greg test 7 | 8 | 9 | 10 |
11 |

Greg test

12 |

← Index page

13 |
14 | 15 |

Example 1: Static

16 |
17 | 18 | 19 |
20 |

Announced:

21 | 28 |
29 | 30 |

Example 2: Error

31 |
32 | 33 | Incomplete field 34 |
35 |

Announced:

36 | 44 | 45 |

Suggestions:

46 | 50 | 51 |
52 |

← Index page

53 |
54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /landmarks-section01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | section 6 | 7 | 8 | 9 | 10 | 11 |

<section>

12 |

← Return to main list

13 |

This test case is designed to determine how the <section> element is announced by various screen readers.

14 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

15 | 19 |

Example

20 |
21 |
22 |

Test content

23 |
24 |
25 |

Code

26 | 27 | 
<section>
28 |   <h4>Test content</h4>
29 | </section>
30 | 31 |

Assistive technologies

32 |
33 |

VoiceOver

34 | 39 |
40 |
41 |

NVDA

42 | 47 |
48 |
49 |

JAWS

50 | 55 |
56 |

← Return to main list

57 | 58 | 59 | -------------------------------------------------------------------------------- /disabled01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | button with "disabled" 6 | 7 | 8 | 9 | 10 | 11 |

<button> with disabled

12 |

← Return to main list

13 |

This is a test case designed to determine how the disabled attribute, applied to the <button> element, is announced by various screen readers.

14 |

Disabled attributes cannot receive focus, so the only way to test how these attributes are announced is via:

15 | 19 |

Example

20 |
21 |
22 | 23 |
24 |
25 |

Code

26 | 27 | 
<button disabled>Submit</button>
28 | 29 |

Assistive technologies

30 |
31 |

VoiceOver

32 | 37 |
38 |
39 |

NVDA

40 | 45 |
46 |
47 |

JAWS

48 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /voiceover04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | VoiceOver test with aria-label 6 | 7 | 8 | 9 | 10 | 11 |

VoiceOver test with aria-label

12 |

← Return to main list

13 |

This test case is designed to determine how landmark elements are displayed in VoiceOver's Rotor Landmark list.

14 |

Example

15 |
16 |
17 |

Red

18 |
19 |
20 |

Orange

21 |
22 | 25 | 28 |
29 |

Blue

30 |
31 | 34 |
35 |

Code

36 | 37 | 
<header aria-label="Colour red">
38 |   <h4>Red</h4>
39 | </header>
40 | <main aria-label="Colour orange">
41 |   <h4>Orange</h4>
42 | </main>
43 | <aside aria-label="Colour yellow">
44 |   <h4>Yellow</h4>
45 | </aside>
46 | <nav aria-label="Colour green">
47 |   <h4>Green</h4>
48 | </nav>
49 | <article aria-label="Colour blue">
50 |   <h4>Blue</h4>
51 | </article>
52 | <footer aria-label="Colour violet">
53 |   <h4>Violet</h4>
54 | </footer>
55 | 56 |

Results

57 |
58 | Chome Rotor Landmarks View 59 |
Chome Rotor Landmarks View
60 |
61 |
62 | Firefox Rotor Landmarks View 63 |
Firefox Rotor Landmarks View
64 |
65 |
66 | Safari Rotor Landmarks View 67 |
Safari Rotor Landmarks View
68 |
69 |

VoiceOver Rotor support chart

70 |

← Return to main list

71 | 72 | 73 | -------------------------------------------------------------------------------- /landmarks-main01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | main 6 | 7 | 8 | 9 | 10 | 11 |

<main>

12 |

← Return to main list

13 |

This test case is designed to determine how the <main> element is announced by various screen readers.

14 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

15 | 19 |

Example

20 |
21 |
22 | Test content 23 |
24 |
25 |

Code

26 | 27 | 
<main>
28 |   Test content
29 | </main>
30 | 31 |

Assistive technologies

32 |
33 |

VoiceOver

34 | 39 |
40 |
41 |

NVDA

42 | 47 |
48 |
49 |

JAWS

50 | 55 |
56 |

← Return to main list

57 | 58 | 59 | -------------------------------------------------------------------------------- /landmarks-footer02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | role="contentinfo" 6 | 7 | 8 | 9 | 10 | 11 |

role="contentinfo"

12 |

← Return to main list

13 |

This test case is designed to determine how role="contentinfo" is announced by various screen readers.

14 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

15 | 19 |

Example

20 |
21 | 24 |
25 |

Code

26 | 27 | 
<div role="contentinfo">
28 |   Test content
29 | </div>
30 | 31 |

Assistive technologies

32 |
33 |

VoiceOver

34 | 39 |
40 |
41 |

NVDA

42 | 47 |
48 |
49 |

JAWS

50 | 55 |
56 |

← Return to main list

57 | 58 | 59 | -------------------------------------------------------------------------------- /landmarks-section02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | role="region" 6 | 7 | 8 | 9 | 10 | 11 |

role="region"

12 |

← Return to main list

13 |

This test case is designed to determine how role="region" is announced by various screen readers.

14 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

15 | 19 |

Example

20 |
21 |
22 |

Test content

23 |
24 |
25 |

Code

26 | 27 | 
<div role="region">
28 |   <h4>Test content</h4>
29 | </div>
30 | 31 |

Assistive technologies

32 |
33 |

VoiceOver

34 | 39 |
40 |
41 |

NVDA

42 | 47 |
48 |
49 |

JAWS

50 | 55 |
56 |

← Return to main list

57 | 58 | 59 | -------------------------------------------------------------------------------- /landmarks-search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | role="search" 6 | 7 | 8 | 9 | 10 | 11 |

role="search"

12 |

← Return to main list

13 |

This test case is designed to determine how role="search" is announced by various screen readers.

14 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

15 | 19 |

Example

20 |
21 | 26 |
27 |

Code

28 | 29 | 
<div role="search">
30 |   <form action="#">
31 |     Test content
32 |   </form>
33 | </div>
34 | 35 |

Assistive technologies

36 |
37 |

VoiceOver

38 | 43 |
44 |
45 |

NVDA

46 | 51 |
52 |
53 |

JAWS

54 | 59 |
60 |

← Return to main list

61 | 62 | 63 | -------------------------------------------------------------------------------- /02-select.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | select 6 | 7 | 8 | 9 | 10 | 11 |

<select>

12 |

← Return to main list

13 |

This is a test case designed to determine how the <select> element is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 28 |
29 |
30 |

Code

31 | 32 | 
<div>
33 |   <label for="suburb">Suburb</label>
34 |   <select id="suburb">
35 |     <option value="Abbotsbury">Abbotsbury</option>
36 |   </select>
37 | </div>
38 | 39 |

Assistive technologies

40 |
41 |

VoiceOver

42 | 47 |
48 |
49 |

NVDA

50 | 55 |
56 |
57 |

JAWS

58 | 63 |
64 |

← Return to main list

65 | 66 | 67 | -------------------------------------------------------------------------------- /landmarks-banner01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | header 6 | 7 | 8 | 9 | 10 | 11 |

<header>

12 |

← Return to main list

13 |

This test case is designed to determine how the <header> element is announced by various screen readers.

14 |

In this case, the element should be announced as a banner landmark.

15 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

16 | 20 |

Example

21 |
22 |
23 |

Test content

24 |
25 |
26 |

Code

27 | 28 | 
<header>
29 |   <h4>Test content</h4>
30 | </header>
31 | 32 |

Assistive technologies

33 |
34 |

VoiceOver

35 | 40 |
41 |
42 |

NVDA

43 | 48 |
49 |
50 |

JAWS

51 | 56 |
57 |

← Return to main list

58 | 59 | 60 | -------------------------------------------------------------------------------- /landmarks-main02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | role="main" 6 | 7 | 8 | 9 | 10 | 11 |

role="main"

12 |

← Return to main list

13 |

This test case is designed to determine how role="main" is announced by various screen readers.

14 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

15 | 19 |

Example

20 |
21 |
22 | Test content 23 |
24 |
25 |

Code

26 | 27 | 
<div role="main">
28 |   Test content
29 | </div>
30 | 31 |

Assistive technologies

32 |
33 |

VoiceOver

34 | 39 |
40 |
41 |

NVDA

42 | 47 |
48 |
49 |

JAWS

50 | 55 |
56 |

← Return to main list

57 | 58 | 59 | -------------------------------------------------------------------------------- /x-other-tests/button-with-aria-label-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Button with aria-label test 7 | 8 | 9 | 10 |
11 |

<button> with aria-label test

12 |

← Index page

13 |

To determine if aria-label should be applied to the <button> or icon inside the <button>.

14 |
15 | 16 |

Example 01: aria-label and aria-hidden applied to the icon

17 | 20 |

Code

21 | 
<button>
22 |   <i aria-label="Open calendar" aria-hidden="true"></i>Dummy
23 | </button>
24 |

Dummy link between

25 |
26 | 27 |

Example 02: aria-label applied to the icon

28 | 31 |

Code

32 | 
<button>
33 |   <i aria-label="Open calendar"></i>Dummy
34 | </button>
35 |

Dummy link between

36 |
37 | 38 |

Example 03: aria-label applied to the <button>

39 | 42 |

Code

43 | 
<button aria-label="Open calendar">
44 |   <i aria-hidden="true"></i>Dummy
45 | </button>
46 |

Dummy link after

47 |
48 | 49 |

Results

50 |

The first method fails as the aria-label is not announced to assistive technologies. This is due to the icon also having aria-hidden applied.

51 |

← Index page

52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /landmarks-banner15.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | header descendant of nav 6 | 7 | 8 | 9 | 10 | 11 |

<header> descendant of <nav>

12 |

← Return to main list

13 |

This test case is designed to determine how the <header> element will be announced by various screen readers when it is a descendant of the <nav> element.

14 |

In this case, the element should not be announced as a banner landmark, as it is not scoped to the <body> element, it is scoped to the <nav> element

15 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

16 | 20 |

Example

21 |
22 | 28 |
29 |

Code

30 | 31 | 
<nav>
32 |   <h4>Other content</h4>
33 |   <header>
34 |     <h4>Test content</h4>
35 |   </header>
36 | </nav>
37 | 38 |

Assistive technologies

39 |
40 |

VoiceOver

41 | 46 |
47 |
48 |

NVDA

49 | 54 |
55 |
56 |

JAWS

57 | 62 |
63 |

← Return to main list

64 | 65 | 66 | -------------------------------------------------------------------------------- /landmarks-banner02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | role="banner" 6 | 7 | 8 | 9 | 10 | 11 |

role="banner"

12 |

← Return to main list

13 |

This test case is designed to determine how role="banner" is announced by various screen readers.

14 |

In this case, the element should be announced as a banner landmark.

15 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

16 | 20 |

Example

21 |
22 | 25 |
26 |

Code

27 | 28 | 
<div role="banner">
29 |   <h4>Test content</h4>
30 | </div>
31 | 32 |

Assistive technologies

33 |
34 |

VoiceOver

35 | 40 |
41 |
42 |

NVDA

43 | 48 |
49 |
50 |

JAWS

51 | 56 |
57 |

← Return to main list

58 | 59 | 60 | -------------------------------------------------------------------------------- /landmarks-banner11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | header descendant of main 6 | 7 | 8 | 9 | 10 | 11 |

<header> descendant of <main>

12 |

← Return to main list

13 |

This test case is designed to determine how the <header> element will be announced by various screen readers when it is a descendant of the <main> element.

14 |

In this case, the element should not be announced as a banner landmark, as it is not scoped to the <body> element, it is scoped to the <main> element.

15 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

16 | 20 |

Example

21 |
22 |
23 |

Other content

24 |
25 |

Test content

26 |
27 |
28 |
29 |

Code

30 | 31 | 
<main>
32 |   <h4>Other content</h4>
33 |   <header>
34 |     <h4>Test content</h4>
35 |   </header>
36 | </main>
37 | 38 |

Assistive technologies

39 |
40 |

VoiceOver

41 | 46 |
47 |
48 |

NVDA

49 | 54 |
55 |
56 |

JAWS

57 | 62 |
63 |

← Return to main list

64 | 65 | 66 | -------------------------------------------------------------------------------- /landmarks-banner07.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | header descendant of aside 6 | 7 | 8 | 9 | 10 | 11 |

<header> descendant of <aside>

12 |

← Return to main list

13 |

This test case is designed to determine how the <header> element will be announced by various screen readers when it is a descendant of the <aside> element.

14 |

In this case, the element should not be announced as a banner landmark, as it is not scoped to the <body> element, it is scoped to the <aside> element

15 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

16 | 20 |

Example

21 |
22 | 28 |
29 |

Code

30 | 31 | 
<aside>
32 |   <h4>Other content</h4>
33 |   <header>
34 |     <h4>Test content</h4>
35 |   </header>
36 | </aside>
37 | 38 |

Assistive technologies

39 |
40 |

VoiceOver

41 | 46 |
47 |
48 |

NVDA

49 | 54 |
55 |
56 |

JAWS

57 | 62 |
63 |

← Return to main list

64 | 65 | 66 | -------------------------------------------------------------------------------- /accessible-description-button02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | button where "title" should be accessible description 6 | 7 | 8 | 9 | 10 | 11 |

<button> where title should be accessible description

12 |

← Return to main list

13 |

The purpose this test is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <button> element. The priority order from highest to lowest is:

14 |
    15 |
  1. If present, use aria-describedby value.
    2. 16 |
  2. Otherwise, if present, use title value (as per the "Rabbit" example below).
    3. 17 |
  3. If none of the above are provided, there is no accessible description.
    4. 18 |
19 |

This example should not be considered proper practice, and is for testing purposes only.

20 |

Example

21 |
22 |
23 | 24 |
25 |
26 |

Code

27 | 28 | 
<button title="rabbit">Fish</button>
29 | 30 |

Assistive technologies

31 |
32 |

VoiceOver

33 | 38 |
39 |
40 |

NVDA

41 | 46 |
47 |
48 |

JAWS

49 | 54 |
55 |

← Return to main list

56 | 57 | 58 | -------------------------------------------------------------------------------- /x-other-tests/error-message-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Error message test 7 | 8 | 9 | 10 |
11 |

Error message test

12 |

← Index page

13 |

The KANA system does not allow separate error messages as per the Chroma system. Errors are flagged with strong red text, but nothing programatic for screen readers. These two tests are to determine if and where an error message can be presented to screen readers

14 |
15 | 16 |

Example 01: aria-label applied to the<label> element

17 |
18 |
19 | 20 | 21 |
22 |
23 |

Code

24 | 
<form action="#">
25 |   <div class="form-container">
26 |     <label for="two" aria-label="Error: What is the time">Address</label>
27 |     <input class="input" type="text" id="two">
28 |   </div>
29 | </form>
30 |

Dummy link after

31 |
32 | 33 |

Example 02: Hidden information inside <label> element

34 |
35 |
36 | 40 | 41 |
42 |
43 |

Code

44 | 
<form action="#">
45 |   <div class="form-container">
46 |     <label class="label" for="three">
47 |       <span class="sr-only">Error:</span>
48 |       Email
49 |     </label>
50 |     <input class="input" type="text" id="three">
51 |   </div>
52 | </form>
53 |

Dummy link after

54 |
55 | 56 |

Results

57 |

The first example works in all browser/screen reader combinations EXCEPT Chroma/VoiceOver. Adding an aria-label to the label means that the <label> is completely ignored in this browser/screen reader combination.

58 |

← Index page

59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /landmarks-nav01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | nav 6 | 7 | 8 | 9 | 10 | 11 |

<nav>

12 |

← Return to main list

13 |

This test case is designed to determine how the <nav> element is announced by various screen readers.

14 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

15 | 19 |

Example

20 |
21 | 24 |
25 |

Code

26 | 27 | 
<nav>
28 |   Test content
29 | </nav>
30 | 31 |

Assistive technologies

32 |
33 |

VoiceOver

34 | 39 |
40 |
41 |

NVDA

42 | 47 |
48 |
49 |

JAWS

50 | 55 |
56 |

← Return to main list

57 | 58 | 59 | -------------------------------------------------------------------------------- /voiceover03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | VoiceOver test with aria-labelledby 6 | 7 | 8 | 9 | 10 | 11 |

VoiceOver test with aria-labelledby

12 |

← Return to main list

13 |

This test case is designed to determine how landmark elements are displayed in VoiceOver's Rotor Landmark list.

14 |

Example

15 |
16 |
17 |

Red

18 |
19 |
20 |

Orange

21 |
22 | 25 | 28 |
29 |

Blue

30 |
31 | 34 |
35 |

Code

36 | 37 | 
<header aria-labelledby="red">
38 |   <h4 id="red">Red</h4>
39 | </header>
40 | <main aria-labelledby="orange">
41 |   <h4 id="orange">Orange</h4>
42 | </main>
43 | <aside aria-labelledby="yellow">
44 |   <h4 id="yellow">Yellow</h4>
45 | </aside>
46 | <nav aria-labelledby="green">
47 |   <h4 id="green">Green</h4>
48 | </nav>
49 | <article aria-labelledby="blue">
50 |   <h4 id="blue">Blue</h4>
51 | </article>
52 | <footer aria-labelledby="violet">
53 |   <h4 id="violet">Violet</h4>
54 | </footer>
55 | 56 |

Results

57 |
58 | Chome Rotor Landmarks View 59 |
Chome Rotor Landmarks View
60 |
61 |
62 | Firefox Rotor Landmarks View 63 |
Firefox Rotor Landmarks View
64 |
65 |
66 | Safari Rotor Landmarks View 67 |
Safari Rotor Landmarks View
68 |
69 |

VoiceOver Rotor support chart

70 |

← Return to main list

71 | 72 | 73 | -------------------------------------------------------------------------------- /accessible-description-link01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | a where "aria-describedby" should be accessible description 6 | 7 | 8 | 9 | 10 | 11 |

<a> where aria-describedby should be accessible description

12 |

← Return to main list

13 |

The purpose this test is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <a> element. The priority order from highest to lowest is:

14 |
    15 |
  1. If present, use aria-describedby value (as per the "Cat" example below).
    2. 16 |
  2. Otherwise, if present, use title value.
    3. 17 |
  3. If none of the above are provided, there is no accessible description.
    4. 18 |
19 |

This example should not be considered proper practice, and is for testing purposes only.

20 |

Example

21 |
22 |
23 | Fish 24 |
Cat
25 |
26 |
27 |

Code

28 | 29 | 
<a
30 |   href="#"
31 |   aria-describedby="cat"
32 |   title="rabbit"
33 | >
34 |   Fish
35 | </a>
36 | <div id="cat">
37 |   Cat
38 | </div>
39 | 40 |

Assistive technologies

41 |
42 |

VoiceOver

43 | 47 |
48 |
49 |

NVDA

50 | 55 |
56 |
57 |

JAWS

58 | 63 |
64 |

← Return to main list

65 | 66 | 67 | -------------------------------------------------------------------------------- /accessible-description-input03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input with no accessible description 6 | 7 | 8 | 9 | 10 | 11 |

<input> with no accessible description

12 |

← Return to main list

13 |

The purpose this test is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <input> element. The priority order from highest to lowest is:

14 |
    15 |
  1. If present, use aria-describedby value.
    2. 16 |
  2. Otherwise, if present, use title value (as per the "Rabbit" example below).
    3. 17 |
  3. If none of the above are provided, there is no accessible description.
    4. 18 |
19 |

This example should not be considered proper practice, and is for testing purposes only.

20 |

Example

21 |
22 |
23 | 24 | 25 |
26 |
27 |

Code

28 | 29 | 
<label for="fish">Fish</label>
30 | <input
31 |   type="text"
32 |   id="fish"
33 |   placeholder="fox"
34 | >
35 | 36 |

Assistive technologies

37 |
38 |

VoiceOver

39 | 44 |
45 |
46 |

NVDA

47 | 52 |
53 |
54 |

JAWS

55 | 60 |
61 |

← Return to main list

62 | 63 | 64 | -------------------------------------------------------------------------------- /landmarks-aside01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | aside 6 | 7 | 8 | 9 | 10 | 11 |

<aside>

12 |

← Return to main list

13 |

This test case is designed to determine how the <aside> element is announced by various screen readers.

14 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

15 | 19 |

Example

20 |
21 | 24 |
25 |

Code

26 | 27 | 
<aside>
28 |   <h4>Test content</h4>
29 | </aside>
30 | 31 |

Assistive technologies

32 |
33 |

VoiceOver

34 | 39 |
40 |
41 |

NVDA

42 | 47 |
48 |
49 |

JAWS

50 | 55 |
56 |

← Return to main list

57 | 58 | 59 | -------------------------------------------------------------------------------- /landmarks-nav02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | role="navigation" 6 | 7 | 8 | 9 | 10 | 11 |

role="navigation"

12 |

← Return to main list

13 |

This test case is designed to determine how role="navigation" is announced by various screen readers.

14 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

15 | 19 |

Example

20 |
21 | 24 |
25 |

Code

26 | 27 | 
<div role="navigation">
28 |   Test content
29 | </div>
30 | 31 |

Assistive technologies

32 |
33 |

VoiceOver

34 | 39 |
40 |
41 |

NVDA

42 | 47 |
48 |
49 |

JAWS

50 | 55 |
56 |

← Return to main list

57 | 58 | 59 | -------------------------------------------------------------------------------- /support-readonly-fields.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | readonly and aria-readonly attribute support chart 6 | 7 | 8 | 9 | 10 | 11 |

readonly and aria-readonly attribute support chart

12 |

← Return to main list

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 |
 VoiceOver ChromeVoiceOver FirefoxVoiceOver SafariNVDA ChromeNVDA FirefoxNVDA EdgeJAWS EdgeJAWS Edge
readonly attribute on <input>Announcedreadonly not announcedreadonly not announcedAnnouncedAnnouncedAnnouncedAnnouncedAnnounced
readonly attribute on <textarea>Announcedreadonly not announcedAnnouncedAnnouncedAnnouncedAnnouncedAnnouncedAnnounced
aria-readonly attribute on <input>readonly not announcedreadonly not announcedreadonly not announcedreadonly not announcedreadonly not announcedreadonly not announcedreadonly not announcedreadonly not announced
63 | 64 | 65 | -------------------------------------------------------------------------------- /attributes09.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input with "multiple" 6 | 7 | 8 | 9 | 10 | 11 |

<input> with multiple

12 |

← Return to main list

13 |

This is a test case designed to determine how the multiple attribute is announced. In real situations, authors should always provide clear instructions on how to successfully complete form questions.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="email">Email address</label>
25 |   <input
26 |     type="email"
27 |     id="email"
28 |     multiple
29 |   >
30 | </div>
31 | 32 |

Assistive technologies

33 |
34 |

VoiceOver

35 | 40 |
41 |
42 |

NVDA

43 | 48 |
49 |
50 |

JAWS

51 | 56 |
57 |

← Return to main list

58 | 59 | 60 | -------------------------------------------------------------------------------- /landmarks-search02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | role="search" with label 6 | 7 | 8 | 9 | 10 | 11 |

role="search" with <label>

12 |

← Return to main list

13 |

This test case is designed to determine how role="search" and an associated <label> are announced by various screen readers.

14 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

15 | 19 |

Example

20 |
21 | 26 |
27 |

Code

28 | 29 | 
<div role="search" aria-label="Search the site">
30 |   <form action="#">
31 |     Test content
32 |   </form>
33 | </div>
34 | 35 |

Assistive technologies

36 |
37 |

VoiceOver

38 | 43 |
44 |
45 |

NVDA

46 | 51 |
52 |
53 |

JAWS

54 | 59 |
60 |

← Return to main list

61 | 62 | 63 | -------------------------------------------------------------------------------- /disabled02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input with "disabled" 6 | 7 | 8 | 9 | 10 | 11 |

<input> with disabled

12 |

← Return to main list

13 |

This is a test case designed to determine how the disabled attribute, applied to the <input> element, is announced by various screen readers.

14 |

Disabled attributes cannot receive focus, so the only way to test how these attributes are announced is via:

15 | 19 |

Example

20 |
21 |
22 | 23 | 24 |
25 |
26 |

Code

27 | 28 | 
<div>
29 |   <label for="name">Name</label>
30 |   <input type="text" id="name" disabled>
31 | </div>
32 | 33 |

Assistive technologies

34 |
35 |

VoiceOver

36 | 41 |
42 |
43 |

NVDA

44 | 49 |
50 |
51 |

JAWS

52 | 56 |
57 |

← Return to main list

58 | 59 | 60 | -------------------------------------------------------------------------------- /landmarks-aside02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | role="complementary" 6 | 7 | 8 | 9 | 10 | 11 |

role="complementary"

12 |

← Return to main list

13 |

This test case is designed to determine how role="complementary" is announced by various screen readers.

14 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

15 | 19 |

Example

20 |
21 | 24 |
25 |

Code

26 | 27 | 
<div role="complementary">
28 |   <h4>Test content</h4>
29 | </div>
30 | 31 |

Assistive technologies

32 |
33 |

VoiceOver

34 | 39 |
40 |
41 |

NVDA

42 | 47 |
48 |
49 |

JAWS

50 | 55 |
56 |

← Return to main list

57 | 58 | 59 | -------------------------------------------------------------------------------- /fieldset-buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fieldset with buttons 6 | 7 | 8 | 9 | 10 | 11 |

<fieldset> with buttons

12 |

← Return to main list

13 |

This is a test case designed to determine how the <fieldset> and <legend> elements are announced in relation to buttons by various screen readers.

14 |

Example

15 |
16 |
17 | Options 18 | 19 | 20 |
21 |
22 |

Code

23 | 24 | 
<fieldset>
25 |   <legend>Options</legend>
26 |   <button>Back</button>
27 |   <button>Next</button>
28 | </fieldset>
29 | 30 |

Assistive technologies

31 |
32 |

VoiceOver

33 | 38 |
39 |
40 |

NVDA

41 | 46 |
47 |
48 |

JAWS

49 | 54 |
55 |

← Return to main list

56 | 57 | 58 | -------------------------------------------------------------------------------- /input-help-text-aria-label.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input with help text as an "aria-label" 6 | 7 | 8 | 9 | 10 | 11 |

<input> with help text as an aria-label

12 |

← Return to main list

13 |

This is a test case designed to determine how help information is applied directly to the <input> via the aria-label attribute, is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="name">Name</label>
25 |   <input
26 |     type="text"
27 |     id="name"
28 |     aria-label="Name. Make sure to include full name"
29 |   >
30 | </div>
31 | 32 |

Assistive technologies

33 |
34 |

VoiceOver

35 | 40 |
41 |
42 |

NVDA

43 | 48 |
49 |
50 |

JAWS

51 | 56 |
57 |

← Return to main list

58 | 59 | 60 | -------------------------------------------------------------------------------- /invalid03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | input with aria-invalid="grammar" 6 | 7 | 8 | 9 | 10 | 11 |

<input> with aria-invalid="grammar"

12 |

← Return to main list

13 |

This is a test case designed to determine how the aria-invalid attribute, applied to the <input> element, is announced by various screen readers.

14 |

Example

15 |
16 |
17 | 18 | 19 |
20 |
21 |

Code

22 | 23 | 
<div>
24 |   <label for="name">Name</label>
25 |   <input type="text" id="name" aria-invalid="grammar">
26 | </div>
27 | 28 |

Assistive technologies

29 |
30 |

VoiceOver

31 | 36 |
37 |
38 |

NVDA

39 | 44 |
45 |
46 |

JAWS

47 | 52 |
53 |

← Return to main list

54 | 55 | 56 | -------------------------------------------------------------------------------- /landmarks-article01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | article 6 | 7 | 8 | 9 | 10 | 11 |

<article>

12 |

← Return to main list

13 |

This test case is designed to determine how the <article> element is announced by various screen readers.

14 |

By default, the element being tested does not receive focus, so the only way to test how it is announced is via:

15 | 19 |

Example

20 |
21 |
22 |

Test content

23 |
24 |
25 |

Code

26 | 27 | 
<article>
28 |   <h4>Test content</h4>
29 | </article>
30 | 31 |

Assistive technologies

32 |
33 |

VoiceOver

34 | 39 |
40 |
41 |

NVDA

42 | 47 |
48 |
49 |

JAWS

50 | 55 |
56 |

← Return to main list

57 | 58 | 59 | --------------------------------------------------------------------------------