Screen readers
 |
 |
 |
 |
 |
| Jaws | NVDA | Voiceover | Narrator | Orca |
| (Freedom Scientific) | (NV Access) | (Apple) | (Microsoft) | (GNOME) |
FrontEnd NE, Newcastle 2018
|
|
|
|
|
| Jaws | NVDA | Voiceover | Narrator | Orca |
| (Freedom Scientific) | (NV Access) | (Apple) | (Microsoft) | (GNOME) |
details & summary elements<details>
<summary>Tequila...</summary>
Makes me happy!
</details>
details elementdetails & summary elementsdiv & span elementsHave neutral semantics
<div class="toolbar">
<span class="button">Bold</span><span class="button">Italic</span>...
</div>div & span elementsAttributes that polyfill missing role, name, and state information for screen readers
ARIA 1.1 (W3C Recommendation)
w3.org/TR/wai-aria-1.1
role attribute70+ roles, including:
aria- attributes45+ states and properties, including:
aria-invalid, aria-requiredaria-pressed, aria-expandedaria-controls, aria-ownsspan element<span id="button">Tequila!</span>span element
span element<span id="button" role="button" tabindex="0">...</span>button element<button>Tequila!</button>button elementrole<button role="heading" aria-level="1">Tequila!</button>role<a href="#here" id="button" role="button">Tequila!</a>
var button = document.getElementById('button');
button.addEventListener('keydown', function(event) {
if (event.keyCode == 13) {
doSomething();
}
});<span id="button" role="button" tabindex="0">Tequila!</span>
var button = document.getElementById('button');
button.addEventListener('keydown', function(event) {
if (event.keyCode == 13 || event.keyCode == 32) {
toggle();
}
});application role<body role="application">...</body>Several roles invoke applications mode, including:
tablist roleARIA Authoring Practices Guide (APG) 1.1:
w3.org/tr/wai-aria-practices-1.1/
tablist role + keyboard supportAccessibility Object Model (AOM):
github.com/wicg/aom
Thank you