Make Your Website Easily Accessible with Drupal 8

Acquia

January 7, 2016

Mike Gifford

  • Founder and President of OpenConcept (Canada)

  • Drupal Core Accessibility Maintainer

  • 7th biggest contributor in Canada (37th worldwide) to Drupal 8 Core

  • Accessibility Advocate

  • Author:

    • The Definitive Guide to Drupal 7 (Accessibility Chapter)

    • Understanding Web Accessibility: Why Adopting Universal Web Design Will Be Good for Your Organization

Accessible for Who?

  • Blind & visually impaired
  • Low vision & color blind
  • Physical/motor disabilities
  • Cognitive & learning disabilities
  • temporary disabilities (injury/medication)
  • People with Epilepsy
  • Hard of hearing or deaf

World Wide Web Consortium

  • Web Content Accessibility Guidelines (WCAG)
  • Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)
  • Authoring Tools Accessibility Guidelines (ATAG)
  • HTML Working Group (HTML5)

Start with Good Defaults

  • Tested code
  • Semantic markup
  • Standards compliant
  • Transparent process

WAI-ARIA

  • Became a W3C Recommendation in 2014
  • Primarily important for screen-readers
  • Designed for complex user interface controls
  • Provides roles & properties for enhanced definitions

role="button"

aria-live="assertive"
aria-describedby
role="complementary"

HTML5

  • Mobile friendly
  • More built-in meaning
  • Better SEO

<main>

<header>

<aside>

<details>

HTML5 Boilerplate

Move from element-* format to:

  • hidden

  • visually-hidden

  • visually-hidden.focusable

  • invisible

New Features

  • Aural Alerts - Drupal.announce()
  • Control Tab Order - Drupal.TabbingManager
  • Fieldsets & Details - expand/collapse
  • Required Alt Text - CKEditor & image defaults
  • Inline Form Errors - Experimental Option

Little(r) Things

  • Larger font sizes
  • Improved color contrast
  • Configurable descriptions
  • Just one H1
  • Keyboard focus

CKEditor

  • Proudly found elsewhere
  • Drupal 8 improved CKEditor's Accessibility
  • WYSIWYG in Core will produce better content

  • Support of HTML5 figure/figcaption

The Authoring Tool

  • ATAG 2.0 - September 2015
  • WCAG 2.0 + helping authors
  • Expanded descriptions
  • Defaulting to accessible options
  • Allow headings in Filtered HTML text format

Views & Tables

  • Accessible Views & Views UI
  • Drupal tables produced by Views
  • Views tables include:

  • caption/summary

  • header/id

Inline Form Errors

  • Optional module - much more accessible forms
  • Links jump to full error text inline
  • Errors redesigned to be easily understandable

  • Errors defined by more than color

  • ARIA described-by for semantic relationships

Questions

OpenConcept Consulting

  • OpenConcept.ca
  • @mgifford
Made with Slides.com