Accessibility isn’t just yet another item on our to-do list to cross off before we launch our website. Accessibility is the foundation of what we do as web designers and web developers and it’s our obligation to treat it as such.

Watch this following video to understand why Accessibility is important and the steps we should take to make our website accessible:

Source: Traversy Media

Here are some Accessibility tips to keep in mind:

- It’s important to define the natural language of your document

Telling the browser which language you are using in your document has many benefits. It’s good for Search Engine Optimization (SEO) and it helps third-party translation tools and browsers to identify the right language and dictionary. You can use lang as follows to do this:

<html lang="en">...</html>

- You can hide content using the hidden attribute

If you want to hide content visually and from screen readers, use the hidden attribute.

According to this article, browser support for the hidden attribute is very good, except for Internet Explore 10 (IE10) and lower, as detailed by this site. You can provide support for older browsers if you add this fallback to your CSS.

- Sometimes it’s better to add a blank alt attribute to an <img> element

If an image is used as content, apply the alt attribute to describe the image’s content and function succinctly. If the image is purely decorative or doesn’t add valuable information, consider embedding it with CSS as a background image.

It’s important that you don’t omit the alt attribute. Omitting this attribute altogether indicates that the image is a key part of the content, and no textual equivalent is available. Setting this attribute to an empty string (alt=””) indicates that this image is not a key part of the content and that non-visual browsers may omit it from rendering.

- If you need a button, use the <button> element

In general, you should always favor native HTML elements, if there is one, over faking your own. For example, if you need a button, use the <button> element and not a <div> that is styled like a button.

Buttons have many benefits/crucial features, they include focusable, clickable (with mouse and keys), and they allow screen readers to identify them as buttons.

- Structuring your markup correctly with headings is important

By creating a sound outline using headings <h1> – <h6>, you are helping users to better understand the structure of your page and relationships between individual sections. On top of that, it helps users who use assistive technology to navigate your webpage. Screen readers provide different ways of moving from one piece of content to another.

tota11y is an Accessibility visualization toolkit that let’s you check if your outline is persistent with Accessibility best practices.

Previous CheckPoint

Back to Chapter

Next CheckPoint