Accessibility
for Webapps

Insights into our learnings
and implementations

 

Sebastian Herrmann (@herrherrmann)

Introduction

Web Accessibility (a11y)

"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

Scenarios

your app/website

🖥 ⌨️🖱

🖥 ⌨️

🎧 ⌨️

(screen reader user)

Small Improvements

Sections:

- Header

- Sidebar

- Main

Links:

- Create

…

let's build for
all of them!

📱

  • we're building a large webapp since ~2010:

 

 

 

 

 

 


 

  • we care about accessibility ❤️
  • …at least now (~2018)! 😅 
--------------------------------------------------------------------------------
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
--------------------------------------------------------------------------------

Some first steps

Semantic HTML

Examples:

Semantic HTML

  • Avoid unnecessary nesting (Fragments, anyone?) 
<table>
    <tbody>
        <tr>
            <td>
                <div class="inline-content">
                    <span class="table-text">
                        <p>
                            Some content
                        </p>
                    </span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

❌

Semantic HTML

  • Avoid unnecessary nesting (Fragments, anyone?)
  • Use role="presentation" for decorative elements
<table>
    <tbody>
        <tr>
            <td>
                <div class="inline-content" role="presentation">
                    Some content
                </div>
            </td>
        </tr>
    </tbody>
</table>

✅

HTML5 + Landmarks

https://www.a11y-101.com/development/landmarks

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

ARIA tags

⚠️

If you need a lot of ARIA and role tags,
you're probably not using HTML5 properly!

…but there are some valid use cases.

Common ARIA tags

  • aria-label to add context to an icon-only button:

 

 

  • aria-hidden to hide invisible content from screen readers
  • aria-live for content updates (e.g. announcers)
  • aria-required and/or aria-invalid for inputs
  • probably more, depending on your features…
<button type="button" aria-label="Edit Details">
    <svg><!-- some pencil icon --></svg>
</button>

ARIA tags Example

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

ARIA tag support

  • There are specs
  • …but they're not implemented consistently
  • So test it yourself!

https://developer.mozilla.org/en-US/docs/Web/Accessibility/
ARIA/ARIA_Techniques/Using_the_presentation_role

Fix your Focus

  • Make interactive elements accessible via tabbing!
  • Use a sensible focus order:
    • tabindex="-1" prevents tabability
    • tabindex="0" adds tabability in the normal flow
    • tabindex="1" (and above) should be prevented
<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>

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Fix your Focus II

  • Use an obvious focus style!
  • Don't just reset via :focus { outline: none; }
  • We like a "hard" box-shadow that doesn't affect the layout flow:
.button:focus {
    outline: none;
    box-shadow: 0 0 0 2px @SIBlue;
}

Fix your Focus III

There's much more!

Wow, a11y is a large topic!
Where do I go from here?

Approaches

A11y in your workflow

Development setup:

A11y in your workflow

Testing/QA phase:

Screen Readers

Screen Reader Demo!

Screen Readers

https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing

Workshops

  • Spread awareness and focus on tackling the most important issues to get started from "zero"

Style Guide

  • Helps to build consistent, documented components
  • Playground for testing components in isolation

Continuity

  • Incorporating a11y concerns into your daily workflows is already a step forward
  • Spread awareness about this topic, internally and externally
    • Share your learnings and efforts (blog, conference, open source project, …)

Summary

Summary

  • A11y is a complex topic
  • A11y is an important topic
  • Knowing about a11y will make you a better web developer
  • Start slowly and steadily (instead of big bang)
  • There are many resources out there
  • Check what others have built
  • Test, test, test (automatically and manually)
  • Keep the topic alive over time

Resources

Guides:

Checklists:

Test tools:

✌️ Thanks a lot!

Slides: https://bit.ly/webapp-a11y

Twitter: @herrherrmann

Accessibility for Webapps

By Sebastian Herrmann

Made with Slides.com

Accessibility for Webapps

Insights into our learnings and first steps of implementing accessibility for large webapps.

  • 3,021

More from Sebastian Herrmann