Question

I'm designing a site where I'd like to use white text on different colored backgrounds. Unfortunately 2 of these backgrounds do not provide enough contrast to be WCAG 2.0 AA compliant.

The text is a "read more" link.

My question is - if the link has a title attribute does this make the text accessible hence WCAG AA complaint?

Further to this there will also be a small chevron image with alt tag enclosed in the tag, does this redundancy work favourably for AA compliancy?

Thanks!

Was it helpful?

Solution

It sounds like you are hitting two issues:

  1. Colour contrast of text on the background.
  2. Not describing links.

Unfortunately title cannot be relied upon to convey information as some users cannot access it (for example people using the keyboard but can see the screen).

There are a few potential adjustments for the contrast issue:

  • Applying an effect on the image (e.g. fading to black) on the section where text is.
  • Applying an effect to the text, for example drop-shadow that increases the contrast.
  • Choosing a different colour for text on the different images.

Otherwise you get into the situation of having to provide a style-switcher or personalisation options for increased contrast (assuming you want to meet WCAG2-AA).

I can't tell for sure the links don't describe their target, as if there is a heading above them that would provide context. However, 'read more' links does ring alarm bells.

If the chevron image has alt-text that is specific to the target page, that would help. For example:

<a href="#"><img src="file.gif" alt="Specific page title ">Read more</a>

NB: As alt text is read like inline text, include a space at the end.

Or if the order is the other way around:

<a href="#">Read more<img src="file.gif" alt=" about specific page title "></a>

Overall, if your box has a heading that describes the target page, I would make that a link and use a script to make the rest of the box clickable. (For example, the central boxes on http://ukwindsurfing.com/ )

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top