10 Guidelines to Improve Your Web Accessibility

According to W3C, web accessibility means that every person can perceive, understand, navigate, interact with, and contribute to the web.

In this regard, website accessibility encompasses all conditions that affect access to the web, including visual, auditory, physical, speech, cognitive, and neurological disabilities.

You’ll find a bunch of content on this topic around the web, and you should really look deeper into the Web Accessibility Initiative (WAI) if this topic interests you.

With that in mind, here are our guidelines:

1. Do not depend on color

Color is a powerful tool we often use to express emotions and communicate messages on the web. However, we shouldn’t put all our faith in color to convey meaning and information to our users.

Why?

For example, it’s widely known that green means “right” and red means “wrong,” but what happens when we use this as our only mean of communication?

If we display important messages in our user interfaces using only color to convey information, we are leaving 4.5% of the population behind.

Color should complement an error or confirmation message, but it cannot be the only tool we use. In order to be certain that we reach all our users, we should always add labels or icons that display whether filled information in a form is right or wrong.

It is ideal to check for color blind and contrast while designing, so make sure that you and your design team have the right tools. We highly recommend the Stark plugin for Sketch that helps you design with accessibility in mind!

2. Do not block zoom

In the age of responsive design we might have made a few irresponsible mistakes.

One of these is the apparition of maximum-scale=1.0, which disables the functionality to zoom in on web pages using mobile devices.

Astigmatism affects between 30 and 60% of adults in Europe and Asia, but blurry vision can affect people of all ages and nationalities (Hi mom!).

The ability to zoom in is not just another whiny WCAG guideline, but a tool to simplify everyday life for these people. So next time you are building a responsive website remember to think of ~~my mom~~ every user with blurry vision.

Besides making it possible for users to zoom freely on mobile devices, remember to also check that your layout looks good at up to 200% zoom in desktop browsers.

3. Rediscover the alt attribute

No matter how long you’ve been making websites, you might be surprised to know these few tips on the famous, yet mysterious, alt attribute.

The alt attribute is compulsory to every img tag but an empty alt attribute is completely valid. If an image is decorative or not necessary to understand the content of the page you can simple use alt=””
Screen readers tell the user that an tag is an image so there is no need to be redundant and begin your alt with “Picture of”; just go straight to the point.
The function of an image is as important as its meaning: if your logo links to your website’s home page then your alt text should be something like ”Home Page” instead of “Logo.”
Alternative text is not just about accessibility. Sometimes users with slow data connections disable images to achieve a faster browser experience. Have those users in mind whenever you write your alt attributes too!

But not all images in your website are img tags, right? You might have an SVG or two around there…or a whole SVG icon system.

How do we make SVG accessible for everyone? Luckily for us, the Scalable Vector Graphics standard has us covered! In order to describe our vectors we have theand tags for short and long descriptions.

4. Add subtitles and captions to your videos

This might be one of WCAG’s most difficult guidelines to achieve, not because of a technical difficulty, but because it can be time consuming. There are a few ways to get this done:

Let’s take YouTube for instance. Once you upload a video to the platform you can enable closed-captions. These are automatically generated and might turn out to be inaccurate in some circumstances depending on the language, background noise, or the speaker’s accent. Nevertheless, these are very easy to implement and can work well on most English-speaking videos.
If we are looking for 100% accurate captions it’s hard to trust YouTube to come up with good copy, so we must write the captions ourselves or hire a third party to do so. YouTube will take the most common subtitle formats (.srt, .sub, and .sbv) as well as letting us write the subtitles on the platform itself, which can be very convenient if we don’t own any subtitle software or if we wish to ask our community to help us translate the content without giving admin access to our account.
But perhaps you don’t want to use YouTube as your hosting platform. Perhaps you wish to use an HTML5 video hosted on your server. We’ve got you covered! HTML5 includes the tag, which you can use to easily attach as many caption and subtitle files as you like using the WebVTT format (Translations FTW!).

5. Semantics = accessibility

Font tag, remember? I hope you don’t, those were dark times.

In spite of common belief, semantics weren’t born with HTML5. They have been with us since the first HTML page and have greatly improved since then. With the HTML5 standard, new semantic tags are introduced for our everyday use.

Ok, but isn’t semantics just for SEO?

Not necessarily. When you consciously choose an tag over a

or a , you are deliberately changing the meaning of an element, providing hierarchy, and building a tree structure of your page’s information.

Screen readers are not oblivious to this. In fact, semantics is one of its most useful weapons.

Keep in mind that with great power comes great responsibility, so make sure to use the proper semantic tag for each element, from h1 to the brand new main tag.

6. Use the right mark-up

As a follow up to the previous point I’d like to discuss a few false friends and controversial pairs:

Time vs. Datetime

The time element displays many types of date formats, time zones, and durations using the ISO 8601 standard to represent dates and times.

Datetime is an optional attribute that helps represent the content of .

7. Use roles when necessary

In order to tell screen reader users that our link triggers an action and it is not, in fact, an ordinary tag, we must add the role attribute with the value “button”.

But beware!

When writing your JavaScript you need to call your functions not only on click but also when the user presses the spacebar. This is necessary because the behavior used for buttons is different from the one used for links and the user should be able to trigger the action on either of these commands.

8. On hiding elements

There are a few methods available to hide things with HTML & CSS. This table will help you find the best alternative for every situation:

Method	Action on View	Action on Screen Readers	Compatibility
CSS: visibility: hidden;	Hides element from view but its original space remains occupied (pretty much like opacity: 0;)	Not readable	Works everywhere, yay!
CSS: display: none;	Hides element from view and its original space is lost, next element in the flow will take its place.	Not readable	Works everywhere, yay!
HTML5: hidden attribute	Same as display: none;	Not readable	IE 11+
Aria-hidden = “true”	Content is displayed in the browser, but not conveyed to the user via the assistive technology	Not readable	IE 11+
CSS: .visuallyHidden class	Hides the element from view and removes it from workflow	Readable	Works everywhere, yay!

If you want to hide elements from view but still let screen readers know about them, then the last option is the best.

This is very useful in form labels or skip-to-content links. The visuallyHidden class is one of those CSS codes that should go into your favorites so it is easy to find for every project. Yes, you can change the name if you like (my suggestion is .pottersCloak, fyi).

9. Follow web accessibility standards

Web accessibility is hard and standards and guidelines are here to help.

All previous points in this article lead here: how does the button tag work?

It might be dull at first but not only are W3C standards and WCAG guidelines reliable, they’re also educational. Go ahead and get lost in the infinity of information they provide. I assure you you’ll discover code and practices you never knew existed!

10. Audit and review

Once you’ve applied all this knowledge, it’s time to test it. Here’s a list of the best tools to audit website accessibility:

ChromeVox: Available for Mac and Windows users, this Chrome extension is a screen reader you can use to test your website.
Accessibility Developer Tools for Chrome: Another great extension for this browser that adds an accessibility audit option in your everyday developer tools.
Color Filter: Test your website for different types of color blindness with this online tool.
W3C Validator: This official W3C tool will let you know if your HTML markup follows the web accessibility rules!
A11Y Compliance Platform: The Bureau of Internet Accessibility (BOIA) offers a graded report that provides an overview of how your website fares when tested against the WCAG A/AA checkpoints.
WAVE: A web accessibility evaluation tool made by WebAIM.