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.
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.
- 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.
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!