Website Accessibility How Tos

How to manually test your website

While automated accessibility checkers are very useful in identifying and fixing some issues, they only catch approximately 30% of all accessibility issues. Which is why it is important to also manually test the accessibility of your website.

Use the Manual Accessibility Testing Issue Tracker, v1.0 to help you record and prioritize web accessibility issues you identify from following the manual testing best practices below.

Keyboard navigation

Using only a keyboard (no mouse or touch screen), navigate your website using the Tab, Enter, and Space Bar keys.

Confirm you can successfully do all of the following using only the keyboard:

• Always see a focus indicator around each element you land on. A focus indicator is typically a blue border that appears around an element, highlighting it so you know where the keyboard focus is on the page.
• Navigate to all pages of your website from any navigation menus.
• Open all links.
• Fill in and submit an forms on the website.
• Interact with any dynamic content or media, such as video or audio players, sliders, buttons, etc.
• Skip repeated content, such as the page header or navigation, using a Skip link at the top of the page., to jump directly to the main content on each page.

Screenreader accessibility

Most operating systems (OS) have built-in screenreaders. For Windows OS you can download NVDA for free and for Mac OS VoiceOver is already built-in.

You should test your website with a screenreader to make sure that the screenreader describes the content and functionality accurately. It can be very confusing for a user to hear a cryptic message, such as "right arrow" or "left arrow" rather than "next slide" or "previous slide" for a slider,--or worse--nothing at all when the user is on an element.

To get started, turn your screenreader on and follow the keyboard navigation steps above. When testing with a screenreader you'll want to test using only your keyboard.

Disable the stylesheet

A quick way to test that the reading order of your webpage will be logical for a screenreader or keyboard user and confirm that meaning is not conveyed by styles alone (such as color) is to turn off your website's cascading style sheet (CSS).

The best way to do this is to install the WAVE browser extension in Chrome, Firefox or Edge. Run WAVE on each page of your website and click on the No Styles option located at the top of the WAVE panel, just above the Summary section.

Zoom to 200%

Users with low vision, whether from age or a disability, will increase the zoom level in their browsers in order to better see a website's content.

To ensure your website is accessible for all of your users, zoom your browser to 200% and confirm that all pages of your website meet the following best practices:

• The website should be responsive, meaning it always fits within the width of the viewport (browser or device window) without horizontal scrolling.
• The text should wrap properly; text should not extend outside of the browser window where a user cannot read it.
• The text should not be pixelated or distorted. This often occurs when a website has images of text rather than actual text on the page.
• Make sure that no functionality is lost or hidden. Sometimes forms, buttons, navigation, or other interactive elements can become unusable when a browser or device is zoomed to 200%.

Confirm text is readable and legible

Text should be easy to read and understand. This not only helps users who may have low-vision, dyslexia or other cognitive impairment, but it helps people who are not native English speakers, as well as others to better understand the information your website presents.

Best practices for readability:

• Avoid using specialized jargon or complex words.
• Write at a 12th grade reading level for college-educated audiences.
  • If your audience is not college-educated, aim for an 8th grade reading level.
• Avoid creating walls of text. Keep your paragraphs and sentences short.
• Try using the Hemingway App to improve the readability of your content.

Best practices for legibility:

• Use a larger font size. Size 14 pt font is recommended.
• Avoid using display fonts or typefaces (i.e., overly stylized font designs).
  • Recommended fonts: Arial, Helvetica, Verdana, Open Sans, Calibri, Futura, and other Sans Serif fonts.
• Use <strong> and <em> tags rather than <b> or <i> tags to add emphasis to important text. A screenreader can alert a user to emphasized text when <strong> and <em> are used, but not when <b> or <i> are used.
  • Use bold and italic font (emphasized styles) sparingly.
• Keep text left-aligned.
• Use line spacing of 1.5 to add more space between lines in your paragraphs.

Learn more readability and legibility best practices, recommended by the Nielsen Norman Group.

Other areas to manually test

You will also want to confirm you are following the other website accessibility best practices on this page for Headings, Images, Color Contrast, Links, and Other Multimedia.

See these sections below for information on what to look for.

Headings

Why 

Sighted users have the benefit of being able to scan for certain information and automatically bypass information that is not relevant. A properly structured document involves the use of heading and paragraph tags, which provide a logical reading order for the document. Non-sighted users who rely on screen-reading software can use the heading structure to navigate through the document.

How to be compliant

Heading ranks should be ordered from <h1> (the highest) to <h6> (the lowest).

Compliant heading structure example:

<h1>Main topic</h1>

<h2>Sub-topic #1</h2>

<h2>Sub-topic #2</h2>

<h3>Sub-topic of sub-topic #2</h3>

<h4>Sub-topic of sub-topic of sub-topic #2</h4>

<h2>Sub-topic #3</h2>

Non-compliant heading structure example:

<h1>Main topic</h1>

<h4>Sub-topic of ?</h2>

<h3>Sub-topic of ?</h2>

In this example, heading levels are being skipped, so the informational structure and reading order is not clear.

Learn more about headings.

Images

Why 

Images on web pages are effective for conveying visual data. In order for the information to still be useful to someone who cannot see the image, it is necessary to explain the content as completely as possible. This can be done using alternative text (alt text).

How to be compliant

You will need to use your best judgement to determine which image-type best fits your case. For nearly all of your images you will need to provide alt text.

Notes on alt text

• Your alt text should describe the image so that the content and the function of the image is obvious. 
• Your alt text should be succinct. Use as few words as possible to accurately describe your images. Try to stick to under 240 characters unless the image requires a more in-depth explanation. 
• Do not repeat the same content from the web page in the alt text of the image. 
• Do not use the phrases "image of..." or "graphic of..." to describe the image excluding cases where the exact type of image is important for context.

Learn more about alt text.

W3's Tips and Tricks for alt text.

Decorative images

Decorative images don't add information to the content of a page. You should leave the alt text blank for these images so that assistive technologies will ignore them.

Learn more about decorative images.

Informative images

Informative images represent concepts and information. Your alt text should convey equivalent information in a short phrase or sentence. 

Learn more about informative images.

Functional images

Functional images are often used as links or buttons. Your alt text should describe the function of the link or the button, rather than the visual image.

Learn more about functional images.

Images of text

It is best to avoid using text inside images (with the exception of logos). However, if you do use text in an image, your alt text should contain the same exact words as the image.

Learn more about images of text.

Complex images

Complex images usually refer to graphs or diagrams. Your alt text needs to convey all of the data and details presented in the image. In these cases you want your alt text to be concise but also complete so your text may be longer than the recommended 240 characters.

Learn more about complex images.

Groups of images

The text alternative should convey the information needed to comprehend the entire group of images.

Learn more about groups of images.

Color Contrast

Why 

Some users may have trouble seeing certain colors or distinguishing between contrasting colors. Therefore, choose foreground and background color combinations that provide sufficient contrast to allow low vision or color blind users to distinguish between color differences.

How to be compliant

• Don't use color alone to convey meaning.
• Check the foreground and background colors of your website using a tool like WebAIM's contrast checker. (If using this tool, your colors must pass the AA standards.)

Create an accessible color palette with Color Safe.

Learn more about accessible colors.

Links

Why 

In particular, those using screen readers navigate content differently than those who use a keyboard and mouse. Using redundant language and ambiguous text can result in a poor user experience and can make it difficult for these users to quickly find links on your pages.

How to be compliant

• Avoid using ambiguous link text that is difficult to understand out of context (e.g., "Click Here").
• Do not include "link" in the link text.
• Practice "most common usage" for link text. For example: "contact us" is a better option than "how to contact us" for a link. If a user is searching for a particular link, they will more quickly be able to identify "contact us" as the appropriate link as opposed to "how to contact us."

Learn more about accessible links.

Other Multimedia

Why

Your HTML-based content is not the only content that needs to be accessible on your websites. If you share PDFs, Word Docs, videos, and other kinds of content you need to make sure all of those materials are also accessible.

How to be compliant

See the How To page for information on how to be compliant for different types of multimedia.