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