Sebastian Herrmann
A software-developing peep.
"Accessibility is the practice of making your websites usable by as many people as possible."
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility
your app/website
🖥 ⌨️🖱
🖥 ⌨️
🎧 ⌨️
(screen reader user)
Small Improvements
Sections:
- Header
- Sidebar
- Main
Links:
- Create
…
let's build for
all of them!
📱
--------------------------------------------------------------------------------
Language files blank comment code
--------------------------------------------------------------------------------
Java 3439 51543 6300 207087
JavaScript 3208 23249 4121 186510
Groovy 973 23844 1067 88192
JSON 29 0 0 86839
LESS 870 6843 344 34728
HTML 731 4253 170 25071
CoffeeScript 462 5902 94 20018
TypeScript 214 1195 130 10397
XML 12 361 121 1901
Gradle 13 321 127 1559
Markdown 35 467 0 1194
~~ other obscure stuff ~~
--------------------------------------------------------------------------------
SUM: 10032 118245 12619 664928
--------------------------------------------------------------------------------
Examples:
<table>
<tbody>
<tr>
<td>
<div class="inline-content">
<span class="table-text">
<p>
Some content
</p>
</span>
</div>
</td>
</tr>
</tbody>
</table>
❌
<table>
<tbody>
<tr>
<td>
<div class="inline-content" role="presentation">
Some content
</div>
</td>
</tr>
</tbody>
</table>
✅
<header role="banner">
<p>Put company logo, etc. here.</p>
</header>
<nav role="navigation">
<ul>
<li>Put navigation here</li>
</ul>
</nav>
<main role="main">
<p>Put main content here.</p>
</main>
<footer role="contentinfo">
<p>Put copyright, etc. here.</p>
</footer>
⚠️
If you need a lot of ARIA and role tags,
you're probably not using HTML5 properly!
…but there are some valid use cases.
<button type="button" aria-label="Edit Details">
<svg><!-- some pencil icon --></svg>
</button>
<div>
<div id="header_search_bar-description">
Type to search. Use arrow keys to navigate results.
</div>
<input
aria-autocomplete="none"
aria-expanded="true"
aria-owns="header_search_bar-result"
aria-activedescendant="header_search_bar-result--selected-item"
aria-labelledby="header_search_bar-description"
type="text"
placeholder="Type a user name…"
id="header_search_bar-search_input-input"
/>
<label for="header_search_bar-search_input-input">
<button
tabindex="-1"
aria-label="Cancel search"
type="button"
class="SearchInput-clearButton-i5kLQ"
>
<svg><!-- some "X" icon --></svg>
</button>
</label>
</div>
<button tabindex="-1">You can't tab me</button>
<div tabindex="0">You can tab me</div>
<div tabindex="2">You can tab me last</div>
<div tabindex="1">You can tab me next</div>
.button:focus {
outline: none;
box-shadow: 0 0 0 2px @SIBlue;
}
Wow, a11y is a large topic!
Where do I go from here?
Development setup:
Guides:
Checklists:
Test tools:
Slides: https://bit.ly/webapp-a11y
Twitter: @herrherrmann
By Sebastian Herrmann
Insights into our learnings and first steps of implementing accessibility for large webapps.