“Drupal 8 is the most accessible version of Drupal, and brings with it some features not seen in any other Content Management System, open-source or proprietary.“ (Phil Wolstenholme, A new era of accessibility in Drupal 8).
But where do you start enhancing your organization site's accessibility? Your accessibility planning?
For it's true: Drupal 8 does come loaded with some truly “impactful” new features and accessibility improvements that will drastically improve the way visitors with disabilities will interact with your website. And where do you add that they all come out-of-the-box!
Yet: how do you set your priorities? Which accessibility features do you start implementing first and put a particular focus on as you train your editorial staff?
And this is why we, the web development team in Toronto, have come up with THE list (or “selection” if your prefer)! It includes 7 most significant improvements around accessibility in Drupal 8. The ones that you should rush in to make the most of first things first:
1. HTML5 Elements: Add Semantic Meaning Into Your Code
“By default” I should add! Since now Drupal 8 works with HTML5 elements in its templates so that you get to “invest” your code with... meaning!
“Meaning” that screen readers can now interpret, making their navigation on your website a lot smoother. Now your web pages “do” make sense to them!
Here are just a few examples of HTML tags that you can use now for better defining the elements on a given web page on your site: <footer>, <header>, <section>, <figcaption>, <article> etc.
Note: better structuring content on your web pages using these HTML5 elements will support your SEO efforts, too! Since it's not just assistive technologies that can better “decipher” and surf through your web pages, but search engine crawlers, too! How about that for a win-win situation?
2. Introducing “ Tabbing Manager”: A Constrained Tabbing Order
And here's another significant enhancement around accessibility in Drupal 8!
Just try to imagine a scenario where a non-visual user is facing a page overlay. How would he/she know where to tab into and close it?
This is where Drupal'8 new JavaScript feature, “Tabbing Manager”, comes in handy! It practically limits the user's options for tabbing around a web page so that, using his keyboard only, he can gain faster access to the important elements on that page.
Controlled tabbing dashing away confusion! This is how we could define this new feature implemented in Drupal 8 core and impacting your own site's usability!
3. Extensive Support for The WAI-ARIA Markup: Better Accessibility in Drupal 8
Simply complying with the WAI-ARIA standards is not nearly enough. You need to actually make those attributes added to your HTML5 elements understandable to screen readers!
Drupal 8's core maintainers have been well aware of this aspect and have packed it with substantial support for the ARIA markup.
In short: as you'll add the given set of attributes to your code, you'll be ideally structuring your web pages so that assistive technologies can easily navigate through and distinguish their different content sections!
4. Aural Alerts: Visual Updates Made Accessible to Everyone
How could a visually impaired user catch sight of a visual update on the web page that he's on? Of an animation or of an alert box popping up? The screen reader that he relies on can only read one part of a web page at a time...
Introducing “Drupal.announce”, a JavaScript feature which presents screen readers with texts appended to nodes that can be read out loud to the user! So that the visitor should be informed, through a reading user agent, of all the changes/updates happening on various parts of the page (color changes, pop ups, animations)!
5. Alternative Text for Images: Now A Required Field By Default
When you say “better accessibility in Drupal 8”, we should immediately think of all the key features enhancing it which have now become “mandatory” to implement!
Like the ALT text field, a feature allowing visual impaired users to understand an image's meaning with the help of a short descriptive text. Screen readers are enabled to associate the image's meaning with the given text-based content.
Note: simply filling in that field with generic short text isn't enough! You should also make your content writers aware of its significance and, therefore, that it's important to properly describe the image through that short text!
Another note: here we go again, intersecting our efforts to make our websites fully usable for everyone with our SEO efforts! It's not just users depending on assistive technologies for navigating your site that will benefit from this “by default” ALT text feature, but guess who else: search engine crawlers!
6. CSS Display Options: Hidden, Visually Hidden, Invisible...
Here's the scenario that called for the adoption of 4 different CSS display classes in Drupal 8:
“When using “display:none;” in your code you're practically making those specific elements invisible to visual, non-visual and screen readers, too!”
See why such such an improvement in terms of accessibility in Drupal 8 was greatly needed? Its maintainers have implemented accessibility-naming conventions that you get to use for (still) hiding elements on your site from users' sight while keeping them visible for screen readers.
And here are the 4 different CSS classes for hiding/displaying elements on your site:
- hidden: hide certain elements both from users and screen readers
- visually-hidden: hide elements from users only (keeping them accessible to screen readers)
- visually-hidden.focusable:
- invisible: hide the element(s) from both users and screen readers, but with no layout impacting the page
7. An “Enable Inline Form Errors” Option for Improved Accessibility in Drupal 8
“This field does not support the use or commas or semi-colons as separator”!
Imagine this error message showing up at the top of a web page as a visually-impaired user is filling in a form on your site. A message that his screen reader informs him of, but which lacks a key detail: which form field?
The user might have already completed several form fields, how would he know which one the error message refers, to?
See? This is where the newly implemented option for enhancing accessibility in Drupal 8 by enabling inline errors within the form itself instead of displaying them on the top of the page, was needed!
Note: do be aware of the fact that it's still a work-in-progress functionality, with a few pending issues left for its maintainers to address!
And speaking of enhancing accessibility and therefore usability when dealing with forms, it's almost needless to add that implementing ARI markup in your forms will help all your visitors:
- to interact with all the fields of a given form with great ease
- to distinguish whether they've skipped filling in certain fields or checking off certain boxes
Quick Recap
With all its improvements and newly implemented features Drupal 8 offers you an extensive built-in accessibility support! And it makes a great base for you to take advantage of and make the best use of.
How? By training your team in this respect and integrating all the best practices into your organization's specific workflow so that they turn into... routine:
- adding properly descriptive ALT texts
- using <h1>, <h2> heading tags for creating perfectly structured flows of content etc.
Complying with the accessibility standards, adopting all these best practices and, overall, making the web equally accessible and usable for everyone, will only require an certain investment of time (at the beginning) and... attention! No need for complex technologies or special skills acquiring for you to invest in! Don't you agree?
