Top 10 Accessibility Checks

So you've heard that web accessibility is important and would like to know how do I get started? This post will start with some of the basic and most common ways you can ensure your site is accessible to all.

1. Declaring the Document Language

This is a simple one, but often forgotten. Declaring the document language ensures that screen reader users have the document voiced and pronounced in the correct language. To do this, you must make sure that the document language is declared at the top of the page. The lang attribute must be used as shown in the example below. If other languages are mixed on one page, declare the primary language on the <html> element and wherever other languages appear on the page, declare that specific language on the container element. You can find a list of language codes on w3schools.

							  
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Other Languages</title>
</head>

<body>

 <p>This documents primary language is English.</p>
 <p>Here's an example of using of using mixed languages:</p>
 <ul>
   <li lang="es">Español</li>
   <li lang="vi">tiếng việt</li>
   <li lang="zh">中文</li>
   <li lang="de">Deutsch</li>
 </ul>

</body>
</html>

2. Using Valid HTML and CSS.

This is another easy one that can often be overlooked. Modern browsers are very good at guessing how invalid HTML should be interpreted and display it as normal, but unfortunately screen readers can have problems with invalid code. Always use valid HTML and CSS. You can check your HTML and CSS with a validator.

3. Heading Structure

Heading elements such as h1 through h6, are not only used for sizing purposes, they're used for semantic purposes as well. These tags indicate to a user the logical structure of the content. All pages should start with an H1 and never skip heading levels. For example, you should not have an h3 directly after an h1. They should have a logical hierarchy.

								
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Heading Example</title>
</head>

<body>

  <h1>h1 should be the first heading on the page. </h1>

  <h2>Use headings in order as they relate to each other.
   Do not skip heading levels.</h2>

  <h3>This heading should be a sub heading of the h2 above.</h3>

  <h4>Subsequent heading should relate to the one above it 
  in some way.</h4>

  <h5>This should be a sub heading that relates to the h4 above.</h5>

  <h6>Headings can go up to 6 levels.</h6>	

</body>
</html>

4. Use the Alt Attribute for Images.

Not all users can see images. If a user is blind or has low vision, an alt attribute can help immensely. An alt attribute should describe the image to a non-sighted user and indicate its function if it has one. All images should have alt attributes regardless of their purpose. Images that are for design only and don't have any meaning to the user should have an empty alt attribute.

Web Aim has a great article on alt text that explains how to come up with the best description that fits the context of the image.

								
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Alt Attributes for Images</title>

</head>
<body>

  <h1>Abraham Lincoln</h1>

  <img src="abraham-lincoln.jpeg" alt="Portrait of Abraham Lincoln">

  <p>Abraham Lincoln was the 16th president of the United States.
   He preserved the Union during the U.S. Civil War and brought about
   the emancipation of slaves.</p>

</body>
</html>

5. Foreground and Background Color Contrast.

This is a big one. Those that are color blind or have low vision can have extreme difficulty in reading text on a page when the contrast between the foreground and background is not high enough. All colors used on a web page should be checked to ensure there is enough contrast difference between the foreground and background colors. You run colors through a contrast checker on Web Aim.

6. Give Links Context

Often, screen reader users will use keyboard shortcuts to skip through links to find what they're searching for. Links titled vaguely with phrases such as "click here" or "find information here". give no context to what the linked to page is actually about. You should always use meaningful and descriptive link titles. A good rule of thumb is to ensure you can understand where the link goes to and what its target page is about by reading just the link title. This may mean longer link titles, but it's a small price for increasing understandability of a links purpose.

7. Keyboard Accessibility

Keyboard Accessibility is also often overlooked. Many users use a keyboard to navigate websites instead of using a mouse. Sites that do not test for Keyboard Accessibility often have problems with focus getting stuck in a certain area or sometimes links that should be accessible are not focusable at all. You should test for Keyboard Accessibility by ensuring you can use the Tab Key only to navigate all links in the site. This includes non-links that the user can interact with. These elements you should make focusable as well.

8. Accessibility Page

All websites should have a page dedicated to accessibility inquires where a user can report accessibility issues or request additional accessibility features. All necessary contact information should be listed here. This page can also describe all of the sites available accessibility features.

9. Avoiding Using Only Visual Indicators

Avoid using color to indicate functionality. Users should be able to access all of the sites features without relying on colors from the page. For example, graphs that rely solely on color codes can make it impossible for a blind or low sighted user to understand. Instead, if you must use color, think of additional ways you can include instructions users that cannot rely on color alone.

10. Frequent Testing

This is a big one. Frequent Testing should be performed on each new page or feature of the site. Automated tools like the Web Accessibility Evaluation Tool (WAVE) can drastically speed up testing. However, manual testing should never be overlooked and should be included in your accessibility evaluation workflow. For example, keyboard accessibility must manually be tested. Some tools that will greatly aid in testing are listed below:

These 10 Checks should get you well on your way to evaluating accessibility and successfully implementing more accessible features into your site. You can checkout additional accessibility resources on the Resources Page.

Next Article