Upgrade Your Drupal Skills
We trained 1,000+ Drupal Developers over the last decade.
See Advanced Courses NAH, I know EnoughDrupal 8 accessibility features
Moreover, WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) additional markup really improved semantics using:
See the related WCAG 2.0 sections about semantics.
Tabbing order
Drupal 8 introduces the TabbingManager javascript feature. It enables to constrain tabbing order on the page and facilitates navigation with keyboards. It is really helpful to guide a non-visual user to the most important elements on the page and minimize confusion with screen readers.
See the related WCAG 2.0 section about keyboard operations.
Forms
Drupal 8 accessibility involves many improvements regarding forms in Drupal 8.
In Drupal 7, all errors were displayed by default on top of the form and fields were highlighted in red. It was not right for colorblind people to understand where the errors were.
In Drupal 8, there is an experimental option to enable form inline errors and an error icon is displayed next to the field. Nevertheless, note that this feature is not enabled by default as there are still some pending issues.
The error message is displayed below the field when the Form Inline Error module is enabled.
See the related WCAG 2.0 sections about error identification.
Regarding the form API, radios and checkboxes are now embedded in fieldsets to meet WCAG compliance. Indeed, grouping related elements will help screen readers to navigate in complex forms. Plus, all fields have a label associated with the right element using the “for
” attribute.
Here is an example of HTML code for radio buttons:
Poll statusClosedActive
See the related WCAG technical section about fieldsets
Tables and views
As Views UI module is in core now, it became accessible.
The views tables markup is more semantic. Data cells are associated with header cells through “id
” and “headers
” attributes. It is also possible to add a element to explain the purpose of the table and a
Plus, the “scope
” attribute enables to explicitly mark row and column headings.
Here is an example of a table HTML code generated by a view:
Content type
Article Article
Caption for the table Details for the tableDescription for details
Title
Premo Quae Vero
Capto Dolor
See the related WCAG section about tabular information.
Hidden elements
Using "display:none;"
CSS styling can be problematic as it will hide elements for both visual and non-visual users and consequently, screen readers will not be able to read them.
Drupal 8 accessibility maintainers decided to standardize in the naming convention of HTML5 Boilerplate using different classes to hide elements:
- “
hidden
“: hide an element visually and from screen readers; - “
visually-hidden
“: hide an element only visually but available for screen readers; - “
invisible
“: hide an element visually and from screen readers without affecting the layout.
Aural alerts
Users with visual impairment will not be able to see all visual updates of the page such as color changes, animations or texts appended to the content. In order to make these changes apparent in a non-visual way, Drupal provides the Drupal.announce()
JavaScript method which creates an “aria-live
” element on the page. This way, text appended to the node can then be read by a screen reading user agent.
Here is an example of a code using the aural alert:
Drupal.announce('Please fill in your user name', 'assertive');
The first parameter is a string for the statement, the second is the priority:
- “
polite
“: this is the default, polite statements will not interrupt the user agent; - “
assertive
“: assertive statements will interrupt any current speech.
See the related WCAG technical section about how to use live regions to identify errors.
CKEditor WYSIWYG accessibility
Drupal community helped improving CKEditor accessibility.
First of all, the WYSIWYG editor now comes with keyboard shortcuts which are beneficial for both power users and keyboard-only users.
Drupal 8 implements more semantic elements. For instance, the user can create HTML tables with headers, caption and summary elements.
About Drupal Sun
Drupal Sun is an Evolving Web project. It allows you to:
- Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
- Facet based on tags, author, or feed
- Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
- View the entire article text inline, or in the context of the site where it was created
See the blog post at Evolving Web