Drupal accessibility — a comprehensive Drupal self-help guide to creating accessible websites

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 accessibility, 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 disabled. 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:

• Web Content Accessibility Guidelines (WCAG): Developed by the World Wide Web Consortium (W3C), WCAG is an international standard that provides recommendations for making websites accessible.
• Section 508: A US federal law requiring that electronic and information technology developed or procured by the US Federal Government be accessible to people with disabilities.
• European Accessibility Act (EAA): A directive that establishes accessibility requirements for products and services in the European Union.
• Australia’s Disability and Discrimination Act: An Australian federal law that requires government information and services to be accessible by all (also see Australia’s Digital Transformation Agency’s ‘Make it accessible’ standard)

The positive impact of accessibility

When implemented correctly, accessibility has numerous benefits:

• Enhanced usability: Accessible websites often provide better navigation and a more consistent user experience.
• Improved SEO: Many accessibility practices, such as proper use of headings and descriptive links, also benefit search engine optimisation.
• Reduced legal risks: Compliance with accessibility laws and guidelines reduces the risk of legal penalties and lawsuits.

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 features and is working hard to fully comply with the latest WCAG 2.1 guidelines to make its CMS as inclusive as possible.

Features and initiatives addressing accessibility

Drupal includes several features and initiatives that help create accessible websites:

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

Drupal modules focused on accessibility

The following Drupal modules focus on accessibility:

• Drupal high contrast: Smoothly switch the active theme to a high contrast version just by pressing tab.
• Drupal htmLawed: 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 resize: 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 Stanford and Oxford, 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.au, 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:

• Drupal 7: This older version of Drupal may require manual implementation of accessibility features and additional modules to achieve full accessibility.
• Drupal 8 and 9: These versions have significant improvements in accessibility compared to Drupal 7, as they incorporate more accessibility best practices by default.
• Drupal 10: This latest version includes even more accessibility enhancements, such as improved focus management and better support for ARIA roles and attributes.

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 markup 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) in a hierarchical manner for organising content.
2. Use list tags (ul, ol, and li) for lists.
3. Use table tags (table, th, and td) for data tables and include proper table headers and captions.
4. Use the appropriate HTML tags for other semantic elements, such as strong, em, and blockquote.

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

2. Alt text for images

What it is: Alt text (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 images, use an empty alt attribute (alt="").

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

3. Proper use of ARIA attributes

What it is: ARIA (Accessible Rich Internet Applications) 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 content 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 readers to ensure that the ARIA attributes are correctly implemented and understood.

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

4. Keyboard navigation

What it is: Keyboard navigation 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 indicators for active elements to help users understand where they are on the page.
3. Implement appropriate keyboard shortcuts and ensure that they’re communicated to users.

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 forms 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 element to associate each form control with a descriptive text label.
2. Group related form elements using the fieldset element and add a legend to describe the group.
3. Use ARIA attributes where necessary to enhance the accessibility of complex form controls.
4. Ensure that form validation and error messages are accessible and clearly communicated.

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 navigation 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.

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

7. Accessible multimedia

What it is: Accessible multimedia refers to the inclusion of captions, transcripts and audio descriptions 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.

Above: Screenshot of captions being displayed for video content.

8. Clear and understandable content

What it is: Clear and understandable content involves using plain language, 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 jargon 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.

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

9. Colour and contrast

What it is: Colour and contrast 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 contrast 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 focus.
4. Test your website for colour and contrast accessibility using online tools, such as the WebAIM Color Contrast Checker.

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

10. Responsive design

What it is: Responsive design 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 approach, prioritising the mobile experience.
2. Use flexible grids, responsive images and CSS media queries 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.

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 community by contributing to discussions on accessibility best practices, sharing knowledge through blog posts and presentations, and developing and maintaining an accessible theme, CivicTheme.

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.

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.

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.