Complex and accessible JavaScript widgets

Logo Nothing AG

(with simple HTML)

4h in-depth workshop

Wednesday, 28th of July

Nothing AG, Berne

nothing.ch/accessibility

Logo Nothing AG

Live, accessible slides broadcast:
links see email! 🔗

  • Please use only as additional aid
  • Shared screen is main reference
    • ​Switch between applications
    • Use DOM Inspector

Additional helpers:

  • Visible key strokes
  • Visible mouse clicks
  • Zoom
  • Highlight/paint on screen

KeyCastr 🔗, ScreenBrush 🔗

Portrait of Josua Muheim

Hello everybody! 👋🏼

  • Josua Muheim
  • Web developer ~15 years
  • Technology​ should unlock human potential
  • Goal: Inclusion of all individuals
  • Accessibility expert ~8 years
  • Initiator of «A11y Dev Guide» 🔗
Logo Nothing AG
AD G* Created with Sketch.

A11y Dev Guide (ADG)

Logo Nothing AG
Logo Accessibility Developer Guide AD G* Created with Sketch.
Screenshot of Accessibility Developer Guide

Nothing AG

Logo Nothing AG
  • Peer to peer (P2P)
  • Web agency / venture lab
  • Berne, Switzerland
  • www.nothing.ch
Logo Nothing AG
Logo Nothing AG

Goal:
Become a well-known "accessible-first" web
company in (and outside) Switzerland

Nothing AG

Logo Nothing AG

www.nothing.ch 🔗
Peerdom screenshot

www.peerdom.org 🔗

Let us share our skills with you!

  • Design reviews
  • Semantic HTML prototyping
  • Visual and functional prototyping
  • Review & optimise existing project
  • Presentations and workshops
     
  • Hands-on work on your product
  • Written & video documentation

On your accessibility journey

Reach out: josua@nothing.ch

nothing.ch/accessibility

Let us share our skills with you!

  • Design reviews
  • Semantic HTML prototyping
  • Visual and functional prototyping
  • Review & optimise existing project
  • Presentations and workshops
     
  • Hands-on work on your product
  • Written & video documentation

On your accessibility journey

Reach out: josua@nothing.ch

nothing.ch/accessibility

We want to empower you! Let's transfer our skills to your team!

Who are you? 👋🏼

  • What's your name?
  • What's your profession / role?
  • Do you have any form of disability?
    • We'll form little groups (breakout rooms)
       
  • What brought you here?
  • Experiences with accessibility?
  • Expectations for today's workshop?
     
  • Please pass on to another participant!

A question

of trust

Carabiner

What do you trust more?

<a href="…">
  Click me!
</a>
<span onclick="location.href='…'">
  Click me!
</span>
Two climbers: one secures the other who is hanging over the abyss with a rope

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
    • Degrades gracefully

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?

<a href="…">
  Click me!
</a>
  • Still: it's not really a link​! 🤥
    • Can't open context menu
    • Can't bookmark
    • Possibly many more things
<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 🔗

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 ☠️ 

<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 drastically 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.

Taking a closer look

at custom dropdown listboxes

Animation of Google autocomplete in action

Google autocomplete

  • URL: google.com 🔗
  • role attributes
  • Mediocre screen reader accessibility
    • Announces itself as searchable combo box 👍
    • Does not announce availability of options 👎
    • Announces selected option 👍
<ul role="listbox">
  <li role="presentation">
    <div role="option">1st option</div>
  </li>
  <li role="presentation">
    <div role="option">2nd option</div>
  </li>
</ul>
Screenshot of Google's autocomplete

Amazon autocomplete

  • URL: amazon.com 🔗
  • <div> and <span>
  • Bad screen reader accessibility
    • Announces itself as bare text search 👎
    • Does not announce availability of options 👎
    • Announces selected option 👍
<div>
  <div>
    <span>1st option</span>
  </div>
  <div>
    <span>2nd option</span>
  </div>
</div>
Screenshot of Amazon autocomplete

Interim conclusion

  • Both need a dropdown
  • Dropdown needs fancy styling
    • <select> not an option
  • Google uses ARIA
  • Amazon uses <div> and <span>
  • Lots of JavaScript, mediocre to bad accessibility
  • Couldn't this be done better?
Thinking face

No traditional HTML element available...?

Hmmm...

  • A <select> offers predefined list of options
  • One of which can be chosen
  • What other HTML element allows for this?
Thinking face

Come on!

Radio buttons!

Thinking face
Logo Accessibility Developer Guide AD G* Created with Sketch.
  • 100% customisable
    • <label> elements can be styled
    • <input> can be visually hidden (moved off-screen)
  • No JavaScript needed
  • 100% accessible
Radio buttons

A listbox

of radio buttons!

Logo Accessibility Developer Guide AD G* Created with Sketch.

ADG autosuggest

  • URL: ADG: 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! 💪💪💪

Logo Accessibility Developer Guide AD G* Created with Sketch.

4 simple milestones to implement

  1. Plain HTML
  2. Interactivity
Logo Accessibility Developer Guide AD G* Created with Sketch.
  1. Accessibility optimisations
  2. Visual styles

Verdict

  • Very accessible
  • ~60 lines of CSS
  • ~230 lines of JavaScript
    • Including filter functionality
Logo Accessibility Developer Guide AD G* Created with Sketch.

But wait...

...there's more!

Logo Accessibility Developer Guide AD G* Created with Sketch.

Unexpected usages of form controls

Logo Accessibility Developer Guide AD G* Created with Sketch.
Screenshot of Accessibility Developer Guide

Let's recap

Form controls are powerful

  • They handle much more than basic user input
  • They can handle many simple usage patterns
    • Even complex ones when combined
  • They are:
    • Simple and compatible
    • Robust and performant
    • Innately accessible
  • They can be styled as wished
Spock from Starship Enterprise

What do you trust?

<a href="…">
  Click me!
</a>
<span onclick="location.href='…'"
      class="link"
      tabindex="0"
      role="link">
  Click me!
</span>
Carabiner

Remember next time

When you're tempted to glue together some random <div> / <span> elements with JavaScript handlers

We love to share our skills with you!

  • Design reviews
  • Semantic HTML prototyping
  • Visual and functional prototyping
  • Review & optimise existing project
  • Presentations and workshops
     
  • Hands-on work on your product
  • Written & video documentation

On your accessibility journey

Reach out: josua@nothing.ch

nothing.ch/accessibility

Portrait of Josua Muheim

This workshop's conscious pricing

  • Accessibility is all about inclusion
  • We encourage everyone to participate
  • Happy to let you determine your contribution
  • Payment after the workshop
  • You'll receive email with further details

Nobody to be left behind

Thank you for your support!
🙏❤️💸

That's all folks!

Logo Nothing AG

Reach out: josua@nothing.ch

Coffee break
Portrait of Josua Muheim

Our competences: nothing.ch/accessibility

Questions & discussion

Complex and accessible JavaScript widgets with simple HTML

By Nothing

Made with Slides.com

Complex and accessible JavaScript widgets with simple HTML

  • 276

More from Nothing

  • 4 milestones to create an accessible widget
    Nothing
    70
  • The quest for a searchable multi select (combobox)
    Nothing
    58