Web Design 2 min

WCAG Compliance Tips

Posted by Jess Gordon

As digital marketers prepare for the new guidelines (WCAG 2.1) here are some tips to keep in mind when designing for handicap and disability accessibility:

– Be mindful that for people using devices like a screen reader, scrolling is difficult and annoying.
– Make sure you’re using a large enough size for body copy.
– Don’t use only color to indicate a form error.
– Don’t hide links or action items under hover states.
– Higher contrast between background color and type colors makes it easier to read for all users, but especially for those with vision problems.

Scheduled to be finalized sometime later in 2018 is an addendum to the Web Content Accessibility Guidelines 2.0, which is a set of guidelines designed by the World Wide Web Consortium (W3C).  As digital marketers prepare for the new guidelines (WCAG 2.1) here are some tips to keep in mind when designing for handicap and disability accessibility.

Be mindful that for people using devices like a screen reader, scrolling is difficult and annoying.

Try to keep your web pages shorter in length to prevent the need for an excessive amount of scrolling.

Make sure you’re using a large enough size for body copy.

Yes, people can always make it bigger themselves, but designing the type at comfortable size right off the bat will help all users read the content easier.

Don’t use only color to indicate a form error.

For people with colorblindness or other vision issues, simply changing the outline color of a form field may not be noticed. Try pairing that with an icon and a short description of the problem to help them correct the error. Mint.com does a good job of this by bolding the text box, turning the field text red, and adding an x and error message copy (also in a bold red).

Don’t hide links or action items under hover states.

This can make it hard for users with cognitive disabilities or using screen readers to find what they’re looking for. Hover states may look cool, but they can also be pain to naviagate. Make sure your links and action items clearly stand out as clickable items to avoid accessability issues. Notice if the gif below only once a user hovers over that icon, do those three links/action items appear. People don’t even know there are additional action items unless they happen to hover over the icon, which isn’t ever a good thing.

Higher contrast between background color and type colors makes it easier to read for all users, but especially for those with vision problems.

There are several free tools out there that test if your color palette is up to WCAG standards. For now, if you are looking to comply to level AA with WCAG 2.0, you will need to make sure the following are all true of your site:

  • 5:1 contrast between the non-link text color and the background.
  • 5:1 contrast between the link text color and the background.
  • 3:1 contrast between the link text color and the surrounding non-link text color.

If you are unsure if your site is currently compliant, take advantage of a free compliance audit provided by Oneupweb.

 

Subscribe to our blog