Drupal accessibility is vital for your website

It is vital to create accessible content on your website. Among your audience, people with impairments will also be included. On top of that, the website itself will become more user-friendly and you will better meet the Drupal accessibility standards that exist today. In this blog post, we will go over 20 tips that will improve your content and website accessibility, then I'm going to make a brief description of W3C and the WCAG guidelines and finally, I'm going to suggest 5 Drupal modules that will aid you in your quest to improve your Drupal accessibility. Let's get started.

1. Incorporate a Site Map

A site map is a beneficial tool that lets a user of your website assess the logical structure of your website. This, in turn, will make it easier for the user to be able to overview the content of your website. On top of that, it makes the content on your website easier to be accessed and increases your Drupal accessibility. 

2. ALT attributes to describe pictures

Alt attributes are a very important part of enabling your website to have accessible content. The main purpose of ALT attributes is that is going to help the search engines and website better be able to describe and understand what the picture is all about. This can be very helpful for people who can’t see and receive their image descriptions through audio feedback. Probably your website was built from the start with alt attributes in the content, but you need to train your writers and site maintainers to not skip over the alt attributes when updating the website.

3. Clean and distraction-free content

Another paramount point to make your content more accessible is to host your content on a clutter-free website. This will enable easier access to the content on your website. Which in turn will make it less frustrating for impaired people to navigate your website and to get to the important parts of it.

4. Clear and simple language

Language is another factor that has to be taken into account if you want to make accessible content. It’s important to adapt your language to be able to be understood by a wide range of people. That is why, even in writing, it’s important for the language level to remain conversational. That means no fancy words that can make it more difficult for the screen reader to do its job. If you install the Yoast SEO Drupal module you'll get a real-time score of how easy-to-read your content is! 

5. Meaningful link text

It is important that the link text is as clear as possible. Link texts like “click here” or “read here” are not descriptive enough. Instead, try to link a sentence or group of words that are describing what the link is about. This will lead to a decrease in frustration for users that are unable to see and use a reader.

6. Ensure keyboard accessibility

People that have motor disabilities, visual impairment or are amputees, often have trouble using a keyboard or any device that requires a high degree of motor coordination. That’s why keyboard accessibility is so important. The main point of keyboard accessibility is to make every element or link be selectable by using the TAB key. In order to test if your website has this functionality, just press TAB and see if every element will be able to be selected. This way, you will greatly reduce the struggles of impaired people.

7.Provide videos and audios with transcripts or captions

In order to make accessible content, video and audio should have transcripts or captions. This is a crucial step in making the content on your website accessible. 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. 

8. Support screen readers

Screen reader support is the most important piece for improving your Drupal accessibility. With this kind of software support, your website will be able to read out loud the text that it’s being displayed on your website. Basically, it lets blind people hear the text from your website. On top of that, paired with captions and translations, the screen reader can also read what is happening in a multimedia video. Also, the screen reader gives two types of feedback, either through speech or through braille. A general awareness of how screenreaders work is a great first step in training your writers on accessibility.

9. Don’t use automated media

What is automated media? Automated media is the media that starts automatically after a website is accessed. It either can be an ad or a video. In both cases, it can be annoying for somebody with an impairment to have to find and mute or close the media windows. This is why automated media should be turned off on your website.

10. Review your website using automated accessibility assessment tools

It’s always a good idea to assess your website's Drupal accessibility with an automated testing tool for accessible content. This tool will automatically scan and see how compliant your website is. After this, you can see the areas of your website were your doing great and the areas were you could still improve on your accessibility.

11. Make your website seizure proof

It’s really important to make sure that your website is not causing some unwanted seizures in your audience. For example, someone that suffers from epilepsy can have it triggered by rapid flashing animations. A simple rule to avoid such an unfortunate event is to not have content that flashes for more than 3 times per second. This way you will make sure that you’re not going to trigger any photosensitive seizures.

12. Content that has to be input by the user has clear instructions

If a website requires its users to input content, then instructions have to be crystal clear in order to avoid confusion. The easy way to do this is to provide labels for every form control. Examples of such control are drop-down menus, text fields, and checboxes. On top of that, the labels have to describe the function and purpose of the control. This will make sure that the assistive technology will refer to the correct form, increasing your Drupal accessibility.

13. Character key shortcuts

If a website supports keyboard shortcut that consists of numbers, letters, punctuation or symbols, then it should have the option to be able to be turned off. This will make sure that people will not trigger accidentally a shortcut in by pressing on the wrong button.

14. Users are allowed to turn animations off

Another important feature that your website has to have in order to be more inclusive and accessible has to be the function to turn animations off. It’s important to have this feature because animations can be distracting and can make the navigation on your website harder.

15. Pointer gestures

Complex actions such as pinching for zooming or swiping should also be able to be done through other means. This will ensure that the people of your audience that cannot perform for various reasons, will not be left out. This is a vital point for your Drupal accessibility.

16. Motion actuation

The interaction that can be used by moving your phone, for example shaking it, should also be able to be done through the interface, without the need of physically doing the interaction. This will increase the Drupal accessibility, inclusiveness, and user-friendliness of your website.

17. No time limits

Having no time limits is really important. Imposing time limits on your website can make people with motor, visual or hearing disabilities have a hard time reaching their goal in a timely manner on your website. This, in turn, can lead to an increase in user frustration. In order to avoid that, disabling time limits is the way to go.

18. Text resizability

Another important aspect of improving your Drupal accessibility is text resizability. Basically, your website has to allow its users to zoom to up to 200% from the original size. This will ensure that even with some sort of visual impairment might be able to read the text or view your photos.

19. Visual presentation

This is another important criteria when you are considering making your website more inclusive. Adhering to this guideline will give our end users the ability to choose how to visualize your website. This includes the colors, the line spacing, and sizes. This will give your users the freedom to choose the visual representation of your website however it suits him best. 

20. Bypass Blocks

Another tip to make your website more inclusive and user-friendly is to create the opportunity for the users to be able to bypass blocks. This is important because a screen reader will read all the navigation links, header links and all sorts of repetitive content that is present on a website, regardless of how long the links are. Now, you can imagine how frustrating it can be for a person to have to sit and listen to a high number of links, that may be irrelevant for them, before actually getting to see or hear the content that they were originally searching for. This may lead to a lot of your visitors becoming frustrated and leaving your page. So, in order to avoid this situation, the easiest way is to provide a skip to content link in your header. With this, you create better Drupal accessibility for your website.

WCAG Guidelines

WCAG was developed by the W3C (World Wide Web Consortium) as a set of regulations that help make digital content accessible to all users, including those with disabilities.

There are 3 versions of these regulations. These are WCAG 1.0, WCAG 2.0 and WCAG 2.1. The latter two have at their core four basic principles that have to be met in order for a website to be compliant. These principles are as follows: 

• Perceivable: The information and user interface has to be presented to the user in a way that can be perceived.

• Robust: The content has to be robust enough to be able to be interpreted by many types of users, including assistive technology and future technology.

• Operable: Navigation and user interface components have to be operable.

• Understandable: Information and user interface have to be understandable.

On top of that, each guideline has a level of compliance that is assigned to it. The levels of compliance are as follows:

• A: This level of compliance usually has the highest priority and is the easiest to achieve out of them all.

• AA: This is a more extensive guideline. It is usually regarded as the standard to meet.

• AAA: This is the most extensive design standards to meet. It is also more strict, thus it is the one that is the least common to meet.

Currently, most laws require websites to be WCAG 2.0 compliant. Only if the laws in your country explicitly state that your website should comply with the standards of WCAG 2.1, then you should adopt that. However, the W3C does suggest that the new website should be built in compliance with the WCAG 2.1 since they tend to be more inclusive and user-friendly.

Drupal Modules that help with your Content accessibility

Now that you have an idea of the compliance levels for accessibility, it’s time to see a list of Drupal modules that can help you improve the Drupal accessibility of your website and become more user-friendly and inclusive.

Automatic alternative text

This Drupal module makes it easy for the images on your website to have an alternative text, even if there is none specified by the user. This module uses Microsoft's Azure Cognitive Services API. It basically identifies what the image is about and makes a description or more based on the confidence level.

Text resize

This module allows the text on your website to be adjusted to the needs of your user. This module is available for both Drupal 7 and 8. 

Style Switcher

This module provides a high degree of functionality for the users that are suffering from colorblindness. It gives the ability for themers to create themes with alternative stylesheets. This, in turn, gives the ability for the user to select the right color scheme for their particular type of colorblindness.

Accessibility Scanner

This module allows you to perform website accessibility assessments in order to see where your website can be improved. This module has to be used in conjunction with achecker. On top of that, the websites that can be asses are both local and remote.

Fluidproject UI Options

This module provides the user with the ability to control and modify a page’s font size, font style, height, contrast and link style. On top of that, those preferences are remembered on the website by using cookies. A perfect module to ensure a higher degree of customizability for all its users.

Conclusion

Hopefully, now that you find out those tips and have a better understanding of the WCAG guidelines imposed by the W3C, you can put your newfound knowledge into practice and use the suggested Drupal modules to make the most amazing, inclusive and user-friendly website that you can make. These will get the Drupal accessibility of your website to new heights!