Make Your Website Easily Accessible with Drupal 8
February 29, 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
Make Your Website Easily Accessible with Drupal 8
By Mike Gifford
Make Your Website Easily Accessible with Drupal 8
Acquia webinar about Drupal 8 accessibility enhancements.
- 1,627