Nothing
We transform grand ideas into pioneering products. With the power of design.
Complex and accessible JS widgets
(with simple HTML)
Nothing AG, Berne
Hello everybody! 👋🏼
- Josua Muheim
-
Web developer ~15 years
- Technology should unlock human potential
- Goal: Inclusion of all individuals
- Accessibility expert ~8 years
- Former employee of «Access for all» 🔗
- Initiator of «A11y Dev Guide» 🔗
A11y Dev Guide (ADG)
- Comprehensive resource
- Tangible and technical
- Easy to understand
- Code examples
- By developers, for developers
- Open Source
- accessibility-developer-guide.com 🔗
- github.com/Access4all/adg 🔗
Nothing AG
- Peer to peer (P2P)
- Web agency / venture lab
- Berne, Switzerland
- www.nothing.ch
Goal:
Become a well-known "accessible-first" web
company in (and outside) Switzerland
A question
of trust
What do you trust more?
<a href="…">
Click me!
</a><span onclick="location.href='…'">
Click me!
</span>
Why? 🤔
Benefits of traditional HTML
<a href="…">
Click me!
</a><span onclick="location.href='…'">
Click me!
</span>- Behaviour for free
- Go to address on click
- Keyboard focusability
- Styles for free
- Underline
- Focus, hover, active states
- Compatibility
- Forward and backwards
- Without JavaScript
Sure, we can "enhance" the fake
<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>- Apply custom...
- aesthetics
- behaviour
- semantics
But how will it perform?
- Still: it's not really a link! 🤥
- Can't open context menu
- Can't bookmark (drag & drop)
- Possibly many more things
Codepen: tiny.cc/gaad21-links 🔗
Traditional HTML beats
quirky custom solutions
- Much functionality "for free"
- Robust
- Performant
<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>😃
But why
would anyone do this?!
Reason I: Ignorance / naivety
<span onclick="location.href='…'">
Click me!
</span>- Encountered innumerable times
- Typical bad use cases:
- List of search results
- Menu in single page apps
- See Apple's product list 🔗
- Please stop doing this!
- Use real links (or buttons)!
Reason II: HTML can't be styled
<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>- In earlier days, many HTML elements offered limited CSS
- Some still can't be styled
- Instead, use role-attributes
- role="listbox" for <select>
- role="option" for <option>
<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>Reason III: HTML missing
<!-- 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>role = ARIA
- Accessible Rich Internet Applications standard
- Version 1.0 🔗 released in 2014 by W3C 🔗
- Offers attributes to enrich traditional HTML with semantics
- But: they don't add functionality!
- Still a lot of JavaScript to add:
- Manage visibility and styles
- Provide keyboard focusability
- Provide interactivity
- Update changes to semantics
- aria-selected="true"
- Quickly becomes complex
<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>ARIA example
- Collapsible Dropdown Listbox Example: w3c.github.io/aria-practices 🔗
- ~150 lines of CSS
- ~900 lines of JavaScript!
- Support varies heavily among browser / screen reader combos
- ARIA offer limited:
- "listbox" or "tablist" available
- "datepicker" and others missing
- You will quickly reach the point where there is no official recipe
- So: what to do then?
First rule of ARIA use
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 🔗
First rule of ARIA use
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.
No HTML element
available?
- A <select> offers predefined list of options
- One of which can be chosen
- What other HTML element allows for this?
Come on!
Radio buttons!
-
100% customisable
- <label> elements can be
styled - <input> can be visually
hidden (moved off-screen)
- <label> elements can be
- No JavaScript needed
- 100% accessible
A listbox
of radio buttons!
Accessibility-Developer-Guide.com Autosuggest
- URL: examples/widgets/autosuggest/ 🔗
- Radio buttons
- Very good screen reader accessibility
- Announces itself appropriately 👍
- Announces availability of options 👍
- Announces selected option + total of options 👍
<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 / ARIA!
💪💪💪
Accessibility-Developer-Guide.com Autosuggest Demo
Verdict
- Very accessible
- ~60 lines of CSS
- ~230 lines of JavaScript
- Including filter functionality
What about multi selects?
- There is none yet
- We are currently creating it!
- Eidgenössische Technische Hochschule (ETH) Zürich
- What to use instead of radio buttons?
- Checkboxes, indeed!
-
josh.ch/dropdown/multi.html 🔗
- Proof of Concept
- Reusable widget 😊
- Join us! 💪
Let's recap
Form controls are powerful
- They handle much more than basic user input
- They can handle many sophisticated UI patterns
- They are:
- Simple and compatible
- Robust and performant
- Innately accessible
- They can be styled as wished
What do you trust?
<a href="…">
Click me!
</a><span onclick="location.href='…'"
class="link"
tabindex="0"
role="link">
Click me!
</span>Remember next time
When you're tempted to glue together some random <div> / <span> elements with JavaScript handlers
That's all folks!
Reach out: josua@nothing.ch
Our competences: nothing.ch/accessibility
Thank you.
DeafIT 2022: Complex and accessible JavaScript (widgets with simple HTML)
By Nothing
