Nothing AG, Bern
Live, accessible slides broadcast
ย
Table of content
Goal
Become a well-known "accessibility-first" web
company in (and outside) Switzerland
Nothing AG, Bern
(aka. "The Dark Ages")
Thinking outside the boxย
Communication still tedious!
Everything's better now (?)
ย
ย
ย
ย
ย
aesthetics can be 100% accessible!
National and international laws adapting
ย
For today and tomorrow
ย
(Carly Fiorina)
Nothing AG, Bern
<a href="โฆ">
Click me!
</a>
<span onclick="location.href='โฆ'">
Click me!
</span>
Why?ย
The <a> HTML element [...] creates a hyperlink to web pages, [...] or anything else a URL can address
The <span> HTML element [...] is a generic inline container for phrasing content, which does not inherently represent anything
It should be used only when no other semantic element is appropriate
<a href="โฆ">
Click me!
</a>
<span onclick="location.href='โฆ'">
Click me!
</span>
<a href="โฆ">
Click me!
</a>
<span onclick="location.href='โฆ'"
class="link"
tabindex="0"
role="link">
Click me!
</span>
<a href="โฆ">
Click me!
</a>
<span onclick="location.href='โฆ'"
class="link"
tabindex="0"
role="link">
Click me!
</span>
โฉ
would anyone do this?!
The button vs link case
The <a> HTML element [...] creates a hyperlink to web pages, [...] or anything else a URL can address
The <button> HTML element represents a clickable button, used to submit forms or [...] for standard button functionality
But confusion happens when....
But confusion happens when....
<ul class="references-guides " role="menu">
<li role="none">
<a tabindex="-1" href="/en-US/docs/Learn" role="menuitem">
Learn web development
</a>
</li>
...
</ul>
<button onclick="location.href='โฆ'">
Wrong!
</button>
Please stop doing this!
Even if visually sometimes buttons and links styling are exchanged (and visual users are used to it), you should always remain semantically correct in HTML !
<a> or form submits โก trigger a navigation change
<button> or form elements โก trigger a UI state change
<select>
<option id="cat">Cat</option>
<option id="dog">Dog</option>
</select>
<style><!-- Won't have an effect -->
select { font-weight: bold; }
#cat { background-color: blue; }
#dog { background-color: red; }
</style>
<select>
<option id="cat">Cat</option>
<option id="dog">Dog</option>
</select>
<style><!-- Won't have an effect -->
select { font-weight: bold; }
#cat { background-color: blue; }
#dog { background-color: red; }
</style>
<div role="listbox">
<div role="option" id="cat">Cat</div>
<div role="option" id="dog">Dog</div>
</div>
<style>
[role=listbox] { font-weight: bold; }
#cat { background-color: blue; }
#dog { background-color: red; }
</style>
Quite a few well established usage patterns without HTML equivalent.
Requires to tinker own custom solution.
<ul role="tablist">
<li role="tab">
<a href="#section1" role="presentation"
id="tab1" aria-selected="true">
Tab 1
</a>
</li>
</ul>
<section id="section1" role="tabpanel"
tabindex="-1" aria-labelledby="tab1">
Content 1
</section>
<!-- No such thing -->
<tablist>
<tab id="tab1">Tab 1</tab>
<!-- And more tabs -->
<content for="tab1">
Content 1
</content>
<!-- More content -->
</tablist>
ย
ย
<div role="listbox">
<div role="option" id="cat">Cat</div>
<div role="option" id="dog">Dog</div>
</div>
<style>
[role=listbox] { font-weight: bold; }
#cat { background-color: blue; }
#dog { background-color: red; }
</style>
" If you can use a native HTML element (or attribute) with the semantics and behavior you require, then do so. Do not instead re-purpose an element and add an ARIA role, state or property to make it accessible. "
Source: w3.org/TR/using-aria/#rule1๐
There (nearly) always exists a traditional element, even when not obvious at first sight!
Nothing AG, Bern
?
?
?
?
Why they are important
Codepen ๐
This is very similar to Word's styles!
d
ย
BUTย keep in mind that for other form of disability other requirements must be respected (e.g captions for videos)
of screen readers
Screen readers read and convey semantic information only.
<a href="...">Click me!</a>
<p>Some text here.</p>
<h2>A second level heading</h2>
<input type="text">
<!-- ?? -->
<span onclick="location.href='โฆ'">
Click me!
</span>
They are not interested in visual stylings.
.heading {
font-weight: bold;
font-size: 28px; }
.link {
text-decoration: underline; }
To be conveyed through audio, an element's meaning must be obvious.
If an element is interactive, it must be obvious how to interact with it.
Traditional HTML is self-explanatory.
Custom solutions need manual explaining.
<label for="hobby">
Favourite Hobby
</label>
<select id="hobby">
<!-- List of <option>
elements -->
</select>
<!-- A JavaScript autocomplete -->
<label for="hobby">Favourite Hobby</label>
<input id="hobby" aria-describedby="description">
<!-- Custom list of suggestions -->
<p id="description">
This is an autocomplete. Enter characters
to display suggestions, then select one.
</p>
If an element is interacted with, it must provide clear and immediate information on what's the resultย of the interaction.
<!-- A JavaScript autocomplete -->
<label for="hobby">Favourite Hobby</label>
<input id="hobby" aria-expanded="false">
<!-- List of (initially hidden) suggestions -->
<script>
// On focus, toggle aria-expanded="true"
// (and show list of suggestions).
</script>
Nothing AG, Bern
<ul role="listbox">
<li role="presentation">
<div role="option">1st option</div>
</li>
<li role="presentation">
<div role="option">2nd option</div>
</li>
</ul>
<ul role="listbox">
<li role="presentation">
<div role="option">1st option</div>
</li>
<li role="presentation">
<div role="option">2nd option</div>
</li>
</ul>
<div>
<div>
<span>1st option</span>
</div>
<div>
<span>2nd option</span>
</div>
</div>
No traditional HTML element available...?
Come on!
of radio buttons!
<input type="radio" name="hobbies" id="dancing">
<label for="dancing">Dancing</label>
<input type="radio" name="hobbies" id="gardening">
<label for="gardening">Gardening</label>
<input type="radio" name="hobbies" id="dancing">
<label for="dancing">Dancing</label>
<input type="radio" name="hobbies" id="gardening">
<label for="gardening">Gardening</label>
Only tiny bit of JavaScript!
<a href="โฆ">
Click me!
</a>
<span onclick="location.href='โฆ'"
class="link"
tabindex="0"
role="link">
Click me!
</span>
When you're tempted to glue together some random <div> / <span> elements with JavaScript handlers
ย
ย
Nothing AG, Bern