Main content area

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. 

Get in touch with our Accessibility experts.