Authors
Michaela Lederman
Senior Accessibility & QA Lead
Accessibility should be part of the criteria for picking a CMS. Fortunately, many CMSs out there are getting that right. Building on the information from Part 1 and Part 2 of this series, I’m going to focus on leveraging Drupal 8’s accessibility features to enhance any user’s experience.
Drupal 8 Core
Drupal 8 makes it much easier to add accessibility features than previous versions. Some of the most significant improvements for accessibility within Drupal 8 core are:
- Core code uses semantic HTML5 elements and the addition of aria landmarks, live regions, roles, and properties to improve the experience of screen readers.
- Creating aural alerts for users who use audio features to navigate and understand a website are easy to implement using Drupal.announce().
- Users have more control navigating through content with a keyboard using the new Tabbing Manager.
- Hidden, invisible or on-focus options for all labels have been included so screen readers can give more context to content – without impacting design decisions for traditional screens.
- Fieldsets have been added for radios and checkboxes in the Form API.
- Alt text is now required for all image fields by default.
- The default Bartik Theme is now underlining links so that it is much easier for people to identify links on the page.
- D8 now includes an optional module to include form errors inline to easily associate errors with inputs when filling in a web form.
Theming
Out of the box, Drupal core is a great starting point for creating an accessible website. Usability issues tend to arise when designers and developers begin the theming process. In order to achieve a desired design or function, they inadvertently remove or alter a lot of Drupal’s accessible defaults. With knowledge gained from the previous posts and the following tips, you will be on your way to theming a more accessible site for everyone!
Links
Make sure pseudo :focus and :active styles are always included for users navigating by keyboard. This helps the user visually understand where they currently are on a page. This can be the default browser styling or something more brand specific.
You may include “read more” links on teasers, but make sure there is a visually hidden field to include what the user will be “reading more" about for aural users.
Display None vs Visually Hidden
Drupal 8 core now has this option for labels when creating content types and forms, but it also includes simple class names to hide content properly. A great example of this usage is fixing a “read more” link to something more descriptive for screen readers.
<a href="{{url}}">{{'Read more'|t}} <span class="visually-hidden"> {{'about'|t}} {{label}}</span></a>
Anchor and Skip Links
Providing a way to skip links and navigation on a page can improve the usability of a keyboard or aural user on your site. This is a great addition to your site and easy to implement. As mentioned in the previous post, screen readers have the ability to skip and search your site by sections, headings, links, etc. Adding another way to skip various types of content gives the user an easier way of flowing through and skipping heavy or repetitive information on a page. Just remember that this should be visibly hidden and not display: none;!
Forms
Always include a button for users to submit their form information. Exposed forms within Drupal have the option for an “auto submit” setting, which automatically submits the form once an element is interacted with or changed. Having one action which invokes two outcomes can cause major confusion for users navigating with assistive technologies.
For Example: A user chooses an item within a select dropdown, and the form submits this change which modifies the content on the page. All of this happens just by selecting an item within a dropdown. Ideally, the user should be able to choose the item in the dropdown, and then press submit to search. Each item should only have one action.
Be careful that you are not reducing the accessibility of forms when using hook_form_alter and other techniques to modify forms. Following the basic form guidelines while implementing forms through this technique will ensure that your forms work well for everyone.
Final Thoughts
We have seen great improvements in Drupal’s core code over the past few years to accommodate everyone. Drupal 8 has a lot of accessibility features built in and as developers we need to take advantage of those features or at the very least, not remove them.