Accessibility
DX8 provides some features which help to make your website accessible. This documentation outlines the features and suggestions to help you build an accessible website in DX8.
Menu keyboard navigation
In recent versions of DX8, the keyboard menu navigation has been improved and you can use the following keyboard shortcuts to navigate your menu:
- Space - toggles child menu visibility. If no child menu will follow the link
- Return/enter - Always follows menu link
- Down/right arrow keys - open child menu and/or moves onto next menu item
- Up/left arrow keys - closes child menu and/or moves onto the previous menu item
- Escape - closes child menu and restores focus to the parent menu item.
Menu links that have sub-menus have aria-haspopup and aria-expanded attributes. The latter will toggle between a value of true/false depending on the display state of the child menu.
Button element
The button element is available within the Interactive section of the sidebar browser. This shares the Back to top and Scroll to the functionality of the link element and provides two additional modifier options:
- Toggle modifier (as accessible popup - collapsed) - Adds attributes/values aria-haspop="true" and aria-expanded="false"
- Toggle modifier (as accessible popup - expanded) - Adds attributes/values aria-haspop="true" and aria-expanded="true"
These should be used instead of links for toggling visibility of mobile and other hidden navigation, e.g. search and language selector blocks.
Aria attributes
DX8 provides aria attributes, aria-expanded indicates whether the element or another grouping element it controls is currently expanded or collapsed. For example, this indicates whether a portion of a tree is expanded or collapsed. In other instances, this may be applied to page sections to mark expandable and collapsible regions that are flexible for managing content density. Simplifying the user interface by collapsing sections may improve usability for all, including those with cognitive or developmental disabilities.
The aria-haspopup attribute Indicates that the element has a popup context menu or sub-level menu. This means that activation renders conditional content. Note that ordinary tooltips are not considered popups in this context. A popup is generally presented visually as a group of items that appears to be on top of the main page content.
Site build recommendations
When building a site in DX8 we recommend you do the follow:
- Always add labels to buttons and inputs. If the label shouldn't be visible, wrap it in a <span> element (<label> if an input) with a class of 'visually-hidden'
- Ensure all non-decorative images have alternative text - Ensure contrast ratio of font/background colors is sufficient
- Use semantic HTML5 elements to structure page regions (e.g. '<header>', '<main>', '<footer>', '<section>', '<article>')
- Always add main-content as an id to your main content region, so that the Drupal skip link is functional
- Provide focus styling for keyboard-focusable elements, so that focus is visible
Drupal accessibility module compatibility
To improve Drupal's accessibility we recommend installing some extra modules. There is a plugin available for CKEditor that inspects the accessibility level of WYSIWYG-generated content and can immediately resolve issues that are found.
This can be installed on Drupal 8 with the following modules and CKEditor plugins:
CKEditor Accessibility Checker
You can find out more about this plugin here and download the library required.
CKEditor Balloon Panel
You can find out more about this plugin here and download the library required.
CKSource have a demo of the plugin so you can see it in action here.