On this page:
- Improving accessibility for a better user experience
- Part 1 — Understanding the metric
- Part 2 — Drupal and accessibility
- Part 3 — Top 10 ways to improve your Drupal website’s accessibility
- Part 4 — The importance of website accessibility
- Part 5 — Our contribution to accessibility
- Part 6 — How we can help with accessibility
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:
- Security
- Performance
- Accessibility
- Patches
- SEO
- Carbon emissions
In this guide, we exclusively focus on , 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 . 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 (WCAG): Developed by the World Wide Web (W3C), WCAG is an international standard that provides recommendations for making websites accessible.
- Section : 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 (EAA): A directive that establishes accessibility requirements for products and services in the European Union.
- Australia’s Disability and Discrimination : 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’ )
The positive impact of accessibility
When implemented correctly, accessibility has numerous benefits:
- Enhanced usability: Accessible websites often provide better and a more consistent user .
- Improved SEO: Many accessibility practices, such as proper use of headings and descriptive links, also benefit search engine .
- Reduced legal risks: Compliance with accessibility laws and guidelines reduces the risk of legal penalties and .
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 and is working hard to fully comply with the latest WCAG guidelines to make its CMS as inclusive as possible.
Features and initiatives addressing accessibility
Drupal includes several and that help create accessible websites:
- Semantic : Drupal uses semantic HTML , which improves accessibility by providing context and meaning to the content, making it easier for assistive to interpret.
- ARIA : Drupal integrates ARIA (Accessible Rich Internet attributes to improve the accessibility of dynamic content and complex user interface components. A recently-completed initiative was for HTML5 Roles.
- Keyboard : Drupal ensures that its core features are keyboard , allowing users who rely on keyboard input to access all functionality.
- Accessible : Drupal provides accessible form with proper labels, descriptions, and error messaging, ensuring an inclusive user .
Drupal modules focused on accessibility
The following Drupal modules focus on accessibility:
- Drupal high : Smoothly switch the active theme to a high contrast version just by pressing tab.
- Drupal : 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 : 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:
- University websites: Many universities, such as and , use Drupal for their websites and prioritise accessibility to provide equal access to education resources for all users.
- Government websites: Drupal is often chosen for government websites, like the main Australian government site , 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 : This older version of Drupal may require manual implementation of accessibility and additional modules to achieve full accessibility.
- Drupal and : These versions have significant improvements in compared to Drupal 7, as they incorporate more accessibility best practices by default.
- Drupal : This latest version includes even more accessibility , such as improved focus and better support for ARIA roles and .
Part 3 — Top 10 ways to improve your Drupal website’s accessibility
The top 10 ways to improve your Drupal website’s accessibility are:
- Use of proper semantic markup
- Alt text for images
- Proper use of ARIA attributes
- Keyboard navigation
- Accessible forms
- Consistent and logical navigation
- Accessible multimedia
- Clear and understandable content
- Colour and contrast
- Responsive design
1. Use of proper semantic markup
What it is: Semantic 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:
- Use heading tags (h1 to in a hierarchical manner for organising content.
- Use list tags (ul, ol, and for lists.
- Use table tags (table, th, and for data tables and include proper table headers and captions.
- Use the appropriate HTML tags for other semantic , 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 (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:
- For each image on your website, add an alt attribute to the image tag.
- Write a concise, descriptive alt text that accurately describes the image.
- For purely decorative , use an empty alt attribute (alt="").
Above: Screenshot showing HTML image element, with descriptive alt text beside the image it's describing. Taken from .
3. Proper use of ARIA attributes
What it is: ARIA (Accessible Rich Internet 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:
- Identify the dynamic and complex UI components on your website that require ARIA attributes.
- Add appropriate ARIA attributes, such as roles, states and properties, to the relevant HTML elements.
- Test your website with screen 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 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:
- Ensure that all interactive elements on your website can be accessed using the keyboard's Tab key.
- Provide visual focus for active elements to help users understand where they are on the page.
- Implement appropriate keyboard 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 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:
- Use the label to associate each form control with a descriptive text label.
- Group related form elements using the fieldset and add a legend to describe the group.
- Use ARIA where necessary to enhance the accessibility of complex form controls.
- 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.
What it is: Consistent and logical 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:
- Organise your website's content in a logical, hierarchical structure.
- Use clear and descriptive labels for navigation elements.
- Provide a consistent navigation experience across all pages of your website.
- Offer multiple ways to access content, such as a search function and a site map.
Above: Screenshot of , with clear and descriptive menu labels and a search feature.
7. Accessible multimedia
What it is: Accessible refers to the inclusion of , and audio 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:
- Provide captions for all video content, ensuring that they accurately represent the spoken dialogue and other relevant sounds.
- Offer transcripts for audio content, such as podcasts or audio recordings.
- 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 involves using plain , 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:
- Use plain language and avoid or overly technical terms.
- Organise content in a logical and coherent manner, using headings and subheadings.
- Break up large blocks of text with lists, images and other visual elements.
- 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 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:
- Use sufficient colour between text and background to ensure readability.
- Avoid relying solely on colour to convey information or indicate actions.
- Ensure that links, buttons and other interactive elements have clear visual states, such as hover and .
- Test your website for colour and contrast accessibility using online tools, such as the WebAIM Color Contrast .
Above: Screenshot that shows the results from a colour contrast analyser.
10. Responsive design
What it is: Responsive 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:
- Design your website with a mobile-first , prioritising the mobile experience.
- Use flexible , responsive and CSS media to create a responsive layout.
- Test your website on various devices and screen sizes to ensure that it adapts appropriately.
- 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:
- Case studies
- Our audit tool, Drupal360.io
- 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 by contributing to discussions on accessibility best , sharing knowledge through blog posts and presentations, and developing and maintaining an accessible theme, .
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:
- Accessibility audit and strategy
- Accessibility implementation
- Salsa Support
- 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.