WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: alt text contrast question

for

From: Ben Regis
Date: Sep 27, 2017 2:42AM

Couldn't you just add a class to the image and apply a black background and white text or vice versa to that?

Ben

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Sarah Ferguson
Sent: 26 September 2017 20:38
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] alt text contrast question

one more question from our developer (hopefully the last for a while):

Is there any reason this might be bad practice for accessibility:

adding a copy of the alt text as a child pseudo-element of the image (img::after {content: attr(alt);}) and styling this copy using CSS. The "true" alt text is in the HTML but is not styled. The copy was hidden by the image and would only be seen if images were off. The copy overlaid the alt text itself so with images off, you'd only see the copy. This mechanism allowed for a black background mask behind white text, which would always show up. We did this because with images off, some alt text was not high contrast enough.

thanks