Nothing AG, Berne
Live, accessible slides broadcast:
links see email!ย ๐
Additional helpers:
KeyCastrย ๐, ScreenBrushย ๐
Goal:
Become a well-known "accessible-first" web
company in (and outside) Switzerland
We want to empower you! Let's transfer our skills to your team!
<a href="โฆ">
Click me!
</a>
<span onclick="location.href='โฆ'">
Click me!
</span>
Why? ๐ค
<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>
<style>
.link {โฆ}
.link:hover {โฆ}
.link:focus {โฆ}
.link:active {โฆ}
</style>
<a href="โฆ">
Click me!
</a>
<span onclick="location.href='โฆ'"
class="link"
tabindex="0"
role="link">
Click me!
</span>
<style>
.link {โฆ}
.link:hover {โฆ}
.link:focus {โฆ}
.link:active {โฆ}
</style>
Codepen: tiny.cc/gaad21-linksย ๐
<a href="โฆ">
Click me!
</a>
<span onclick="location.href='โฆ'"
class="link"
tabindex="0"
role="link">
Click me!
</span>
<style>
.link {โฆ}
.link:hover {โฆ}
.link:focus {โฆ}
.link:active {โฆ}
</style>
๐
would anyone do this?!
<span onclick="location.href='โฆ'">
Click me!
</span>
<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>
<!-- No such thing -->
<tablist>
<tab id="tab1">Tab 1</tab>
<!-- And more tabs -->
<content for="tab1">
Content 1
</content>
<!-- More content -->
</tablist>
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>
<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ย ๐
Source: w3.org/TR/using-aria/#rule1ย ๐
There (nearly) always exists a native element, even when not obvious at first sight!
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.
<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>
Only tiny bit of JavaScript! ๐ช๐ช๐ช
...there's more!
<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
Thank you for your support!
๐โค๏ธ๐ธ
Our competences: nothing.ch/accessibility
Questions & discussion