How Can You Make Your Website More Accessible?

19 May, 2022

Drupal is an open-source CMS platform that has long been supporting Accessibility. They had prioritized Accessibility when they moved to Drupal 7. They have moved it into the core and with the upcoming Drupal 10, both the front-end and back-end themes are only becoming inclusive.

In 2018 Dries Buytaert, the Founder of Drupal and CTO of Acquia, when talking about the stability of Layout Builder he said it would have to pass the accessibility gate which is the Level AA conformance with WCAG and ATAG. He later went on to say, “Today, I've come to believe that accessibility is not something you do for a small group of people. Accessibility is about promoting inclusion. When the product you use daily is accessible, it means that we all get to work with a greater number and a greater variety of colleagues. Accessibility benefits everyone.”

However, these standards are for the default installation of the website. And in most cases, people only begin from there but end up changing the standards while modifying the website to suit their needs. For example, if you want a theme that has a very vibrant color but doesn’t have the feature to have contrast that will make it more accessible you would still go ahead and get the theme ultimately losing out on potential audience.

It’s no longer a choice to have an accessible website, it is a necessity. So here is what you can do to make your website more Accessible.

A. Media

1. Ensure Videos or Audios have Captions and/or Transcripts

It’s important to provide alternative ways for users to access essential media. Videos and live audio should, at minimum, have captions and preferably a transcript. This adds value to your website. With this, screen readers will be able to aid the visually impaired by reading the text, while the deaf will be able to read the text. An example for this is the Lullabot Podcast. They provide additional added value text content to podcast nodes.

2. Add Descriptive Alternative Text to Images

Though this is a repetition to the above mentioned point, it is extremely important because images are used more than videos or audios. It is not only helpful for people who rely on a screen reader to have the content of the website read to them, but is also very important for search engine optimization (SEO). Remember your alt texts need to be short but descriptive. Around 140 characters is usually enough.

3. Avoid Flashing Media

Web pages may not contain content that flashes more than three times in one second as this may cause seizures for people who have epilepsy. This way you will make sure that you’re not going to trigger any photosensitive seizures. It’s really important to make sure that your website is not causing some unwanted seizures in your audience.

B. Page and Site Navigation

1. Support Skipping to Content

You need to provide a keyboard-supported ‘skip to content’ mechanism to bypass navigation, other elements or blocks of information that repeat on every page to access the main content. This makes navigating your page with a keyboard or while using a screen reader much easier. Another important aspect is to turn animations off. This is because animations can be distracting and can make the navigation on your website harder.

2. Provide Landmarks for Easy Navigation

HTML5 tags help users with screen readers jump to different content sections easily. But, these tags should be in the same relative order and consistent through all pages. You can even use a site map as it lets a user of your website assess the logical structure of your website. This makes the content on your website easier to be accessed and increases your Drupal accessibility. 

3. Ensure Keyboard Accessibility

Some users often have trouble using a mouse or any device that requires a high degree of motor coordination making keyboard accessibility important. Keyboard accessibility will help make every element or link be selectable by using the TAB key. You will have to check whether your website has a focus ring around focusable elements like buttons, links, form inputs, etc. And if you have forms on your page, make sure they can be accessed by keyboard.

C. Color and Text

1. Check Your Color Contrast

Color contrast is important for both low-sighted and color blind users. According to the AAA standards, text and background need to be black and white. A 4.5:1 ratio to background for text, 3:1 for headings, and a 3:1 ratio for non-text contrast needs to be maintained for the website to be accessible.

2. Enable Text Resizing

Users should be able to resize the text on your Drupal website without loss of content or functionality. Basically, your website has to allow its users to zoom to up to 200% from the original size. You can easily achieve this scalability by using relative sizes such as percent or ems rather than absolute sizes like pixels or points.

3. Meaning is Not Conveyed Through Color Alone

The use of color can enhance comprehension, but that information may be lost for a person who is colorblind or is using a screen reader. So color cannot be the only visual indicator to inform or indicate an action or ask for a reaction. Make sure that information conveyed through color is also conveyed in text so it can be picked up by screen readers as well.

4. Keep Adequate Text Spacing

Keeping adequate reading space is important for any reader. You need to keep in mind that line height should be at least 1.5 times the font size, the spacing following paragraphs should be twice the font size, the letter spacing should be at least 0.12 times the font size and the word spacing should be at least 0.16 times the font size.

D. Content

1. Checks for Proper Headings for Structuring

All the headings and labels used on your website should be clear and describe the element it concerns. You have to use H1 heading on every page of your site. Also it's good to remember that you should use headings for structuring content, and not for formatting.

2. Clear and Simple Language

It’s important to adapt your language to be able to be understood by a wide range of people. That means no fancy words that can make it more difficult for the screen reader to do its job. With the language it is also important to have well-structured and organized content. This will be appreciated by readers who use assistive technology like a screen reader to access your page.

3. Meaningful Link Text

Every link should make sense if the link text is read by itself. So keep the link text as clear as possible. Links like "read more" or "click here" should be avoided as these will not allow a user to understand where the links lead once they are taken out of their context. Instead try to link a sentence or group of words that are describing what the link is about. Remember to mention if the link opens a new tab or triggers a download, in which case indicate the file type and size, too.

4. Checks for Accessible Forms to Enhance Interaction

The process of registering, commenting, and making orders on your Drupal website must be a smooth one. It is important to use short and simple forms and make the forms accessible to all users. You need to provide crucial instructions and relevant information to guide pages and limit possible errors when completing the form. Ensure that an unlimited time limit is set for any form except when necessary. Also check if labels are placed close to their respective elements to reduce errors.

5. Use Tables Sparingly

Only use tables when absolutely necessary. It is best to not use tables as part of the layout or to display lists as they can make them confusing for screen readers. Use tables to display data with a logical relationship that is best represented in a grid. Ensure data cells are associated explicitly with header cells so screen reader users have an easier time navigating and understanding the content of the data table.

D. Basic Code Analysis

1. Checking the HTML Tag

Incorrect HTML can cause issues when viewing a website with a screen reader. So it's best to check the HTML tags once. In most cases Drupal should set this automatically so this should not be a problem.

2. JavaScript is accessible

Ensure that JavaScript event handlers are device independent and make sure that your page does not rely on JavaScript to function.

3. Non-HTML Content is Accessible

PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML or provide an accessible alternative. PDF documents should be saved with the tagged format. A tagged PDF file looks the same, but it is almost always more accessible to a person using a screen reader.

These are a few things that will help you make your website more accessible. Despite the amazing modules and Drupal features there is still more that can be done to make your website more Accessible. So on this Global Accessibility Awareness Day, what will you do to make your website more Accessible?

Note: The vision of this web portal is to help promote news and stories around the Drupal community and promote and celebrate the people and organizations in the community. We strive to create and distribute our content based on these content policy. If you see any omission/variation on this please let us know in the comments below and we will try to address the issue as best we can.

Related People

Related Organizations

Advertisement Here

Upcoming Events

Advertisement Here