WAI-ARIA, Requiring Alt Text, & Other Accessibility Features in Drupal 8

On Drupal.org, Drupal 8 promotion is in full-swing. Features and benefits are being touted and summarized right and left. One of the categories of improvement summed up on the Drupal 8 features page is "Accessibility." I went digging for more information on how accessibility improvements have been integrated in Drupal 8 and I found a number of resources on the effort to improve accessibility in D8.

Here's the summary of what's been done according to Drupal.org:

Accessibility

Drupal 8 has added extensive support for standard accessibility technologies including WAI-ARIA and have been working to provide more semantic HTML5. With the ARIA Live Announcements API and TabManager, Drupal 8 provides centralized control for rich Internet applications. Many small improvements have been made in color contrast, and font sizes, and the system will leverage jQuery UI's autocomplete and modal dialogs. Views is now in Core; both the output and Views UI are now much more accessible. To provide visitors with an optimal experience, site admins can also require entry of alternative text for all images.

https://www.drupal.org/drupal-8.0/features#accessibility

I've picked a few from this list to highlight and explain. Keep in mind, this is Drupal 8, which is still in development, and some features may not be committed quite yet, perhaps because they're waiting on another issue to resolve first, or some other reason.

WAI-ARIA

First off, what is WAI-ARIA? WAI-ARIA is a W3C recommendation put forth by the Web Accessibility Initiative for Accessible Rich Internet Applications. It gives web developers a way to describe and annotate user interaction controls, content regions ("landmark roles"), and "live" regions—regions prone to automatic updates that may only be apparent visually (think infinite scroll controls that reveal more content without refreshing the page or a live stock price widget that shows "real time" data).

If developers follow the ARIA framework, then this information can be utilized via accessibility APIs to devices beyond the web browser—devices used to provide accessibility to content for users with disabilities, which, as Dan Mouyard points out in his excellent DrupalCon Austin presentation, "The Accessible Experience: Designing for Everyone," is everyone, at least at one point or another. (Ever experienced screen glare? A broken computer speaker? Accessing content on a phone for that matter? Aging?)

What work has been done to add WAI-ARIA features to Drupal 8? Mike Gifford (mgifford on drupal.org) provides a great update on this and other accessibility improvements on the Accessibility group on groups.drupal.org in his post, "User Facing Accessibility Improvements in Core (Part 1 of D8 A11y Update)." He states that because of the adoption of HTML5 and WAI-ARIA, markup has been updated to improve and clarify elements and regions of HTML pages through:

• Restoring balance to the Force through improving the usage of DETAILS and FIELDGROUPS, replacing FIELDGROUPS with DETAILS where collapsible sections were desired and adding FIELDGROUPS to radios and checkbox groups to provide better accessibility to forms using these elements. FIELDGROUPS stopped being abused to create visual collapsible widgets and were put to good use, grouping radios and checkboxes together where appropriate.
• ARIA Landmarks or "landmark roles" were added to Bartik and Seven as well as Core Blocks and status messages. These attributes on HTML tags provide semantic meaning to sections, regions, and even elements of a page—above and beyond HTML5's markup (although there is overlap). For example, aria-sort was added to tables to add additional context and aria-describedby links were added to form elements to reference related descriptions.
• ARIA Live Announcements were implemented in D8 via aria-live, so that dynamic changes to the UI could be announced aurally. A simple API for announcing aria-live values aurally was developed and is now available via Drupal's javascript function Drupal.announce(). (See this change notice for details.)

You can find more information about WAI-ARIA related changes, as well as links to the relevant issues in the Issue Queue on mgifford's post.

Requiring Alternate Text on Images

Drupal 8 now affords site administrators the ability to require alternate text when images are uploaded to Image fields added to entities, such as content types. How does this work? When you add an Image field to a content type, for example, there is a checkbox to enable Alt text. When checked, another checkbox appears below it that asks if you want to require alt text for this field. Check that as well and you'll have alt text enforcement on image fields. This doesn't include images added via CKEditor, at this time. (Maybe that's an issue to raise in the issue queue?)

Update (July 4, 2014): Issue filed by Charles Belov! Allow requiring alt text for wysiwyg image. Wow, that was fast!

I've recorded a demonstration of this functionality in the screencast that follows:

(Closed captioned. Transcript (.txt). View on YouTube.)

Where to find more info about Accessibility in Drupal

This is just a few of the many updates that improve accessibility in Drupal 8. To find out more about the excellent work that is going on in Drupal 8 development to improve accessibility, check out the following resources:

• (Required Reading) User Facing Accessibility Improvements in Core (Part 1 of D8 A11y Update) by mgifford
• Accessibility on groups.drupal.org for events, discussions, and updates on making Drupal more accessible. This is the place to go to get involved. Log in or create a new drupal.org account and click the "Join this group" link in the sidebar to subscribe to updates posted in this group.
• Drupal 8 Accessibility Features (drupal.org)

Learn more about Web Accessibility

• WebAIM (Web Accessibility in Mind)
• Web-ARIA Overview
• DrupalCon Austin Session on designing for accessibility: "The Accessible Experience: Designing for Everyone" by Dan Mouyard

Tools

• WAVE (Web Accessibility Evaluation Tool)
• Devel accessibility module
• WebAIM Resources, Tools and Simulations

Mentioned by Dan Mouyard in his DrupalCon session:

• Screenreaders: VoiceOver, ChromeVox, NVDA, JAWS
• Color Tools: Photoshop (View > Proof Setup > Color Blindness), Color Oracle, Color Filter, Contrast Ratio

Still Lots to Do!

As of today, there's one critical bug in Drupal 8 tagged with "accessibility" and 11 major issues. Head over to the Issue Queue and see if there's something you can do to help.

• Critical Accessibility Issues in D8 (filtered by version 8.x, Open, Critical, tags: accessibility)
• Major Accessibility Issues in D8 (filtered by version 8.x, Open, Major, tags: accessibility)
• All Accessibility Issues in D8 (filtered by version 8.x, Open, tags: accessibility)

Many thanks to Mike Gifford and Dan Mouyard whose documentation and presentation inspired and informed this blog post, and others, such as Jesse Beach, who submitted patches, discussion, and tests in the Drupal 8 Issue Queue for this vital area of work.