What's new with Drupal 8 and a11y?*

* accessibility

Better and more semantic markup

HTML5 elements have more meaning

HTML5 elements

Native datepickers and handy keyboard input shortcuts

Number input type

No more fieldset abuse!

<details> element

Accessible HTML5 'disclosure widget' (accordion) in webkit

Chrome & Safari

D8 includes a polyfill for IE and FF 

Form improvements

  • Orphaned <label> elements gone
  • Missing <label> added
  • New visually hidden field label formatter
  • Required * now in CSS generated content not <span>

Admin/editor changes

  • ATAG 2.0 - regards editing experience and content produced
  • Alt text can now be added to image fields out of the box

Inline Form Errors

(eventually)

  • A bit of a saga
  • First discussed in 2009 issue queue that reached 265 comments
  • Second thread ended in 600 comments
  • Briefly included in D8 but buggy
  • Moved to an experimental module
  • But worth it:
    • Better than relying primarily on colour
    • Less scrolling as warning/error message more close to related input

Javascript improvements

Upstream a11y fixes

jQuery UI

CKEditor

jQuery UI

  • Used a lot more in core than it was in D7
  • A condition of this was that a11y issues fixed
  • Autocomplete now using jQuery UI
    • Much better for screenreader users than D7's custom autocomplete
  • New Modal and Dialog API uses jQuery UI
    • Better maintained and tested than a mix of Views own, CTools own, contrib… etc

WAI-ARIA

Web Accessibility Initiative – Accessible Rich Internet Applications

ARIA live-regions wrapper

Drupal.announce()

Drupal.announce()

  • Part of D8 JS API

  • Used to announce dynamic changes in a non-visual way

  • Consistent API and handles queuing

  • Used for password strength indicator

  • Devel_a11y module can log announcements to the browser console.

  • Context module is a good example to look at

Tabbing manager

Simplifies keyboard use of complex interfaces

Drupal.TabbingManager()

  • Restricts tabbing to a subset of the focusable elements

  • Useful for when a user is completing a task which only requires certain elements to be focusable

  • Used in Modal windows, contextual Edit mode

  • Drupal.Announce used to announce when tabbing is constrained

  • Devel_a11y can log these announcements to console

Views

  • Many table improvements

    • Caption and summary element

    • Table headers included

    • Sort order exposed with WAI-ARIA

  • Better colour contrast in Views UI

  • Views UI using more accessible jQuery UI modal 

  • Mini pager improvement with invisible text

  • Large impact as core admin listing pages migrated to Views

  • Many improvements need no extra work, for example changes to form API

  • Use the new APIs/patterns

    • Announce

    • Tab manager

    • Dialog/Modal API instead of contrib or custom

    • HTML5 <details> instead of custom accordions

  • If unsure then look at how core is doing it

  • Custom themes should follow the a11y changes made by core themes

    • Colour contrast

Thank you

https://groups.drupal.org/accessibility

What's new with Drupal 8 and a11y?

By Phil Wolstenholme

What's new with Drupal 8 and a11y?

  • 478