Accessibility hacks to optimise your Drupal site accessibility score
We’re committed to designing and developing inclusive and accessible websites. Using Drupal, one of the most popular and effective content management systems, we know that we can depend on a tool that encourages and supports the proper use of semantic markup, which is vital for users relying on screen readers and other assistive technologies.
We address many of the accessibility challenges at the theme layers and we’d like to share with you some code snippets that we use to resolve accessibility issues, indicated by the audit tools.
Issue: Attribute aria-required
Attribute aria-required is not necessary for elements that already have attribute required (https://www.w3.org/TR/using-aria/#some-examples-of-redundant-aria)
Case
Drupal form elements, use at the same time “aria-required” and “required” attributes. Since HTML5 supports the “required” attribute, the “aria-required” attribute is marked as redundant by many accessibility audit tools.
Example
<label for="edit-name" class="js-form-required form-required">Name *</label>
<input class="form-required form-text required" data-drupal-selector="edit-name" type="text" id="edit-name" name="name" value="" size="60" maxlength="255" required="required" aria-required="true" >
Solution
We use a preprocess function in our custom_theme.theme file to remove aria-required attribute, if required attribute is set.
/* Implements template_preprocess_input(). */
function custom_theme_preprocess_input(&$variables) {
$element = $variables['element'];
if (isset($variables['attributes']['required']) && isset($variables['attributes']['aria-required'])) {
unset($variables['attributes']['aria-required']);
}
}
Issue: Redundant WAI-ARIA attributes
The navigation role is not necessary for element nav. The main role is unnecessary for element main.
Case
Default Drupal theme implementation for a menu block (core/modules/system/templates/block--system-menu-block.html.twig) adds role role="navigation" to nav landmark.
Using the <nav> element will automatically communicate that a section has a role of navigation. The correct semantic HTML should always prefer used over using ARIA (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role)
Default theme implementation to display a single page (core/modules/system/templates/page.html.twig) adds role role="main" to main landmark.
Example
<main role="main"></main>
<nav role="navigation"></nav>
Solution
We overwrite block—system-menu-block.html.twig with a custom twig, where we remove role from <nav> element
<nav aria-labelledby="{{ heading_id }}"{{ attributes.addClass(classes)|without('role', 'aria-labelledby') }}>
We overwrite page.html.twig with a custom twig, where we remove role form <main> element.
Issue: Description for groups of form controls
Providing a description for groups of form controls using fieldset legend elements.
Case
Sometimes, views fieldset legend is forgotten, since the legend/functionality is implied by the design. This does not work for disabled users who rely on screen readers.
Solution
We use a preprocess function in the custom_theme.theme file to add a screen reader (sr-only) class to the legend in order to be readable by screen readers
/* Implements template_preprocess_fieldset(). */
function custom_theme_preprocess_fieldset(&$variables) {
$element = $variables['element'];
$variables['legend_span']['attributes']['class'] = 'sr-only';
}
Maintaining your site at a high accessibility level is a never-ending task. You always need to review your content, audit your pages and then fix the issues.
CIVIC knows how to keep up with the latest accessibility standards, and we can help you do the same. Take a look at our accessibility services to see where we can help.
