Accessibility is a fundamental aspect that ensures experiences are inclusive for all users, including those relying on assistive technologies. One crucial accessibility feature is the use of `aria-label` attributes to provide contextual information for form inputs. In Drupal, we can dynamically set `aria-label` attributes using Twig within the `input.html.twig` template.
Why aria-label is important
Screen readers use `aria-label` to announce the purpose of form elements to users who cannot see the screen. If an input field lacks a visible label, an `aria-label` helps provide clarity. While placeholders can serve as hints, they are not a substitute for proper accessibility attributes because they disappear when users start typing.
Implementing aria-label in input.html.twig
By modifying Drupal’s `input.html.twig` template, we can ensure that every input field includes an `aria-label` based on its existing attributes, such as `placeholder` or `name`. Below is an improved version of the default Twig template:
{% set aria_label = attributes.placeholder|default(attributes.name|default('')) %}
{% if attributes.hasClass('button') and not attributes.hasClass('field-add-more-submit') and not attributes.hasClass('btn') %}
{%
set classes = [
'btn',
attributes.hasClass('button--danger') ? 'btn-danger' : '',
(not attributes.hasClass('media-library-item__remove') and not attributes.hasClass('button--danger')) ? 'btn-primary' : ''
]
%}
<input{{ attributes.addClass(classes).setAttribute('aria-label', aria_label) }} />
{% else %}
<input{{ attributes.setAttribute('aria-label', aria_label) }} />
{% endif %}
{{ children }}
The approach
- Determine the appropriate label: The `aria_label` variable is set to the `placeholder` attribute if it exists. If not, it falls back to the `name` attribute, ensuring an `aria-label` is always present
- Modify button elements appropriately: If an input is a button, classes such as `btn-primary` or `btn-danger` are conditionally applied
- Apply the aria-label dynamically: The `.setAttribute('aria-label', aria_label)` function ensures that each input element receives an accessible label, improving usability for screen reader users
Benefits of this approach
- Improved accessibility compliance: Ensures input fields are accessible to users with visual impairments
- Better user experience: Users navigating via screen readers receive meaningful context for form elements
- Minimal performance impact: The solution leverages Twig’s built-in templating functions, avoiding unnecessary complexity
The wrap
By incorporating `aria-label` attributes dynamically within Drupal’s `input.html.twig` template, you can significantly enhance accessibility without altering existing functionality. Ensuring a seamless and inclusive experience should be a priority for all digital projects, and small improvements like this can make a significant impact.
As web accessibility becomes a legal and ethical necessity, implementing best practices at the template level ensures compliance and inclusivity, helping organisations build better digital experiences for all users.