WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Text over images

for

Number of posts in this thread: 5 (In chronological order)

From: Judith.A.Blankman@wellsfargo.com
Date: Wed, Jul 29 2015 1:43PM
Subject: Text over images
No previous message | Next message →

I’m seeing a design direction that concerns me where HTML text is laid over a translucent field of color that is layered over an image.

The text is usually white over a darker background. Sometimes it’s simply the busy-ness of the two together that presents a cognitive challenge, a reading/focus conflict between the image and the text where neither is sufficiently distinct.

Our target is AA compliance. Sometimes I can use color contrast as an argument not to do this, darkening the translucent field to achieve better contrast. We can strive for the AAA requirement "1.4.8 Visual Presentation" but I don’t have a “stick" I can use to get that done. I only have a “carrot” where I try to explain the challenge for folks with cognitive issues, attention deficit, universal design principles, etc.

I also try something like “which do you want your audience to read – the text or the image?” In the current applications that I’m seeing, both means neither are readable.

Is this a battle I should be waging? If yes, suggestions? If no, why?


Thanks,


Judith Blankman

Accessibility Strategist
Customer Experience (CX)
WFVC Digital | 1 Front Street | San Francisco, CA 94111
Tel: 415-947-6583 | Cell: 415-601-1114

MAC: A0195-171



j<mailto: = EMAIL ADDRESS REMOVED = > = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >

From: _mallory
Date: Thu, Jul 30 2015 2:44AM
Subject: Re: Text over images
← Previous message | Next message →

I'm seeing this too, and am losing the battle with the graphic
designer on our own website. Pretty much nothing is readable.

For more level heads, you might be able to offer both: I'll bet it's
not much more than a few lines of code to offer users a button where
they can replace the images with solid background colours.

Or, behind most images ought to be a solid colour, so the images can
get a class making them display: none.

This way it's easy for developers to fix, it gives at least the
possibility of control to users, and lets the graphics-people
have their unreadable-but-hip-looking cake.

So not so much of a "you can't do this because it defeats the whole
purpose of the website!" but a "This is a problem but here's a
possible fix that shouldn't cost devs much time." Maybe even make
the button sticky to the side of the page like some sites do with
social media buttons.
_mallory

On Wed, Jul 29, 2015 at 07:43:36PM +0000, = EMAIL ADDRESS REMOVED = wrote:
> I’m seeing a design direction that concerns me where HTML text is laid over a translucent field of color that is layered over an image.
>
> The text is usually white over a darker background. Sometimes it’s simply the busy-ness of the two together that presents a cognitive challenge, a reading/focus conflict between the image and the text where neither is sufficiently distinct.
>
> Our target is AA compliance. Sometimes I can use color contrast as an argument not to do this, darkening the translucent field to achieve better contrast. We can strive for the AAA requirement "1.4.8 Visual Presentation" but I don’t have a “stick" I can use to get that done. I only have a “carrot” where I try to explain the challenge for folks with cognitive issues, attention deficit, universal design principles, etc.
>
> I also try something like “which do you want your audience to read – the text or the image?” In the current applications that I’m seeing, both means neither are readable.
>
> Is this a battle I should be waging? If yes, suggestions? If no, why?
>
>
> Thanks,
>
>
> Judith Blankman
>
> Accessibility Strategist
> Customer Experience (CX)
> WFVC Digital | 1 Front Street | San Francisco, CA 94111
> Tel: 415-947-6583 | Cell: 415-601-1114
>
> MAC: A0195-171
>
>
>
> j<mailto: = EMAIL ADDRESS REMOVED = > = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> > > >

From: John E Brandt
Date: Fri, Jul 31 2015 10:11AM
Subject: Re: Text over images
← Previous message | Next message →

@mallory - ditto "losing the battle" - this and low contrast are my pet peeves. What's with all the gray!
http://jebswebs.net/blog/2013/07/whats-with-all-the-gray/

~j

John E. Brandt
jebswebs: accessible and universal web design,
development and consultation
= EMAIL ADDRESS REMOVED =
207-622-7937
Augusta, Maine, USA

@jebswebs
www.jebswebs.com


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of _mallory
Sent: Thursday, July 30, 2015 4:44 AM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Text over images

I'm seeing this too, and am losing the battle with the graphic designer on our own website. Pretty much nothing is readable.

For more level heads, you might be able to offer both: I'll bet it's not much more than a few lines of code to offer users a button where they can replace the images with solid background colours.

Or, behind most images ought to be a solid colour, so the images can get a class making them display: none.

This way it's easy for developers to fix, it gives at least the possibility of control to users, and lets the graphics-people have their unreadable-but-hip-looking cake.

So not so much of a "you can't do this because it defeats the whole purpose of the website!" but a "This is a problem but here's a possible fix that shouldn't cost devs much time." Maybe even make the button sticky to the side of the page like some sites do with social media buttons.
_mallory

On Wed, Jul 29, 2015 at 07:43:36PM +0000, = EMAIL ADDRESS REMOVED = wrote:
> I’m seeing a design direction that concerns me where HTML text is laid over a translucent field of color that is layered over an image.
>
> The text is usually white over a darker background. Sometimes it’s simply the busy-ness of the two together that presents a cognitive challenge, a reading/focus conflict between the image and the text where neither is sufficiently distinct.
>
> Our target is AA compliance. Sometimes I can use color contrast as an argument not to do this, darkening the translucent field to achieve better contrast. We can strive for the AAA requirement "1.4.8 Visual Presentation" but I don’t have a “stick" I can use to get that done. I only have a “carrot” where I try to explain the challenge for folks with cognitive issues, attention deficit, universal design principles, etc.
>
> I also try something like “which do you want your audience to read – the text or the image?” In the current applications that I’m seeing, both means neither are readable.
>
> Is this a battle I should be waging? If yes, suggestions? If no, why?
>
>
> Thanks,
>
>
> Judith Blankman
>
> Accessibility Strategist
> Customer Experience (CX)
> WFVC Digital | 1 Front Street | San Francisco, CA 94111
> Tel: 415-947-6583 | Cell: 415-601-1114
>
> MAC: A0195-171
>
>
>
> j<mailto: = EMAIL ADDRESS REMOVED = >udith.a.blankman@wellsfargo.
> com<mailto: = EMAIL ADDRESS REMOVED = >
> > > archives at http://webaim.org/discussion/archives
>

From: Chaals McCathie Nevile
Date: Tue, Aug 04 2015 9:46PM
Subject: Re: Text over images
← Previous message | Next message →

Yes, you should be fighting these battles.

Whatever WCAG says, the point is that they make things disappear by being
illegible.

Some stuff is just common sense, and doesn't need a WCAG checkpoint, like
"don't hide everything by making it too small to see". Hmmm. Which
demonstrates why WCAG should be updated not to rely on common sense :(

cheers

On Fri, 31 Jul 2015 12:11:36 -0400, John E Brandt < = EMAIL ADDRESS REMOVED = > wrote:

> @mallory - ditto "losing the battle" - this and low contrast are my pet
> peeves. What's with all the gray!
> http://jebswebs.net/blog/2013/07/whats-with-all-the-gray/
>
> ~j
>
> John E. Brandt
> jebswebs: accessible and universal web design,
> development and consultation
> = EMAIL ADDRESS REMOVED =
> 207-622-7937
> Augusta, Maine, USA
>
> @jebswebs
> www.jebswebs.com
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of _mallory
> Sent: Thursday, July 30, 2015 4:44 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: Re: [WebAIM] Text over images
>
> I'm seeing this too, and am losing the battle with the graphic designer
> on our own website. Pretty much nothing is readable.
>
> For more level heads, you might be able to offer both: I'll bet it's not
> much more than a few lines of code to offer users a button where they
> can replace the images with solid background colours.
>
> Or, behind most images ought to be a solid colour, so the images can get
> a class making them display: none.
>
> This way it's easy for developers to fix, it gives at least the
> possibility of control to users, and lets the graphics-people have their
> unreadable-but-hip-looking cake.
>
> So not so much of a "you can't do this because it defeats the whole
> purpose of the website!" but a "This is a problem but here's a possible
> fix that shouldn't cost devs much time." Maybe even make the button
> sticky to the side of the page like some sites do with social media
> buttons.
> _mallory
>
> On Wed, Jul 29, 2015 at 07:43:36PM +0000,
> = EMAIL ADDRESS REMOVED = wrote:
>> I’m seeing a design direction that concerns me where HTML text is laid
>> over a translucent field of color that is layered over an image.
>>
>> The text is usually white over a darker background. Sometimes it’s
>> simply the busy-ness of the two together that presents a cognitive
>> challenge, a reading/focus conflict between the image and the text
>> where neither is sufficiently distinct.
>>
>> Our target is AA compliance. Sometimes I can use color contrast as an
>> argument not to do this, darkening the translucent field to achieve
>> better contrast. We can strive for the AAA requirement "1.4.8 Visual
>> Presentation" but I don’t have a “stick" I can use to get that done. I
>> only have a “carrot” where I try to explain the challenge for folks
>> with cognitive issues, attention deficit, universal design principles,
>> etc.
>>
>> I also try something like “which do you want your audience to read –
>> the text or the image?” In the current applications that I’m seeing,
>> both means neither are readable.
>>
>> Is this a battle I should be waging? If yes, suggestions? If no, why?
>>
>>
>> Thanks,
>>
>>
>> Judith Blankman
>>
>> Accessibility Strategist
>> Customer Experience (CX)
>> WFVC Digital | 1 Front Street | San Francisco, CA 94111
>> Tel: 415-947-6583 | Cell: 415-601-1114
>>
>> MAC: A0195-171
>>
>>
>>
>> j<mailto: = EMAIL ADDRESS REMOVED = >udith.a.blankman@wellsfargo.
>> com<mailto: = EMAIL ADDRESS REMOVED = >
>> >> >> archives at http://webaim.org/discussion/archives
>> > > > at http://webaim.org/discussion/archives
> >
> > > > --
Charles McCathie Nevile - web standards - CTO Office, Yandex
= EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com

From: Judith.A.Blankman@wellsfargo.com
Date: Wed, Aug 05 2015 12:05PM
Subject: Re: Text over images
← Previous message | No next message

Thanks for confirming my position, will keep on keeping on (the
perpetrators, to get them to stop).

On 8/4/15, 8:46 PM, "WebAIM-Forum on behalf of Chaals McCathie Nevile"
< = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = >
wrote:

>Yes, you should be fighting these battles.
>
>Whatever WCAG says, the point is that they make things disappear by being
>
>illegible.
>
>Some stuff is just common sense, and doesn't need a WCAG checkpoint, like
>
>"don't hide everything by making it too small to see". Hmmm. Which
>demonstrates why WCAG should be updated not to rely on common sense :(
>
>cheers
>
>On Fri, 31 Jul 2015 12:11:36 -0400, John E Brandt < = EMAIL ADDRESS REMOVED = >
>wrote:
>
>> @mallory - ditto "losing the battle" - this and low contrast are my
>>pet
>> peeves. What's with all the gray!
>> http://jebswebs.net/blog/2013/07/whats-with-all-the-gray/
>>
>> ~j
>>
>> John E. Brandt
>> jebswebs: accessible and universal web design,
>> development and consultation
>> = EMAIL ADDRESS REMOVED =
>> 207-622-7937
>> Augusta, Maine, USA
>>
>> @jebswebs
>> www.jebswebs.com
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf Of _mallory
>> Sent: Thursday, July 30, 2015 4:44 AM
>> To: = EMAIL ADDRESS REMOVED =
>> Subject: Re: [WebAIM] Text over images
>>
>> I'm seeing this too, and am losing the battle with the graphic designer
>>
>> on our own website. Pretty much nothing is readable.
>>
>> For more level heads, you might be able to offer both: I'll bet it's
>>not
>> much more than a few lines of code to offer users a button where they
>> can replace the images with solid background colours.
>>
>> Or, behind most images ought to be a solid colour, so the images can
>>get
>> a class making them display: none.
>>
>> This way it's easy for developers to fix, it gives at least the
>> possibility of control to users, and lets the graphics-people have
>>their
>> unreadable-but-hip-looking cake.
>>
>> So not so much of a "you can't do this because it defeats the whole
>> purpose of the website!" but a "This is a problem but here's a possible
>>
>> fix that shouldn't cost devs much time." Maybe even make the button
>> sticky to the side of the page like some sites do with social media
>> buttons.
>> _mallory
>>
>> On Wed, Jul 29, 2015 at 07:43:36PM +0000,
>> = EMAIL ADDRESS REMOVED = wrote:
>>> I¹m seeing a design direction that concerns me where HTML text is laid
>>>
>>> over a translucent field of color that is layered over an image.
>>>
>>> The text is usually white over a darker background. Sometimes it¹s
>>> simply the busy-ness of the two together that presents a cognitive
>>> challenge, a reading/focus conflict between the image and the text
>>> where neither is sufficiently distinct.
>>>
>>> Our target is AA compliance. Sometimes I can use color contrast as an
>>> argument not to do this, darkening the translucent field to achieve
>>> better contrast. We can strive for the AAA requirement "1.4.8 Visual
>>>
>>> Presentation" but I don¹t have a ³stick" I can use to get that done. I
>>>
>>> only have a ³carrot² where I try to explain the challenge for folks
>>> with cognitive issues, attention deficit, universal design principles,
>>>
>>> etc.
>>>
>>> I also try something like ³which do you want your audience to read ­
>>> the text or the image?² In the current applications that I¹m seeing,
>>> both means neither are readable.
>>>
>>> Is this a battle I should be waging? If yes, suggestions? If no, why?
>>>
>>>
>>> Thanks,
>>>
>>>
>>> Judith Blankman
>>>
>>> Accessibility Strategist
>>> Customer Experience (CX)
>>> WFVC Digital | 1 Front Street | San Francisco, CA 94111
>>> Tel: 415-947-6583 | Cell: 415-601-1114
>>>
>>> MAC: A0195-171
>>>
>>>
>>>
>>> j<mailto: = EMAIL ADDRESS REMOVED = >udith.a.blankman@wellsfargo.
>>> com<mailto: = EMAIL ADDRESS REMOVED = >
>>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >> >> >>archives
>> at http://webaim.org/discussion/archives
>> >>
>> >> >> >> >
>
>--
>Charles McCathie Nevile - web standards - CTO Office, Yandex
> = EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com
>>>>