Personal reference for accessible markup

_What should I use.md

• Button
  • syntax: button or [role=button tabindex=0]
• Toggle Button
  • syntax: Button + [aria-pressed]
• Menu button
  • syntax: Button + [aria-haspopup=true aria-expanded aria-controls]
  • ref: https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton
• Menu
  • syntax: nav>ul[role=menubar aria-activedescendant]>(li[role=presentation aria-selected=true]>a[role=menuitem]+ul[role=menu hidden])
  • todo: check above code
  • ref: https://stackoverflow.com/a/12279190 & https://www.w3.org/TR/wai-aria-practices/#menu
• Inline SVG
  • syntax: svg[role=presentation]>g[role=img aria-label]
• Details element
  • syntax: details>summary[role=button tabindex=0 aria-controls=content]{title}+#content[hidden=""]{content}

button.md

Toggle button

<button type="button" aria-pressed="false">Test</button>

<div role="button" aria-pressed="false" tabindex="0">Test</div>

	Safari 10 + VoiceOver	Firefox 55 + VoiceOver	Chrome 62 + VoiceOver	Chrome 62 + ChromeVox 53
Spoken output	Test, toggle button	Test, button	Test, toggle button	Test, button not pressed
Title / Name	Test	Test	Test	Test
Label
Type / Role	toggle button	button	toggle button	button
Value / Pressed	0		0	false
API	Role: AXCheckbox Subrole: AXToggle	Role: AXButton	Role: AXCheckbox Subrole: AXToggleButton

<button type="button" aria-pressed="true">Test</button>

<div role="button" aria-pressed="true" tabindex="0">Test</div>

	Safari 10 + VoiceOver	Firefox 55 + VoiceOver	Chrome 62 + VoiceOver	Chrome 62 + ChromeVox 53
Spoken output	Test, selected, toggle button	Test, button	Test, selected, toggle button	Test, button pressed
Title / Name	Test	Test	Test	Test
Label
Type / Role	toggle button	button	toggle button	button
Value / Pressed	1		1	true
API	Role: AXCheckbox Subrole: AXToggle	Role: AXButton	Role: AXCheckbox Subrole: AXToggleButton

details.md

<details> and <summary>

<details><summary>Test</summary>content</details>

	Safari 10 + VoiceOver	Firefox 55 + VoiceOver	Chrome 62 + VoiceOver	Chrome 62 + ChromeVox 53
Spoken output	Test, collapsed, summary	Test	Test, collapsed, disclosure triangle	Test (next) content
Title / Name	Test	Test	Test	Test
Label
Type / Role	summary	group	discolusre triangle	DisclosureTriangle
API	Role: AXButton Subrole: AXSummary Expanded: false	Role: AXButton Subrole: AXSummary	Role: AXButton	Expanded: false

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

	Safari 10 + VoiceOver	Firefox 55 + VoiceOver	Chrome 62 + VoiceOver	Chrome 62 + ChromeVox 53
Spoken output	Test, expanded, summary (next) content	Test (next) content	Test, expanded, disclosure triangle (next) content	Test (next) content
Title / Name	Test	Test	Test	Test (next) content
Label
Type / Role	summary	group	disclosure triangle	DisclosureTriangle
API	Role: AXButton Subrole: AXSummary Expanded: true	Role: AXButton Subrole: AXSummary	Role: AXButton	Expanded: true

<details open>content</details>

	Safari 10 + VoiceOver	Firefox 55 + VoiceOver	Chrome 62 + VoiceOver	Chrome 62 + ChromeVox 53
Spoken output	Details, expanded, summary	content (next) details	Details, disclosure triangle (next) content	Content
Title / Name	Details		Details
Label
Type / Role	summary	group	disclosure triangle	Details
API	Role: AXButton Subrole: AXSummary Expanded: true	Role: AXButton Subrole: AXSummary	Role: AXButton

display.md

Visibility

Is shown / pronounced? 1st = screen, 2nd = screen reader

Code	Safari 10	Firefox 55	Chrome 62
<div hidden> Test </div>	✗ ✗	✗ ✗	✗ ✗
<div style=" display:none; "> Test </div>	✗ ✗	✗ ✗	✗ ✗
<div style=" visibility:hidden; "> Test </div>	✗ ✗	✗ ✗	✗ ✗
<div aria-hidden="true"> Test </div>	✓ ✗	✓ ✓	✓ ✗
<div style="width:0; height: 0; overflow:hidden;"> Test </div>	✗ ✓	✗ ✓	✗ ✓
<div style=" text-indent:-1000px; "> Test </div>	✗ ✓	✗ ✓	✗ ✓
<div style=" clip: rect(1px, 1px, 1px, 1px); position: absolute;"> Test </div>	✗ ✓	✗ ✓	✗ ✓
<div style=" position: absolute; left: -999px"> Test </div>	✗ ✓	✗ ✓	✗ ✓

menu.md

Code	AX type & chrome.automation role	VoiceOver	ChromeVox
<nav>	navigation	navigation 1 item	navigation
<ul role="menu">	menu	menu 2 items	menu with 2 items
<li role="presentation">
<a role="menuitem" href="#">Home</a>	menu item	home, menu item 1 of 2	home, menu item 1 of 2

svg.md

<svg>

ref: https://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/

<svg role="img"><title>Test</title>...</svg>

	Safari 10 + VoiceOver	Firefox 55 + VoiceOver	Chrome 62 + VoiceOver	Chrome 62 + ChromeVox 53
Spoken output	Test group	Test, image	Test, image	image
Title / Name	Test	Test	Test	Test
Label
Type / Role	group	image	image	img
Value / Pressed
API	Role: AXGroup	Role: AXImage	Role: AXImage	Labeled by: title

<svg role="img" aria-label="Test">...</svg>

	Safari 10 + VoiceOver	Firefox 55 + VoiceOver	Chrome 62 + VoiceOver	Chrome 62 + ChromeVox 53
Spoken output	Test group	Test, image	Test, image	Test, image
Title / Name		Test		Test
Label	Test		Test
Type / Role	group	image	image	img
Value / Pressed
API	Role: AXGroup	Role: AXImage	Role: AXImage	aria-label: "Test"

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

<svg role="presentation"><g role="img" aria-label="Test">...</g></svg>

	Safari 10 + VoiceOver	Firefox 55 + VoiceOver	Chrome 62 + VoiceOver	Chrome 62 + ChromeVox 53
Spoken output	Test, image	Test, image	Test, image	Test, image
Title / Name		Test		Test
Label	Test		Test
Type / Role	image	image	image	img
Value / Pressed
API	Role: AXImage	Role: AXImage	Role: AXImage	aria-label: "Test"

Note: Adds Safari support, but the SVG can't have title element as direct child

Symbol's

<svg role="presentation">
  <use role="img" xlink:href="#r" />
</svg>
<svg>
  <symbol id="r">
    <title>Test</title>
    ...
  </symbol>
</svg>

	Safari 10 + VoiceOver	Firefox 55 + VoiceOver	Chrome 62 + VoiceOver	Chrome 62 + ChromeVox 53
Spoken output	Test, image	image	image	image
Title / Name
Label	Test
Type / Role	image	image	image	img
Value / Pressed
API	Role: AXImage	Role: AXImage	Role: AXImage