Closing the Gaps

Prioritizing Accessibility in Custom Themes with Drupal 8

@emarchak
emarchak.github.io/closing-the-gaps

Erin Marchak
@emarchak

Myplanet

We build engaging web and mobile
products for the enterprise

@myplanetHQ

accessibility = a11y

accessibility = a11y

What am I going to cover?

  1. Why I'm here
  2. A11y & Drupal 8
  3. How to identify a11y gaps
  4. How to resolve a11y gaps
  5. Further resources

Why I'm here

A Case Study

AMI

Myplanet had a lot of empathy for what we were trying to do.
They felt and understood the mission we had for the site.

Virginia Vuleta
Director, Digital Strategy, Accessible Media Inc

  • User Experience Testing
  • Design Audits
  • A11y Audits by David MacDonald
  • Headless components using React.js

A11y & D8

A11y & D8

The power of the Web is
in its universality.

Tim Berners-Lee

Types of barriers

  • Physical, motor or mobile
  • Visual
  • Auditory
  • Learning
  • Speech or language
  • Mental, intellectual or developmental

Types of solutions

  • Keyboard, mouse & touch navigation
  • Screen readers compatibility & descriptive video
  • Captioning
  • Legible design & information architecture
  • Translatable content
  • Trigger warnings for content
overcoming bad design
W3C
The W3C Web accessibility initiative

The W3C Web Content Accessibility 2.0 Guidelines (WCAG 2.0)

WCAG 2.0 Levels

  1. Level A - Essential
  2. Level AA - Preferred
  3. Level AAA - Optional

WCAG 2.0 Levels

  1. Level A - Essential
  2. Level AA - Preferred
  3. Level AAA - Optional

A11y & D8

Drupal 8 Accessibility eXperience

#D8AX - Drupal 8 Accessibility eXperience

A11y in Drupal 8

How Drupal 8 Makes Your Website More Easily Accessible

How Drupal 8 Makes Your Website More Easily Accessible

We didn't want technically accessible, we wanted beautifully accessible

How to identify a11y gaps

Visual Testing

  • Plan heading structure early
  • Prioritize function over form
  • Allow indicators

Automated Functional testing

Manual Functional testing

  • VoiceOver for macOS/iOS
  • TalkBack for Android
  • NVDA for Windows
  • JAWS for Windows

User Experience testing

  • Pairs of researchers meet with individual users
  • Examine behaviours & attitudes relevant to the workflow

How to resolve a11y gaps

Functional solutions

Landmark Labels
Add descriptive aria labels to page landmarks. 

<main role="main" aria-label="{{ 'Content'|t }}">

Pagination
Improve legibility of pager for screen readers. 

<li class="pager__item pager__item--next">
  <a class="button" href="{{ items.next.href }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel') }}>
    <span class="visually-hidden">{{ 'Next page'|t }}</span>
    <span aria-hidden="true">{{ items.next.text|default('Next ›'|t) }}</span>
  </a>
</li>

Form Errors
Enable inline form errors, & remove HTML5 required attribute. 

if (isset($variables['attributes']['required'])) {
  unset($variables['attributes']['required']);
}

<Picture> element
Add Alternative text to picture elements. 

{% if img_element['#attributes'].url and alt %}
  <p class="visually-hidden">{{ alt }}</p>
{% endif %}

Skip to Main Content
Add js to help handle custom scrolling. 

$('html, body')
.animate({scrollTop: targetPosition.top}, 600)
.promise()
.then(function () {
  $target.focus();
});

Relate block titles & labels
Use aria labelled by on blocks to help with association. 

<a
  id="{{ cta_id }}"
  class="btn btn-default"
  href="{{ content.field_call_to_action[0]['#url'] }}"
  aria-labelledby="{{ cta_id }} {{ heading_id }}">

Experiential solutions

Visual Design Best Practices

UX Testing Best Practices

  • Mixing remote and in-person testing
  • Bring-your-own-device
  • Emphasis on depth over breadth

Further Resources

Thank you

@emarchak / @myplanetHQ
emarchak.github.io/closing-the-gaps