Creating Accessible Websites

Use Headings

Headings are a handy means of keeping your website organized and easy to navigate. Bear in mind theFour illustrated people building a webpage together following when creating headings for your website:

  • The page title should be marked up as H1.
  • Major page sections should be marked up as H2.
  • Use H3 if needed for sub-sections.
  • Use headings like an outline and aim to have consistent structure.

Use Descriptive Link Text and Button Labels

Links that say “Click here” or “Learn more” are difficult to interpret with a screen reader. Using aria-label to add context is helpful, but be sure to provide brief but meaningful link text that: 

  • Provides some information when read out of context;
  • Explains what the link offers;
  • Doesn't talk about mechanics; and
  • Is not a verb phrase.

For example, rather than "click here" or "this article", make the link text the article title:

<a href="...">Article Title</a> provides more detail on cybersecurity.

Aria-label code can be used to make buttons instead of links. However, while links are used for navigation, buttons should only be used for actions, such as submitting a form or closing a window. For example, the following would look like a button with an X to a sighted user, but be read as “close” by a screen reader:

<button aria-label="Close">X</button>

Additional best practices for using aria-label can be found in the Resources section below. 

Describe Important Images

Null Alt for Decorative Images

If an image is a placeholder, a visible divider, repeats nearby text, or is purely decorative and doesn’t add information, use null alt which is coded as alt="". No characters inside the quotes!

Appropriate Alt Text

Write image descriptions that are appropriate to the context: brief for simple contexts and detailed for important educational images. See Resources below for guidelines on how to write image descriptions.

Don’t Use “Image of” in Your Image Descriptions

Screen readers will inform users that there is an image there, so no need to say so. However, if the kind of image is important, include that, such as a black and white photograph, an MRI scan, or an oil painting.

Forms

  • All form elements should be marked up with label and id so that screen readers can correctly report the purpose of each form field.
  • Group radio buttons and checkboxes with fieldset and legend.
  • Check that the form can be completed from the keyboard.
  • Don't use color alone to indicate incorrect fields – add some text or an icon to visually distinguish fields that need attention.

Test Your Website from the Keyboard

Can you use the entire site without touching a mouse?

  • Ensure there is a visible keyboard focus indicator on all elements.
  • Ensure every selectable component is in the keyboard focus order.

See Resources below for additional keyboard navigation tips.

Colors

  • Choose colors with good contrast. Use a free color contrast checker tool to check your color palette. See Resources below for options.
  • Set the background color when you set the foreground color. Otherwise, users who use style sheets may end up with a surprisingly unreadable combination.
  • Make sure the keyboard focus indicator has good contrast, too.

Fonts

Test your pages to ensure fonts enlarge properly when the page is zoomed. Enlarge up to 200% and check that all parts of the page enlarge, and that text doesn’t overlap or flow off the page. If you have images of text instead of true text, they may not enlarge properly, so avoid using images of text.

Resources

Web Content Accessibility Guidelines 

Image Description

Color Contrast Tools

 

 

Printable (PDF) Version of Tip Sheet

Developed in conjunction with the National Center for Accessible Media, based at Boston public broadcaster WGBH. NCAM WGBH logo