Drupal is a free, open-source, and general-purpose Content Management System (CMS) for a unique web experience. It enables developers, marketers, and agencies across different industries to personalize their web content at will and with ease. This includes adding and removing features, installing and uninstalling themes and modules, and high web performance. An important part where we focus on today, is improving the website accessibility of your Drupal website. Drupal website builder is thus a great choice to global enterprises, governments, NGOs, colleges and universities, brands, and other organizations, for user engagements. Unlike some CMS software, it allows you to:
- Use a CMS that is suitable for the creation and modification of complex, high traffic, and heavy content website that accommodates your intended purpose
- Employ a digital experience platform that permits several users to modification of your site from different locations at the same time
- Utilize CMS software that is less restrictive and cost-effective. You get to install Drupal without any charge for a license or recurring fees.
- Benefit from a widely used CMS with a high level of security which will prevent your site from any possible hacking attempts
- Exploit a highly flexible and SEO-friendly CMS that suits your desired site design and content, with a multilingual capacity of over 100 different languages.
What does Drupal platform offer?
With over a dozen integrations and more than a million websites that run on Drupal, it is inarguably a good shot for your website needs. Whether you are an editor, a writer, or a site administrator, you can always create a big name and a world-class website without any coding experience.
All thanks to Drupal’s What You See Is What You Get (WYSIWYG) editor for making this easy. It allows you to add or remove both textual and graphical contents on the interface. Not only that, you can equally add and remove hyperlinks with ease.
The Need for Accessibility check on your Drupal Website
There are indeed accessibility features on all versions of Drupal CMS. This exists for all individual users and developers on available themes and modules.
The Drupal accessibility team is ensuring conformance with the W3C guidelines. To this end, both administrators and visitors using the CMS are supposedly free from accessibility barriers that can stem from:
- color contrast and intensity
- image handling
- search engine form and presentation
- drag and drop functionality
- form labeling
- adding skip navigation to core themes
- removing duplicate or thanks tags
However, these standards are for the default installation of the website. And in most cases, people only begin from there but end up going beyond the standards while modifying the website to suit their needs.
For example, you sure would like to add your content on your site regularly and with a custom view. You would also want to import your desired theme and images, and you probably don’t like the default color contrast available. How about generating a particular markup you have wished for which is not readily available?
All these modifications will, no doubt, attract several accessibility issues to your site. Thus, while exploring the highly customizable Drupal CMS feature to suit your needs, it is essential to ensure that your site is still accessible to all.
This implies that you keep people with disabilities in mind when customizing your site. You sure don’t want to lose out on 71% of these potential users that will leave immediately because they can not easily navigate your website. Hence, making your Drupal website ADA compliant is vital for your business.
Scanning your Drupal Website: 4 Accessibility Checks to look out for
Here are four website accessibility checks you should keep in mind when customizing your Drupal site
1. Checks for sufficient color contrast
There are corresponding color contrast ratios for every regular or large text in use on your website, either for normal or enhanced contrast.
For standard texts, the least color contrast ratio for normal and enhanced contrasts is 4:5:1 and 7:1, respectively. Conversely, large texts require a color contrast ratio of at least 3:1 and 4:5:1 for normal and enhanced contrast.
Overall, providing sufficient color contrast will allow users with visual disabilities and other users to read your website’s content.
2. Checks for proper headings for structuring
You sure can’t do without header tags on your Drupal website. For some reason, you would want to structure your page content in sections and subsections to enhance readability.
For other reasons, you would need headers for easy navigation and to give users the liberty to skip sections of lesser interest on your site at will.
Now, to make the best use of headers on your Drupal website, you should ensure you:
- Use heading sequentially. Don’t skip heading levels.
- Use H1 heading on every page of your site.
- Use headings for structuring content, not for formatting.
3. Checks for accessible forms to enhance interaction:
The process of registering, commenting, and making orders on your Drupal website must be a smooth one. While it is advisable to use short and simple forms, it is vital to make the forms accessible to all users, lest they become challenging to use.
To make forms accessible, you should basically:
- provide crucial instructions and relevant information to guide pages and limit possible errors when completing the form
- subject to completing the forms to an unlimited time limit, except when necessary.
- Ensure labels are placed closed to their respective elements to reduce errors.
Creating accessible forms will enable users with cognitive disabilities, users with limited dexterity, and users using screen readers to understand better and complete it.
4. Checks for alt text and captions for non-text and video content:
It would be best if you considered accessibility when putting up media content on your Drupal site, whether you are outsourcing your media content or developing it yourself. This will not only help users with disabilities but will foster the overall experience on your site.
And as such, you should include:
- low background audio in your video to content and an audio integration of videos
- descriptive text for every image you upload on your site.
Is your Drupal website WCAG/ADA compliant?
There are several methods of checking your website’s compliance with ADA/WCAG guidelines. However, one of the following might help you begin the process or complement other methods you might use.
1. Manual Inspection
The most basic method to detect whether your Drupal website is WCAG/ADA compliant is manual inspection. This is especially to conform to some aspects of the W3C Guidelines. While the process might be rigorous, it will allow you to thoroughly check and make necessary changes, especially in areas such as labeling.
Other aspects of your site that require the use of alt text can also be inspected manually. The alt text’s availability does not justify the apt or useful description of their respective image unless tested.
2. Using tools
Another great way to inspect your website accessibility issues is by using a tool. One of which you can start with the Drupal accessibility toolkit. Asides, there are two tools you might want to consider:
- W3C validator: This tool by World Wide Web Consortium allows proper HTML and XHTML documents when working with websites. Though it is a partial measure of conformance, it is an essential step towards better site usability, browser compatibility and quickly detects validation errors.
- Chrome developer tools: This set of tools enables you to run an accessibility check on your website. It thus helps you to modify your web pages in line with the recommendations after diagnosis.
Web Accessibility solutions for your Drupal Website: Userway Accessibility Widget is key
While you can confirm the accessibility status of your website either manually or using selected tools, you can equally employ accessibility solutions to detect and correct errors at a-go.
And you can achieve that with the Userway accessibility widget. This free widget works perfectly regardless of the out-of-the-box customization you make or the number of pages contained on your site.
Installing the Userway accessibility widget will help you with plugins that work with every modification you make without rewriting the default site code. It will thus improve the overall user experience and assist you in repelling potential accessibility lawsuits and claims that violate the ADA and section 508 requirements.
The first step, of course, begins when you get the widget and input your website address. And these subsequent eight simple steps follow:
- Add your name, last name, and email.
- Choose your preferred icon type, size, and color to be displayed
- Select the position you would like to place the accessibility buttons (8 positions available)
- Choose your preferred language for the widget.
- Have an accessibility statement for your site. However, the Userway accessibility widget will help you generate if you don’t have one.
- Choose whether you prefer a white-label or a custom version of the widget.
And that’s it! A code will be generated exclusively for your site to be pasted before the </body> tag on your Drupal website’s backend.
Keep in mind that some steps are just for customization, which you can skip during configuration. You can then come back to complete the steps later. However, you would have succeeded in making your Drupal website conform to the ADA/WCAG guidelines.
Conclusion
Drupal is indeed a Content Management System that ensures compliance with accessibility guidelines. Drupal is equally a highly customizable and general-purpose software that allows you to modify its features to suit your purpose.It thus implies you might exceed the default accessibility pillars of the software in a bid to build your desired website. While there are methods for checking for accessibility issues, using a quick fix to detect and correct these issues might be a better option.
