5 Steps to Improve your Site’s Accessibility Ratings

Web Accessibility is about ensuring that everyone will be able to understand your site quickly and easily -- and that includes people with visual and cognitive impairments. It is a humane endeavor that you should undertake, not to mention the fact that you will risk legal liabilities if you don’t.

‍

What is Accessibility and why is it important?

When we say a site is accessible, we mean that the site’s content is available, and its functionality can be operated, by literally anyone. It is easy to assume that all users can see and use a keyboard, mouse, or touch screen, and can interact with your page content the same way you do. This is of course not true for users with  visual or physical disabilities.

Web Content Accessibility Guidelines (WCAG) are a set of guidelines created by experts to address website accessibility issues in a methodical manner.  While WCAG provides a comprehensive overview of what it means for content to be accessible, it can also be a bit overwhelming. To help mitigate this, the WebAIM (Web Accessibility in Mind) group has distilled the WCAG guidelines into an easy-to-follow checklist, targeted specifically for web content. Their checklist can give you a short, high-level summary of what you need to implement.

The stakes are high now, especially because users can sue companies that do not make their sites accessible. With all that said, let’s jump right into five major ways that will drastically improve your site’s accessibility ratings.

Watch your color contrasts

Color contrast problems happen when the foreground text doesn’t stand out sufficiently from the background. While it may look elegant to a designer, not having sufficient contrast makes it hard for users with visual impairments to easily see the text.  The general guideline here is that normal text should have a contrast ratio of at least 4.5:1 while large text should have a contrast ratio of at least 3:1.

To see if your site has these issues, you can use the free WAVE Accessibility Tool. Another popular free tool is the a11y color contrast accessibility validator. Fortunately, this is a very easy fix for you to make and can pay off big.

Label all your images

When you don’t apply the “ALT” labels to images on your site, a visually impaired person cannot read and understand what the image is about. When you start labeling images, remember that there are broadly three kinds: Informative, Decorative and Functional.

For informative images the ALT text needs to describe the image as concisely as possible. For decorative images, make the ALT text null (

) This makes the screen readers completely skip the ALT label while still satisfying the accessibility standard. Finally, functional images are ones that you click on. When describing them, the ALT label should describe what happens when the user clicks on them.

This can be a cumbersome process because your site has tons of images. Hopefully you are using a CMS platform, in which case you can simply go to the media library and apply all the ALT labels in a single place. If you're doing a relaunch of a website without messing up your SEO , ensure your ALT tags are taken care of.

Think through your form designs very carefully

Forms are an especially tricky area for accessibility and you have to get a few things right:

• Label all your fields. Screen readers generally navigate using keyboards, and all form labels are read out loud as they go through the form. This means that any fields that aren’t labeled will be skipped.
• Flag up Errors — Make sure error messages are brought to the top of the page. Error messages should be short and easy to understand.
• Make sure your form is keyboard accessible — Make sure forms can be used by people who can only navigate your website by keyboard. Make sure the programming software you’re using will allow keyboard accessibility.

Have a clean hierarchy of headings

HTML offers you six heading levels (H1 to H6) to structure content on a page. For eg., Heading 1 is the most important and typically corresponds to the title of a page. Headings with a higher rank denote the start of a new section while headings with a lower rank start new subsections. Screen readers depend on these heavily to communicate the overall structure to users with disabilities.

You should be careful to not skip heading ranks (e.g H1 directly to H3) because people using screen readers may not understand the relationship between the content sections.

Make sure to align the heading levels and their visual appearance (e.g. size, boldness). Typically higher levels have larger font sizes and font weights. You should take care to no style regular text to look like a heading unless you are using header markup.

Watch your javascript very carefully

All modern sites use Javascript to enhance user experience by providing greater interactivity and enabling faster information processing. However, JavaScript can also introduce accessibility issues. These issues may include:

• Navigation: Difficulty in navigating with a keyboard or assistive technology.
• Hidden content. Presentation of content or functionality that is not accessible to assistive technologies.
• User control. Lack of user control over automated content changes.
• Confusion/Disorientation. Altering or disabling the normal functionality of the user agent (browser) or triggering events that the user may not be aware of.

A javascript-enabled page will typically be fully accessible if the functionality is device independent in that it does not require only a mouse or only a keyboard. It will also be accessible if all information states are available to assistive technologies. Unfortunately, there is no easy fix to solve all accessibility problems associated with JavaScript. The best way is to individually evaluate each page that utilizes scripting and devise unique solutions to any accessibility problem that you find.

Conclusion

Web Accessibility is about ensuring that everyone will be able to understand your site quickly and easily — and that includes people with visual and cognitive impairments. It is a humane endeavor that you should undertake, not to mention the fact that you will risk legal liabilities if you don’t.  It is not very hard either. The five steps outlined above will get your site 90% of the way to getting accessibility-compliant. Good luck getting started!

‍

‍

‍