Talk: Practically Accessible
This page consists of multiple slides, each contained within its own section. Each section has a link at the end to the next section.
Front page and slide of the talk
Practically Accessible
Prefer reduced motion or a light background? Go to talks.derk-jan.com to follow along on your device.
Want to see me speak or listen to this talk? Watch a recording on YouTube.
Introduction
Slide 2: introduction. Hi there!
- My name is Derk-Jan Karrenbeld
- @SleeplessByte
- @SleeplessByte
Slide 3: I work at
Slide 4: Example 1 out of 3 of my work
# Helper to create an accessible dialog container.
#
# It is REQUIRED to have a title inside the dialog, with the id that matches
# the dialog id, followed by '-title'. A dialog with the id "my-dialog" MUST
# have an element (for example h3) with the id 'my-dialog-title'. If the
# design requires this title to be hidden, only hide it visually. The
# brandless class .sr-only achieves this.
#
# @see https://www.w3.org/TR/wai-aria-1.1/#aria-modal
# @see https://www.w3.org/TR/wai-aria-1.1/#aria-labbeledby
# @see https://www.accessibility-developer-guide.com/examples/widgets/dialog/
# @see https://www.accessibility-developer-guide.com/knowledge/screen-readers/desktop/browse-focus-modes/
#
# @param [String] id unique identifier that can be used to target and/or
# control this dialog.
# @param ['dialog', 'alertdialog'] role the type of role.
#
# rubocop:disable Metrics/ParameterLists
def dialog(id:, role: 'dialog', hidden: true, tag: :div, variants: [], **opts, &block)
Slide 5: Example 2 out of 3 of my work
/* eslint-disable jsx-a11y/no-redundant-roles */
/**
* You may be wondering: what? Why is this rule disabled for this
* particular element?
*
* Well. Since the entire row should become a link, a table cannot
* be used. When using a table, there would be no easy way to make
* it act in the accessibility tree as a link, and it's asking for
* some finicky JavaScript on-click weirdness, which is hard to get
* right if keyboard support is imperative.
*
* The next best thing to semantically represent our data is a list.
* An ordered list in this case, as the list is either most recent
* to least recent, or that in reverse.
*
* However, a list without a list-style, will not be announced as
* a list in VoiceOver (in Safari). This is considered a feature and
* not a bug. In this particular case it's actually really a list,
* but displayed as something like a table, and announcing it would
* help a screen-reader-assisted user. "List with x items".
*
* The only way to make VoiceOver behave, is to explicitly mark this
* list as role="list". Normally this is no-no, but for this
* particular case it is fine.
*
* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
*/
<ol id="testimonials-list" role="list">
Slide 6: Example 3 out of 3 of my work

About today
Experience a screenreader
Preparations
What's the status of karaoke in Rotterdam?
Looks can be deceiving
Question time!
How long does it take to make this page adequately screen-reader accessible?
Answer time!
430 seconds. That's just over 7 minutes.
First steps for a screenreader
Some of the changes
- Landmarks
- Headings
- Skip link
- Adding labels for visual cues using
.sr-only
- Hiding irrelevant content using
aria-hidden
aria-label
aria-current
Landmarks
<div>
<div>
<div> <!-- no landmark -->
<a href="https://www.amsrb.org/"> Home </a>
<a href="#content"> Status </a>
<div>
<div>
<nav> <!-- landmark -->
<a href="https://www.amsrb.org/"> Home </a>
<a href="#content"> Status </a>
Headings
<h3>
Welcome to Netherlands.rb's status page
</h3>
<h1> <!-- first heading of the page -->
Welcome to Netherlands.rb's status page
</h1>
Adding labels for visual cues using .sr-only
<div>
<!-- just a green circle -->
<span className="rounded-full w-4 h-4 bg-green-500 block" />
</div>
<div>
<!-- just a green circle -->
<span className="rounded-full w-4 h-4 bg-green-500 block" />
<!-- screen reader content -->
<span className="sr-only">available in Rotterdam</span>
</div>
aria-label(ledby)
<div>
<p>
This page provides status information on the services ...
<section aria-labelledby="title-about">
<h2 className="sr-only" id="title-about">
More about this status page
</h2>
<p>
This page provides status information on the services ...
aria-current
<a href="overview-page"> Overview </a>
<a href="amsterdam"> Amsterdam </a>
<a href="rotterdam"
class="some-css-indicator"
> Rotterdam </a>
<a href="overview-page"> Overview </a>
<a href="amsterdam"> Amsterdam </a>
<a href="rotterdam"
class="some-css-indicator"
aria-current="page"
> Rotterdam </a>
Results in action
A mouse isn't guaranteed
A mouse isn't guaranteed
Question time!
How long does it take to make this page adequately accessible for those that only use a keyboard?
Answer time!
30 seconds to apply a fix.
Keyboard focus indicator
a, button, input[type!="hidden"] {
outline: none;
}
a, button, input[type!="hidden"] {
/* please just don't */
}
Experience a colour deficiency
Are we done now?
Question time!
How long does it take to make this page adequately accessible for those with a colour blindness?
Answer time!
30 seconds to apply a fix.
Using built-in browser tools
This is what has changed
- Colour contrast of at least 4.5:1
- Colour is never the only indicator
Use the built-in browser tools
How to test
How do I know what I am doing is right?
How do I know what I am doing is right?
- Test with real users (manual)
- Automated tests
- Developer tools
- Follow WCAG: Web Content Accessibility Guidelines
Automated tests
- Watch Testing Web Accessibility by Adrián Bolonio
- Use browser plugin: axe
- Use a standalone website: wave.webaim.org
- Remember less than 50% of issues can be detected
Developer tools
- use built-in browser tools (contrast, accessibility tree)
- Use a special browser such as Polypane
- Follow the Accessibility Developer Guide
- Follow the ARIA Authoring Practices Guide (APG)
Web Content Accessibility Guidelines
Outro
How do I convince my manager/boss/client?
How do I convince my manager, boss, client, etc?
You don't.
How do I convince myself (as boss or client)?
- European Accessibility Act
- Americans with Disabilities Act
- Elimination of Discrimination against Persons with Disabilities Act (Japan)
One thing to remember
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee, W3C Director and inventor of the World Wide Web