"Barrier-free access” is carved within the very “DNA” of Internet itself. Therefore, your site, too, should be accessible first and foremost!
Before you even start to make it visually-arresting and useful. Before you even consider how you could add value to your website visitors' lives!
What started as an accessibility-focused initiative in Drupal 7, or better said "as an attempt” to comply with World Wide Web Consortium guidelines, has gradually evolved into a powerful set of accessibility-oriented features in Drupal 8.
Bugs have been addressed, “old” features improved, new enhancements and new features added in Drupal 8 to boost its accessibility in core.
Now let's stop “beating around the bush” and put the facts on the table!
Let us enlist and detail to you these particular accessibility-enhancing features in Drupal 8 that will make your job (building an accessible website) easier than never before:
1. Improved Contrasts
Empathize with those future visitors suffering from colorblindness, then try simulating a context where users would access your website (from their mobile devices) in bright sunlight.
Optimal contrast will “send” an invitation to the users in the above real-life scenarios to keep clicking/scrolling and thus prolonging their visits on your Drupal site.
The great news is that Drupal 8's accessibility maintainers have tackled the contrasts' issue and made the necessary improvements.
2. Controlled Tab Order
It was just yesterday, in our previews post, that we talked about the importance of “blazing your users' path” to the information they're searching for on your website. About easing their “search” with the right UX elements.
Well, this accessibility-boosting feature, in Drupal 8, serves the same purpose.
The Tabbing Manager Javascrip feature is that “flashlight” which will point out the main elements on your website to your visually-impaired or non-mouse visitors.
And this enhancement will make all the difference for them!
Just think about the time and energy that these visitors save by quickly scanning through your tabs instead of striving to navigate through a complex, crowded user interface relying entirely on screen readers!
Zero confusion leads to zero frustrations and to a better user experience for your website's visitors. And this is gold in the age of user experience, right?
3. Inline Form Errors
And this is a truly notable enhancement, which proves that we have come a long way from Drupal 7 when it comes to the support for accessibility available in Drupal 8's core modules.
If in Drupal 7 errors made when users filled in a web form appeared on top of that specific form, while fields got colored in red, as a “warning” sign (not exactly the most effective solution for the visually impaired users), Drupal 8 comes to your rescue with its form inline errors.
In this version of Drupal errors icons get displayed next to the specific fields of the form.
A much needed improvement, wouldn't you agree?
Note: still, the Form Inline Error is an optional Core module, therefore it needs enabling first.
4. Fieldsets for Radios and Checkboxes
When it comes to the Form Api, here's another great enhancement that Drupal's accessibility maintainers “spoil” you with: fieldsets for checkboxex and radios.
Just imagine how this improvement will ease screen readers' (and implicitly non-visual users relying on them) otherwise not at all easy “job” to parse complex forms.
Since related elements get grouped together in Drupal 8, it now becomes a lot easier for you (or your team of Toronto developers) to enhance forms in Drupal.
5. Alternative Texts for Images
Visually-arresting photography and stunning imagery cannot “wow” your visually impaired visitors.
Still, Drupal 8 lends you a hand for helping your users “visualize” and thus “bend before your talent” (or your web designers' talent).
How? With its alternative text for image feature.
How? With its alternative text for image feature.
It's now a required field in Drupal 8, by default: you type in short descriptive text so that all users, without any discrimination, can imagine those visually-arresting images that you'll upload on your website.
6. More Semantics
Semantics! The ultimate impediment that any initiative aimed at enhancing accessibility on your site needs to overcome.
No wonder that one of the ultimate goals of Drupal 8 core maintainers was to “add more meaning to the code”. To enrich Drupal with more semantic HTML elements for the assistive technology to be able to interpret.
And here are the achievements of all the sustained efforts in this direction:
- WAI-ARIA landmarks in core (a major step forward)
- live regions
- roles & properties
Now to name just one example of what “more semantics” in Drupal 8 means, when it comes to accessibility: now screen readers can easily interpret pieces of code such as <footer>, <header> or <form>.
7. Tables and Views
Speaking of improved semantics, note that the views tables markup is more semantic in Drupal 8.
Let's shed some light on this feature:
- it enables you to explain the purpose of a particular table on your website through a <caption> element
- it enables you to add a quick “summary” explaining which is the best way to navigate the table and how the data included there is structured; and all this by using the <summary> element
- it enables you to use “id” and “headers” attributes and thus associate data cells with header cells
- it enables you to “play with” the “scope” attribute, thus to mark your tables' column and row headings
8. Aural Alerts
Animations, color changes, specific text and so on: how do you make visual updates accessible for all users? Even to those relying exclusively on screen readers as intermediates for accessing content on your website?
You rely on Drupal 8's Drupal.announce().
This JavaScript method creates an “aria-live” element on the page enabling instructions to be read to these specific visitors on your site either as assertive or as polite.
9. Hidden Elements
An alternative to CSS styling “display:none” was greatly needed, since this one makes elements invisible both to visual and non-visual users.
And hiding them from everyone is no web developer's (or website owner's) intention!
Therefore, the team “responsible” for Drupal 8's accessibility decided to enable future Drupal users to rely on 3 different classes for hiding certain elements:
- “hidden”: for hiding an element from all the visitors on your site
- “visually-hidden”: for hiding an element from your website's visitors, but keeping it “visible” for screen readers
- “invisible”: for hiding an element both from the visitors and from screen readers, without influencing your site's layout
10. CKEditor WYSIWYG Accessibility
CKEditor, too, has been greatly improved in Drupal 8 in the name of empowering users, like you, to generate accessible content on their Drupal websites!
Here are its significant improvements:
- the WYSIWYG editor's been upgraded with keyboard shortcuts (for which all those keyboard-only users and power users on your site will “thank you” for)
- more semantic elements have been added: for instance HTML 5 tags which enable you to add captions to images
- a language toolbar button has been added, enabling screen readers to select the appropriate language for each content
- an accessibility checker plugin is now available for CKEditor
And this is precisely how Drupal 8 empowers you to build barrier-free websites that say “welcome” to all visitors, both visual and non-visual!
What do you think of these improvements and new features in Drupal 8?
To what extent do you consider that they'll ease (or have they already?) your job as a Drupal web developer/Drupal website owner?
