Edit me

Tests

Progress

Basic

Code

1
<progress max='100' value='40'></progress>

Screen reader	ChromeVox 53	NVDA 2017.4
Browser	Chrome 63	Chrome 63	Edge 16	Firefox 57
Spoken output		progress bar, 40	progress bar, 40	progress bar, 40%
Skipped	true	true	false	false

Indeterminate

Code

1
<progress tabindex=0></progress>

Screen reader	ChromeVox 53	NVDA 2017.4
Browser	Chrome 62	Chrome 63	Edge 16	Firefox 57
Spoken output		progress bar	progress bar 0	progress bar half checked
Skipped	true	true	false	true

Note:

Decide if skipping the element is preferred

Overflow

Code

1
<progress max='30' value='40'></progress>

Screen reader	ChromeVox 53	NVDA 2017.4
Browser	Chrome 63	Chrome 63	Edge 16	Firefox 57
Spoken output		progress bar, 30	progress bar 100	progress bar, 100%
Skipped	true	true	false	false

Basic with aria fallback

Code

1
<progress role='progressbar' max='100' value='40' aria-valueNow='40'></progress>

Screen reader	ChromeVox 53	NVDA 2017.4
Browser	Chrome 63	Chrome 63	Edge 16	Firefox 57
Spoken output	Progress bar 40	progress bar, 40	progress bar 40	progress bar, 40
Skipped	false	false	false	false

Overflow with aria fallback

Code

1
<progress role='progressbar' max='30' value='40' aria-valueNow='40' aria-valueMax='30'></progress>

Screen reader	ChromeVox 53	NVDA 2017.4
Browser	Chrome 63	Chrome 63	Edge 16	Firefox 57
Spoken output	Progress bar 40 Max 30	progress bar, 40	progress bar 133	progress bar, 40
Skipped	false	false	false	false

Indeterminate with aria fallback

Code

1
<progress role='progressbar'></progress>

Screen reader	ChromeVox 53	NVDA 2017.4
Browser	Chrome 63	Chrome 63	Edge 16	Firefox 57
Spoken output	Progress bar	progress bar	progress bar 0	progress bar half checked
Skipped	true	true	false	true

Svg

Basic markup

Code

1
<svg role="img"><title>Test</title><rect x="0" y="0" width="100" height="100" /></svg>

Screen reader	voiceover (macOs) 8.0 (562.13)			ChromeVox 53	NVDA 2017.4
Browser	Safari 11	Chrome 64	Firefox 57	Chrome 62	Firefox 57	Chrome 63	Edge 16	IE 11
Spoken output	Test group	Test, image	Test, image	image	Test graphic, Test	graphic, Test	graphic, Test	graphic, Test, graphic, Test
Skipped	false	false	false	false	false	false	false	false

With aria-label

Code

1
<svg role="img" aria-label="Test"><rect x="0" y="0" width="100" height="100" /></svg>

Screen reader	voiceover (macOs) 8.0 (562.13)	ChromeVox 53	NVDA 2017.4
Browser	Firefox 57	Chrome 62	Firefox 57	Chrome 63	Edge 16	IE 11
Spoken output	Test, image	Test, image	Test graphic, Test	graphic, Test	graphic, Test	graphic, Test
Skipped	false	false	false	false	false	false

Note:

ChromeVox currently doesn’t pronounce <title> or aria-labelby while it’s visible witin the automation API

Extended with aria & role

Code

1
2
3
4
5
<svg role="presentation">
  <g role="img" aria-label="Test">
  <rect x="0" y="0" width="100" height="100" />
  </g>
</svg>

Screen reader	voiceover (macOs) 8.0 (562.13)	ChromeVox 53	NVDA 2017.4
Browser	Firefox 57	Chrome 62	Firefox 57	Chrome 63	Edge 16	IE 11
Spoken output	Test, image	Test, image	Test graphic, Test	graphic, Test	graphic, Test	graphic, Test
Skipped	false	false	false	false	false	false

Note:

Adds Safari support, but the SVG can’t have title element as direct child of <svg>

Symbols

Code

1
2
3
4
5
6
7
8
9
<svg role="presentation">
  <use role="img" xlink:href="#r" />
</svg>
<svg>
  <symbol id="r">
    <title>Test</title>
    <rect x="0" y="0" width="100" height="100" />
  </symbol>
</svg>

Screen reader	voiceover (macOs) 8.0 (562.13)	ChromeVox 53	NVDA 2017.4
Browser	Firefox 57	Chrome 62	Firefox 57	Chrome 63	Edge 16	IE 11
Spoken output	image	image	blank		graphic
Skipped	false	false	false	false	false	false

Symbols extend with role

Code

1
2
3
4
5
6
7
8
9
10
11
<svg role="presentation">
  <use role="img" xlink:href="#link">
    <title>Test</title>
  </use>
</svg>

<svg hidden>
  <symbol id="link">
    <rect x="0" y="0" width="100" height="100" />
  </symbol>
</svg>

Screen reader	voiceover (macOs) 8.0 (562.13)	ChromeVox 53	NVDA 2017.4
Browser	Chrome 57	Chrome 62	Firefox 57	Chrome 63	Edge 16	IE 11
Spoken output	Test, image	Test, image	Test graphic, Test	graphic, Test	graphic Test	graphic, Test
Skipped	false	false	false	false	false	false

Meter

Basic

Code

1
<meter value='0.5'></meter>

Screen reader	ChromeVox 53	NVDA 2017.4			Narrator 10
Browser	Chrome 62	Chrome 63	Firefox 57	Edge 16	Chrome 63	Edge 16
Spoken output		progress bar, .5	blank	progress bar 50	0% progress bar	50% meter
Skipped	false	false	false	false	true	false

Extended with aria

Code

1
2
3
<meter value='.4'
  role='slider' aria-readonly='true' aria-valuemin='0' aria-valuemax='1' aria-valuenow='0.4'
></meter>

Screen reader	NVDA 2017.4	Narrator 10
Browser	Edge 16	Chrome 63	Edge 16
Spoken output	slider 40	slider at 0.400000005960465	meter at Good
Skipped	false	true	false

Note:

Edge doesn’t work, as it doesn’t allow overriding the role within an meter element

Extended with aria including aria-valuetext

Code

1
2
3
<meter value='.4' role='slider' aria-readonly='true' aria-roledescription="score" aria-label="level"
  aria-valuemin='0' aria-valuemax='1' aria-valuenow='0.4' aria-valuetext='40%'
></meter>

Screen reader	NVDA 2017.4	Narrator 10
Browser	Edge 16	Chrome 63	Edge 16
Spoken output	slider 40	slider at 40%	meter at 40%
Skipped	false	true	false

Within low range

Code

1
<meter low='0.4' value='0.2' min='0' max='1'></meter>

Screen reader	NVDA 2017.4	Narrator 10
Browser	Edge 16	Edge 16
Spoken output	progress bar 20	20% meter
Skipped	false	false

Within low range extended with aria

Code

1
2
3
<meter value='.4' role='slider' aria-readonly='true'
  aria-valuemin='0' aria-valuemax='1' aria-valuenow='0.4' aria-valuetext='low'
></meter>

Screen reader	NVDA 2017.4	Narrator 10
Browser	Edge 16	Edge 16
Spoken output	slider 40	meter at low
Skipped	false	false

Buttons

<button>

<input type="button">

Toggle button

Code

1
<button type='button' aria-pressed='false'>Test</button>

Screen reader	voiceover (macOs) 7.0 (477.40.6)			ChromeVox 53	NVDA 2017.4				Narrator 10.0.16299.15
Browser	Chrome 62	Safari 10	Firefox 55	Chrome 62	Firefox 57	Chrome 63	Edge 16	IE 11	Edge 16	IE 11
Spoken output	Test, toggle button	Test, toggle button	Test, button	Test, button not pressed	toggle button not pressed, Test	toggle button not pressed, Test	toggle button not pressed, Test	button, Test	off, Test, button	off, Test, button
Skipped	false	false	false	false	false	false	false	false	false	false

Pressed toggle button

Code

1
<button type='button' aria-pressed='true'>Test</button>

Screen reader	voiceover (macOs) browsers			ChromeVox 53	NVDA 2017.4
Browser	Chrome 62	Safari 10	Firefox 55	Chrome 62	Firefox 57	Chrome 63	Edge 16	IE 11
Spoken output	Test, selected, toggle button	Test, toggle button	Test, button	Test, button pressed	toggle button pressed, Test	toggle button pressed, Test	toggle button pressed, Test	button pressed, Test
Skipped	false	false	false	false	false	false	false	false

Menu button

Code

1
<button type="button" aria-haspopup="true">Test</button>

Screen reader	voiceover (macOs) 7.0 (477.40.6)			ChromeVox 53	NVDA 2017.4
Browser	Chrome 62	Safari 10	Firefox 55	Chrome 62	Firefox 57	Chrome 63	Edge 16	IE 11
Spoken output	Test, pop up button	Test, pop up button	Test, menu button	Test, pop up button	menu button subMenu, Test	menu button subMenu, Test	button, Test	button subMenu, Test
Skipped	false	false	false	false	false	false	false	false

Menu button with open menu

Code

1
<button type="button" aria-haspopup="true" aria-expanded="true">Test</button>

Screen reader	voiceover (macOs) 7.0 (477.40.6)			ChromeVox 53	NVDA 2017.4
Browser	Chrome 62	Safari 10	Firefox 55	Chrome 62	Firefox 57	Chrome 63	Edge 16	IE 11
Spoken output	Test, expanded, pop up button	Test, expanded, pop up button	Test, menu button	Test, popup button expanded	menu button expanded subMenu, Test	menu button expanded subMenu, Test	button expanded, Test	button expanded subMenu, Test
Skipped	false	false	false	false	false	false	false	false

Code

1
2
3
4
<button type="button" aria-haspopup="true" aria-expanded="true" aria-controls="menu-1">Test</button>
<ul id="menu-1" role="menu">
  <li role="menuitem">Menu item</li>
</ul>

Screen reader	voiceover (macOs) 7.0 (477.40.6)			ChromeVox 53	NVDA 2017.4
Browser	Chrome 62	Safari 10	Firefox 55	Chrome 62	Firefox 57	Chrome 63	Edge 16	IE 11
Spoken output	Test, expanded, pop up button	Test, expanded, pop up button	Test, menu button	Test, popup button expanded	menu button expanded subMenu, Test	menu button expanded subMenu, Test	button expanded, Test	button expanded subMenu, Test
Skipped	false	false	false	false	false	false	false	false

Details

Closed <details>

Test

content

Code

1
2
3
4
<details>
  <summary>Test</summary>
  content
</details>

Screen reader	voiceover (macOs) 10 (767)	ChromeVox 53
Browser	Firefox 90	Chrome 62
Spoken output	Test, collapsed, summary	Test » content
Skipped	false	false

Open <details>

Test

content

Code

1
<details open><summary>Test</summary>content</details>

Screen reader	voiceover (macOs) 10 (767)	ChromeVox 53
Browser	Firefox 90	Chrome 62
Spoken output	Test, expanded, summary » content	Test » content
Skipped	false	false

<details> with missing <summary>

content

Code

1
<details open>content</details>

Screen reader	voiceover (macOs) 10 (767)			ChromeVox 53
Browser	Chrome 91	Safari 14	Firefox 90	Chrome 91
Spoken output	Details, disclosure triangle » content	Details, expanded, summary » content	content » Details, expanded, summary	content
Skipped	false	false	false	false

<details> with fallback aria attributes

Test

content

Code

1
2
3
4
5
6
7
8
<div>
  <div role="button" aria-expanded="true" aria-controls="fb-details-content">
    Test
  </div>
  <div id="fb-details-content">
    content
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<nav>
  <menu role="menubar">
    <li role="presentation">
        <a href="#" role="menuitem">Page</a>
    </li>
    <li role="presentation">
        <button type="button" role="menuitem" aria-expanded="false">Action</button>
        <ul role="menu">
          <li role="presentation">
            <a href="#" role="menuitem">Submenu item</a>
          </li>
        </ul>
    </li>
  </menu>
</nav>

Screen reader	voiceover (macOs) browsers	ChromeVox browsers
Browser	Safari	Chrome
Spoken output
Skipped	false	false

Note:

1
2
3
4
5
6
7
8
9
10
11
12
<!-- menu button -->
<button type="menu" aria-controls="popup-menu" aria-expanded="false">Menu Button</button>

<!-- menu -->
<menu id="popup-menu" role="menu" hidden>
  <li role="presentation">
      <a href="#" role="menuitem">Page</a>
  </li>
  <li role="presentation">
      <a href="#" role="menuitem">Another page</a>
  </li>
</menu>

Old fashioned menu

Code

1
2
3
4
5
6
7
8
9
10
<nav>
  <ul>
    <li>
      <a href="#">Page</a>
    </li>
    <li>
      <a href="#">Another page</a>
    </li>
  </ul>
</nav>

Tests

Progress

Basic

Indeterminate

Overflow

Basic with aria fallback

Overflow with aria fallback

Indeterminate with aria fallback

Svg

Basic markup

With aria-label

Extended with aria & role

Symbols

Symbols extend with role

Meter

Basic

Extended with aria

Extended with aria including aria-valuetext

Within low range

Within low range extended with aria

Buttons

<button>

<input type="button">

Toggle button

Pressed toggle button

Menu button

Menu button with open menu

Details

Closed <details>

Open <details>

<details> with missing <summary>

<details> with fallback aria attributes

Menu

Menubar

Menu

Old fashioned menu