A new era of accessibility with Drupal 8

Slides for access to links etc:

https://goo.gl/vlmL87

https://slides.com/philwolstenholme/d8-a11y/live

Phil Wolstenholme

• https://wolstenhol.me
• https://twitter.com/philw_
• https://www.drupal.org/u/phil-wolstenholme

Drupal 8 and accessibility

Frontend spruce-up

• Conversion of PHP templates to Twig perfect time to review Core's templates
• Colour contrasts reviewed
• Form improvements:
  • Orphaned <labels> removed
  • Inputs with missing labels got given them
  • Required field indicator moved to CSS generated content

• Using the right (often HTML5) elements for the job
• Implicit meaning and purpose helps accessibility
• New tags for giving page layout meaning
  • <section>, <nav>, <aside>, <footer>, etc

• "Freedom For Fieldsets! Long Live The DETAILS"…

• Frees up fieldsets to be used correctly:
  • For multiple choice questions using radio buttons/checkboxes
  • For grouping related fields such as different lines of an address
• Available in all the main browsers except IE and Edge
• Available through Field Group and FAPI

WAI-ARIA

• Web Accessibility Initiative – Accessible Rich Internet Applications
• Additional information for AT, especially for widgets/custom interactive elements on the page
• Not settled enough for use in D7 and aria attributes weren't valid XHTML, but they're fine in HTML5

• Used in Core for:
  • Landmarks (for older browsers that don't support implied meaning of <nav> etc)
    • role="main" for main content region
    • role="search" for default search block
  • Aria-invalid to mark invalid form inputs 
  • Aria-sort to describe how Views tables are sorted
  • Aria-described by to link form inputs with field descriptions
• Form API does this work for you

CKEditor

• Upstream a11y issues a requirement for inclusion in Core
• Editor UI itself has been made more accessible
• Alt tags required for images added with CKEditor (like image fields)
• Default text filter and CKEditor toolbar updated to allow headings
• A11y checker plugin
  • Formerly commercial, now OSS
  • Available as a contrib module
  • Eventually will be in Core 

Views

• Used for Core admin listings, so improvements here have a big impact
• Tables:
  • Can have caption and summary elements
  • Column headers marked with scope="col"
  • Support on the way for column and row headers for more complex tables
• Previous Ctools modal replaced with jQuery UI option with better accessibility

jQuery UI

• Used much more in Core
  • Modal windows for dialogs
  • Entity autocomplete
• Drupal contributors worked with jQuery UI team to fix issues upstream
• Proudly invented elsewhere
• Custom work should use Drupal's new modal/dialog API

Drupal.Announce()

• Part of D8 JS API
• Used to announce dynamic changes in a non-visual way
• Consistent API and handles queuing
• Devel_a11y module can log announcements to the browser console.
• Contextual links module is a good example to look at

Drupal.announce(Drupal.t('@count items added to the feed',
  {'@count': data.items.length}
));

Tab management

• Restricts tabbing to a subset of the focusable elements
• Used in Core for contextual edit links
• jQuery UI dialogs do a similar thing
• Use for tasks where the user would want to not have to tab through superfluous options
  • Form in modal window
  • Having expanded a slide in/out menu

tabbingContext = Drupal.tabbingManager.constrain($('.burger-menu'));

// Later on…
Drupal.tabbingManager.deactivate(tabbingContext);

The saga of Inline Form Errors!

• 2009 issue raised that form errors are communicated at a field level solely with colour (red border)

• Inline form errors proposed in an issue from 2012, and ran through to 2016

• Set to be included in core, then made experimental with a deadline for stability (which was met!)

• Moves away from communicating errors solely with coloured border

• Keeps errors in context

• Good for small screens too

• Represents current good practice but a challenge to implement

What's next?

• JS testing, especially for keyboard nav issues as there have been regressions in this area
• Integrating with third party a11y testing tools like Tenon
• Control over animation for motion sensitivity (Safari has recently launched a media query for this)
• Windows High Contrast Mode support

• JS testing, especially for keyboard nav issues as there have been regressions in this area
• Integrating with third party a11y testing tools like Tenon
• Control over animation for motion sensitivity (Safari has recently launched a media query for this)
• Windows High Contrast Mode support

Thank you!