Bridging the Web Accessibility Gap Drupal 8 and Section 508 Refresh

Mike Gifford, OpenConcept Consulting Inc.

Introduction

Mike Gifford, President


OpenConcept Consulting Inc.


Drupal Core Accessibility Maintainer
@mgifford


http://openconcept.ca


#bad-a11y

What is Web Accessibility

Web accessibility refers to the inclusive practice of removing barriers that prevent access to websites by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.

Web Accessibility History

  • 1996 W3C Committee
  • 1997 new Section 508
  • 1999 WCAG 1.0
  • 2008 WCAG 2.0
  • 2014 WAI-ARIA 1.0
  • 2016 Section 508 Refresh?

Drupal Accessibility

  • Drupal 6 - Web Standards (2008)
  • Drupal 7 - WCAG 2.0 AA (2011)
  • Drupal 8 - ARIA & ATAG (2015?)

Drupal 8 Improvements

  • Theme Layer - Accessible Examples
  • Core Systems - Used by All
  • Core Modules - Used by Most

Bartik & Seven

  • ARIA Landmark Roles
  • Browser Changes (Webkit)
  • Underlined Links (Bartik)
  • Color Contrast
  • CSS Outline/Focus
  • Orphaned Labels (Seven)
  • Keeping Up With Core (Dropbutton)

Base, Field, Image & i18n

  • ARIA & labels
  • More accessible tables
  • HTML5's phone number
  • Phone number Field
  • Visually hidden field label formatter
  • Option for required alt text for images
  • Longer & translatable alt text & titles
  • Help Document & ATAG 2.0
  • Improved string translation

Forms

  • ARIA - landmarks, aria-label & aria-invalid=true
  • Asterisk to CSS
  • Configurable position of description
  • Adding in title to all form elements
  • Natively supporting HTML5's required
  • Allowing custom validation error messages

Toolbar & User Admin

  • Move to more semantic NAV from DIVs
  • ARIA & Labels
  • Color Contrast
  • Removing auto-capitalization & auto-correction of usernames & passwords
  • Adding color & description to password checker

Javascript!

  • Tabbing Manager
  • Drupal.announce
  • jQuery UI Update
  • jQuery Autocomplete - Proudly Invented Elsewhere
  • ARIA table improvements - aria-sort

Markup

  • HTML5 adoption
  • ARIA aria-describedby & roles for blocks
  • Details rather than Fieldsets
  • Pagination, breadcrumbs & books improvements
  • Headers for taxonomy term lists

CSS

  • Color contrast
  • Keeping up with browsers
  • Some larger text
  • Standardization to HTML5 Boilerplate
    • hidden
    • visually-hidden
    • visually-hidden.focusable
    • invisible

Comment, Forum & Context

  • Removing empty headings
  • Adding proper semantics
  • Better use of images in forums
  • Use of ARIA role=button in Contextual module
  • Improving keyboard only accessibility
  • Keeping up with changes in Core!

CKEditor, Editor & Filter

  • Cleaning up machine name
  • More accessible admin page
  • Leverage jQuery UI modal Dialog
  • Upstream fixes to CKEditor
  • Making Alt text required but dis-ablable
  • Ability to add headings by default
  • Help Document & ATAG 2.0

Views!

  • Improved mini-pager semantics
  • Ability to set caption & summary in tables
  • Include header/id for improved semantics
  • Improved color contrast in admin
  • Fix duplicate IDs
  • Add more context to add links
  • Use common modal dialog
  • Orphaned Labels & empty headers
  • Help Document & ATAG 2.0

All The Other Stuff

  • Fieldsets to advanced search
  • Removal of Overlay
  • Alt text attribute available in theme_image()
  • Better skip-lins for Webkit browsers
  • Improvements in defaults for color module

We Aren't Done Yet!

  • Error messages
  • In-place editing improvements
  • Using Javascript + HTML5 validation
  • Improve password match
  • More ATAG improvements
  • Feedback needed from user testing

How to contact me:

  • mike@openconcept.ca
  • @mgifford
  • http://openconcept.ca

 

Drupal

  • http://groups.drupal.org/accessibility
  • Issue Queue: http://goo.gl/iIdYNA

BADCamp 2014

By Mike Gifford

Made with Slides.com

BADCamp 2014

Drupal 8's Accessibility

  • 4,013

More from Mike Gifford