Date:
26 September 2023
Author:
John Cloys

Improving accessibility for a better user experience

Welcome to the third instalment of our comprehensive self-help guide series, focused on improving your Drupal website. In this 6-part series, we delve into six vital metrics for a successful Drupal website:

  1. Security
  2. Performance
  3. Accessibility
  4. Patches
  5. SEO
  6. Carbon emissions

In this guide, we exclusively focus on accessibilityExternal Link , emphasising its importance and practical approaches to implementation.

Accessibility is a critical metric in web development, ensuring that people of different abilities can access and navigate your website with ease. The World Health Organization (WHO) estimates that roughly 1.3 billion people (about 16 percent of humanity) are disabledExternal Link . An accessible website not only caters to a broader audience but also enhances usability for everyone.

Throughout this comprehensive guide, we’ll help you understand accessibility as a metric, discuss Drupal's capabilities for addressing accessibility, and provide a list of top contributing factors to consider. Together, we’ll explore steps to improve your site's accessibility to benefit both your users and your online presence.

Go to top 10 ways to improve your Drupal website’s accessibility 

Part 1 — Understanding the metric

What is accessibility?

Accessibility refers to the design and development of websites, applications and tools that can be used by people of all abilities. It encompasses various aspects, such as visual, auditory, cognitive and motor impairments, ensuring that everyone can access and interact with online content with ease, providing equitable experiences to users, context, and abilities.

Why accessibility is important

Accessibility is essential for multiple reasons:

  • Inclusivity: A diverse user base, including people with disabilities, benefits from accessible websites.
  • Legal compliance: Many countries have accessibility laws and guidelines to protect the rights of individuals with disabilities.
  • Business benefits: Accessible websites help you reach a broader audience, increasing the potential customer base and improving brand reputation.

Global authorities and guidelines

Various global authorities and guidelines provide standards for web accessibility:

The positive impact of accessibility

When implemented correctly, accessibility has numerous benefits:

Consequences of ignoring accessibility

Neglecting accessibility can lead to several adverse consequences:

  • Exclusion: People with disabilities may struggle to access and navigate your website.
  • Legal issues: Non-compliant websites can face legal penalties and lawsuits.
  • Reputation damage: Inaccessible websites may negatively impact your brand image and customer loyalty.
  • Suboptimal SEO: Ignoring proper web accessibility can result in poor SEO and thus put your site at risk for lower search engine rankings and less organic traffic.

Part 2 — Drupal and accessibility

Drupal's commitment to accessibility

Drupal has a strong commitment to ensuring its platform is accessible to all users, including those with disabilities. The Drupal community actively works to improve accessibility featuresExternal Link and is working hard to fully comply with the latest WCAG 2.1External Link guidelines to make its CMS as inclusive as possible.

Features and initiatives addressing accessibility

Drupal includes several featuresExternal Link and initiativesExternal Link that help create accessible websites:

  1. Semantic HTMLExternal Link : Drupal uses semantic HTML markupExternal Link , which improves accessibility by providing context and meaning to the content, making it easier for assistive technologiesExternal Link to interpret.
  2. ARIA attributesExternal Link : Drupal integrates ARIA (Accessible Rich Internet Applications)External Link attributes to improve the accessibility of dynamic content and complex user interface components. A recently-completed initiative was for HTML5 WAI-ARIAExternal Link Roles.
  3. Keyboard navigationExternal Link : Drupal ensures that its core features are keyboard navigableExternal Link , allowing users who rely on keyboard input to access all functionality.
  4. Accessible formsExternal Link : Drupal provides accessible form elementsExternal Link with proper labels, descriptions, and error messaging, ensuring an inclusive user experienceExternal Link .

Drupal modules focused on accessibility

The following Drupal modules focus on accessibility:

  • Drupal high contrastExternal Link : Smoothly switch the active theme to a high contrast version just by pressing tab.
  • Drupal htmLawedExternal Link : This is a very useful module not just in the context of accessibility, but also security. It restricts and purifies HTML code so that it complies with the site administrator policy, and standards and security best practices. Clean HTML is always more screen reader-friendly. You can autocorrect and beautify HTML markup and restrict HTML elements, attributes and URL protocols in the input. The module works fast, is highly configurable, and covers all HTML elements.
  • Drupal text resizeExternal Link : While it’s quite easy to resize the text of a page using the keyboard (‘ctrl’ and either ‘+’ or ‘-’), not everyone browsing the web is aware of that. This module provides users with a block that can be used to quickly change the font size of text on your Drupal site. The block includes buttons that can increase and decrease the printed text on the page. This module is primarily focused on increasing the accessibility of your pages, by helping visually-impaired users to adjust the text size so that it’s most comfortable for their eyesight.

Examples of Drupal accessibility done well

Some well-known Drupal websites have successfully implemented accessibility features:

  1. University websites: Many universities, such as StanfordExternal Link and OxfordExternal Link , use Drupal for their websites and prioritise accessibility to provide equal access to education resources for all users.
  2. Government websites: Drupal is often chosen for government websites, like the main Australian government site australia.gov.auExternal Link , which adheres to strict accessibility standards.

Examples of Drupal accessibility done poorly

Unfortunately, some Drupal websites do not prioritise accessibility, which leads to a poor user experience for individuals with disabilities. A lack of proper headings, missing alt text on images, and improperly labelled form elements are some examples of issues found on inaccessible Drupal sites.

Accessibility considerations for different Drupal versions

Accessibility features may differ between Drupal versions:

Part 3 — Top 10 ways to improve your Drupal website’s accessibility

The top 10 ways to improve your Drupal website’s accessibility are:

  1. Use of proper semantic markup
  2. Alt text for images
  3. Proper use of ARIA attributes
  4. Keyboard navigation
  5. Accessible forms
  6. Consistent and logical navigation
  7. Accessible multimedia
  8. Clear and understandable content
  9. Colour and contrast
  10. Responsive design

1. Use of proper semantic markup

What it is: Semantic markupExternal Link involves using appropriate HTML tags to provide meaning and context to the content, making it more accessible for assistive technologies.

How it impacts accessibility: Using proper semantic markup improves the accessibility of your website, making it more usable and understandable for all users, including those with disabilities.

Steps to implement:

  1. Use heading tags (h1 to h6)External Link in a hierarchical manner for organising content.
  2. Use list tags (ul, ol, and li)External Link for lists.
  3. Use table tags (table, th, and td)External Link for data tables and include proper table headers and captions.
  4. Use the appropriate HTML tags for other semantic elementsExternal Link , such as strong, em, and blockquote.
Screenshot showing layout using header, footer, nav, main, article and aside semantic tags.

Above: Screenshot showing layout using header, footer, nav, main, article and aside semantic tags.

2. Alt text for images

What it is: Alt textExternal Link (AKA alternative text) is a brief description of an image, which is provided as an attribute in the HTML image tag. It helps users with visual impairments understand the content of images through screen readers.

How it impacts accessibility: Providing alt text improves the accessibility of your website by ensuring that users with visual impairments can understand the meaning and context of images.

Steps to implement:

  1. For each image on your website, add an alt attribute to the image tag.
  2. Write a concise, descriptive alt text that accurately describes the image.
  3. For purely decorative imagesExternal Link , use an empty alt attribute (alt="").
Screenshot showing HTML image element, with descriptive alt text beside the image it's describing. Taken from https://www.visionaustralia.org/.

Above: Screenshot showing HTML image element, with descriptive alt text beside the image it's describing. Taken from https://www.visionaustralia.org/External Link .

3. Proper use of ARIA attributes

What it is: ARIA (Accessible Rich Internet Applications)External Link is a set of attributes that can be added to HTML elements to improve the accessibility of dynamic content and complex user interface components.

How it impacts accessibility: Using ARIA attributes enhances the accessibility of your website by providing additional information and context to assistive technologies.

Steps to implement:

  1. Identify the dynamic contentExternal Link and complex UI components on your website that require ARIA attributes.
  2. Add appropriate ARIA attributes, such as roles, states and properties, to the relevant HTML elements.
  3. Test your website with screen readersExternal Link to ensure that the ARIA attributes are correctly implemented and understood.
Screenshot of HTML using aria attributes to provide more context about links, state, notifications.

Above: Screenshot of HTML using ARIA attributes to provide more context about links, state, notifications.

4. Keyboard navigation

What it is: Keyboard navigationExternal Link enables users to interact with and navigate a website using only their keyboard, without the need for a mouse or other pointing devices.

How it impacts accessibility: Implementing keyboard navigation improves the accessibility of your website by allowing users who rely on keyboard input to access all functionality.

Steps to implement:

  1. Ensure that all interactive elements on your website can be accessed using the keyboard's Tab key.
  2. Provide visual focus indicatorsExternal Link for active elements to help users understand where they are on the page.
  3. Implement appropriate keyboard shortcutsExternal Link and ensure that they’re communicated to users.
Screenshot showing a button without and with a focus indicator, with an example of styling in css.

Above: Screenshot showing a button without and with a focus indicator, with an example of styling in CSS.

5. Accessible forms

What it is: Accessible formsExternal Link are designed in a way that makes them easy to understand and interact with for all users, including those who use assistive technologies like screen readers.

How it impacts accessibility: Creating accessible forms ensures that users with disabilities can effectively submit information and interact with your website.

Steps to implement:

  1. Use the label elementExternal Link to associate each form control with a descriptive text label.
  2. Group related form elements using the fieldset elementExternal Link and add a legend to describe the group.
  3. Use ARIA attributesExternal Link where necessary to enhance the accessibility of complex form controls.
  4. Ensure that form validation and error messages are accessible and clearly communicated.
Screenshot of a Drupal form with fields/inputs/aria tags and added fieldset/legend.

Above: Screenshot of a Drupal form with fields/inputs/ARIA tags and added fieldset/legend.

6. Consistent and logical navigation

What it is: Consistent and logical navigationExternal Link involves structuring your website's navigation elements in a way that’s easy to understand and use for all users.

How it impacts accessibility: A well-structured, consistent and logical navigation improves the accessibility of your website by making it easier for users to find and access content.

Steps to implement:

  1. Organise your website's content in a logical, hierarchical structure.
  2. Use clear and descriptive labels for navigation elements.
  3. Provide a consistent navigation experience across all pages of your website.
  4. Offer multiple ways to access content, such as a search function and a site map.
Screenshot of bendigo.courts.vic.gov.au, with  clear and descriptive menu labels and a search feature.

Above: Screenshot of bendigo.courts.vic.gov.auExternal Link , with clear and descriptive menu labels and a search feature.

7. Accessible multimedia

What it is: Accessible multimediaExternal Link refers to the inclusion of captionsExternal Link , transcriptsExternal Link and audio descriptionsExternal Link for video and audio content, making it accessible to users with hearing or visual impairments.

How it impacts accessibility: Providing accessible multimedia ensures that users with disabilities can access and understand the multimedia content on your website.

Steps to implement:

  1. Provide captions for all video content, ensuring that they accurately represent the spoken dialogue and other relevant sounds.
  2. Offer transcripts for audio content, such as podcasts or audio recordings.
  3. Include audio descriptions for video content, describing relevant visual information for users with visual impairments.
Screenshot of captions being displayed for video content.

Above: Screenshot of captions being displayed for video content.

8. Clear and understandable content

What it is: Clear and understandable contentExternal Link involves using plain languageExternal Link , concise sentences, and logical organisation to ensure that the content is easy to read and comprehend for all users.

How it impacts accessibility: Creating clear and understandable content improves the accessibility of your website by making it easier for users, including those with cognitive disabilities, to process and understand the information.

Steps to implement:

  1. Use plain language and avoid jargonExternal Link or overly technical terms.
  2. Organise content in a logical and coherent manner, using headings and subheadings.
  3. Break up large blocks of text with lists, images and other visual elements.
  4. Consider offering content in multiple formats, such as text, audio or video, to accommodate different user preferences.
Screenshot from WCAG, showing the guidelines for making content readable.

Above: Screenshot from WCAG, showing the guidelines for making content readable.

9. Colour and contrast

What it is: Colour and contrastExternal Link refer to the visual aspects of your website that make the content and user interface distinguishable and easy to read for all users, including those with colour vision deficiencies or low vision.

How it impacts accessibility: Ensuring appropriate colour and contrast on your website improves accessibility by making it easier for users to perceive and understand the content and interface.

Steps to implement:

  1. Use sufficient colour contrastExternal Link between text and background to ensure readability.
  2. Avoid relying solely on colour to convey information or indicate actions.
  3. Ensure that links, buttons and other interactive elements have clear visual states, such as hover and focusExternal Link .
  4. Test your website for colour and contrast accessibility using online tools, such as the WebAIM Color Contrast CheckerExternal Link .
Screenshot that shows the results from a colour contrast analyser.

Above: Screenshot that shows the results from a colour contrast analyser.

10. Responsive design

What it is: Responsive designExternal Link is an approach to web design that ensures your website adapts to different screen sizes and devices, providing an optimal viewing experience for all users, including those with disabilities.

How it impacts accessibility: Implementing responsive design improves the accessibility of your website by ensuring that content and functionality are available and usable on various devices and screen sizes.

Steps to implement:

  1. Design your website with a mobile-first approachExternal Link , prioritising the mobile experience.
  2. Use flexible gridsExternal Link , responsive imagesExternal Link and CSS media queriesExternal Link to create a responsive layout.
  3. Test your website on various devices and screen sizes to ensure that it adapts appropriately.
  4. Ensure that all interactive elements, such as menus and forms, function well on different devices.

Part 4 — The importance of website accessibility

Web accessibility is a crucial aspect of website development and design, as it ensures that all users, including those with disabilities, can easily access, navigate and interact with the content and functionality of a website. By making your Drupal website accessible, you not only adhere to the principles of inclusive design but also comply with legal guidelines and improve your website's overall usability and user experience.

In the rapidly evolving digital landscape, accessibility is not a luxury; it’s a necessity. Taking the time to implement accessibility best practices and considering the diverse needs of your users will pay off in the long run, providing a more engaging, usable and inclusive web experience.

Embracing accessibility not only benefits users with disabilities but also improves the overall experience for all users, ultimately resulting in a more successful, effective and ethical website.

Part 5 — Our contribution to accessibility

As a company dedicated to improving Drupal websites, we recognise the importance of accessibility and strive to contribute to the community by sharing our knowledge and expertise. This section highlights our contributions, including:

  1. Case studies
  2. Our audit tool, Drupal360.io
  3. Community involvement

1. Case studies

Our work with clients includes several projects focused on enhancing the accessibility of Drupal websites. These case studies showcase our commitment to accessibility and demonstrate our expertise in implementing best practices across various industries and organisations.

Salsa Digital case studies cards

2. Drupal360.io audit tool

To further support the Drupal community, Salsa is currently developing an audit tool called Drupal360.io. This comprehensive tool evaluates various metrics, including accessibility, and provides actionable insights to improve your website.

The tool assesses your website against WCAG guidelines and offers suggestions for improvement, helping you achieve a more accessible and inclusive web presence.

3. Community involvement

We actively participate in the Drupal communityExternal Link by contributing to discussions on accessibility best practicesExternal Link , sharing knowledge through blog posts and presentations, and developing and maintaining an accessible theme, CivicThemeExternal Link .

Screenshot of one of our accessibility blogs.

Above: Screenshot of one of our accessibility blogs.

By leveraging our expertise and sharing our experiences, we aim to create a more accessible digital landscape for all users. Our case studies, audit tool, and community involvement demonstrate our dedication to promoting accessibility and contributing to the growth and improvement of the Drupal ecosystem.

Part 6 — How we can help with accessibility

As experts in Drupal accessibility, we offer a range of Drupal accessibility services to help clients improve the accessibility of their websites. This section outlines the ways we can support you in achieving an inclusive and accessible digital presence:

  1. Accessibility audit and strategy
  2. Accessibility implementation
  3. Salsa Support
  4. Training and documentation

1. Accessibility audit and strategy

Our team will conduct a thorough accessibility audit of your Drupal website, identifying areas that need improvement according to WCAG guidelines. We will then develop a comprehensive strategy to address these issues, ensuring your site is accessible to all users.

Screenshot showing front page of accessibility audit report.

Above: Screenshot showing front page of accessibility audit report.

Accessibility implementation

Once the accessibility strategy is in place, our team will guide you through the implementation process. We’ll help you make the necessary adjustments to your website's design, code and content, ensuring compliance with accessibility standards.

3. Salsa Support

Salsa Enterprise Drupal Support can be used to conduct an audit and implement accessibility fixes. We can create an accessibility-related fixes and improvements plan that includes regular accessibility checks, best practice reviews, and remediation. The plan will inform a backlog that can then be actioned.

Accessibility is an ongoing process that requires regular updates and monitoring. We can help you keep your Drupal website compliant with accessibility standards.

4. Training and documentation

To maintain accessibility compliance, it’s essential for your team to understand and adopt best practices. We offer training sessions and documentation on Drupal accessibility, empowering your team to manage and maintain an accessible website.

Screenshot showing a section of Salsa accessibility documentation.

Above: Screenshot showing a section of Salsa accessibility documentation.

View Salsa’s Drupal accessibility services

Our range of services, from accessibility audits and strategy development to implementation support, training and ongoing monitoring, ensures that your Drupal website is accessible to all users. By partnering with us, you can create an inclusive digital experience that meets the highest accessibility standards.