You are currently on Practically Accessible: Talk, on Code in Bits and Pieces
Skip to main content

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!

Slide 3: I work at

Delft Solutions
A Dutch software agency for consultancy, custom software, and more.
External: Read more on delftsolutions.nl

Slide 4: Example 1 out of 3 of my work

Example: one of my Rails view helpers
# 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

Example: one of my explanations
/* 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

An issue on the sdoc repository indicating multiple accessibility issues, and which low hanging fruit should be solved
Example: contributing to rails
External: Read issue 41813 in rails/rails

About today

Experience a screenreader

Preparations

External: Complete the Accessibility Developer Guide setup

Amsterdam.rb status page

Open the test page in a new window

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

Before
<div>
  <div>
    <div> <!-- no landmark -->
      <a href="https://www.amsrb.org/"> Home </a>
      <a href="#content"> Status </a>
After
<div>
  <div>
    <nav> <!-- landmark -->
      <a href="https://www.amsrb.org/"> Home </a>
      <a href="#content"> Status </a>

Headings

Before
<h3>
  Welcome to Netherlands.rb's status page
</h3>
After
<h1> <!-- first heading of the page -->
  Welcome to Netherlands.rb's status page
</h1>

Adding labels for visual cues using .sr-only

Before
<div>
  <!-- just a green circle -->
  <span className="rounded-full w-4 h-4 bg-green-500 block" />



</div>
After
<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>

Hiding irrelevant content using aria-hidden

Before
<!-- "Contact"                             -->
Contact &rarr;
After
<!-- "Contact"                             -->
Contact <span aria-hidden="true">&rarr;</span>

aria-label(ledby)

Before
<div>



  <p>
    This page provides status information on the services ...
After
<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

Before
<a href="overview-page">  Overview  </a>
<a href="amsterdam">  Amsterdam  </a>
<a href="rotterdam"
    class="some-css-indicator"

>  Rotterdam </a>
After
<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

Open the modified test page in a new window

A mouse isn't guaranteed

A mouse isn't guaranteed

Open the modified test page in a new window

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

Before
a, button, input[type!="hidden"] {
  outline: none;
}
After
a, button, input[type!="hidden"] {
  /* please just don't */
}

Experience a colour deficiency

Are we done now?

Open the modified test page in a new window

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

Use the built-in browser tools

Open the modified test page in a new window

How to test

How do I know what I am doing is right?

How do I know what I am doing is right?

Automated tests

Developer tools

Web Content Accessibility Guidelines

External: Open the WCAG 2 Overview page

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

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