Top 3 Ways Your Web Page Needs to Comply with ADA Standards

  • August 30, 2019
  • /   Ravin Floyd Nettles
  • /   Accessibility,learningcenter,Websites
African-American woman working on a laptop

DigiPro Media is the industry leader in web accessibility. So, as your expert it is our mission to empower you, to be confident when building your web pages on DigiPaaS.

Here are the top three things to check for on your site:

1. Images must have Alt text

Alternative text (alt-text or alt tags) provides a textual substitute to images in web pages. It is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them. The web has all types of images that have missing, incorrect, or poor alternative text. Like many things in web accessibility, determining appropriate alternative text is often a matter of personal interpretation.

Image elements must have an alt text describing each image.

Here are some examples:

Red crested rooster crowing

Okay alt text: Rooster

Better alt text: Rooster crowing

Best alt-text: Red-crested rooster crowing

man walking on an escalator

Okay alt text: man on escalator

Better alt text: man walking on escalator

Best alt-text: man wearing backpack walking down escalator

2. Links Need Descriptions

Every link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like "click here" and "more" must be avoided. Users should be able to quickly look at each link and tell where it goes and notify if the link is opening a new window.

Here are some examples:

Example 1:

Okay link text: "click here to access today's weather"

Better link text: "today's weather"

Example 2:

Bad link text: “read more”

Okay link text: "read more about global warming

Better link text: "about global warming"

3. Color Contrast

Contrast and color are other important components of accessibility. The contrast is a measure of the difference in the brightness between two colors. For instance, some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.

Here is an example:

screen capture of color contrast checker

An easy way to check the contrast on your web pages is to use an online program, like webaim.

  • Visit an online contrast checker
  • Plug text colors into the foreground and background colors into background fields.
  • If Normal Text passes for AA rating the color contrast is good.
  • If Normal Text does not pass for AA rating the color contrast needs to be edited. Increase in contrast for both until it passes. Please try to keep the colors as close to original colors as possible. See screenshots above.
    • The contrast ratio should be 3.0 or more for 18-point text, or larger
    • The contrast ratio should be 3.0 or more for 14-point bold text, or larger
    • The contrast ratio should be 4.5 or more for all other text

There are several factors which play into checking for web accessibility compliance. These are the top three factors that our accessibility experts check for first when determining if your pages comply with ADA web accessibility standards. For more tips or for clarification on these standards, please feel free to contact your DigiPro Media experts!