E-mail List Archives

Search E-mail List Archives for

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

From: Peter Shikli
Date: Thu, Aug 17 2017 4:14PM
Subject: Linked Text Image Violating WCAG's 1.4.5?l
No previous message | Next message →

Understaing WCAG 2.0, http://www.w3.org/TR/UNDERSTANDING-WCAG20/ states
that unless the use of text in an image is essential to the information
being conveyed, as with text in a logo, text should be used to convey the
information instead of image of text. Specifically, it says that, "If an
author can use text to achieve the same visual effect, he or she should
present the information as text rather than using an image."

In "Examples of Success Criterion 1.4.5", the document discusses
navigation items. It says that the navigational links can have both an icon
and text to describe the target of the links and then describes a CSS
technique for achieving this. I can see WebAIM's menu bar works like this,
as does ours.

The clarification I need is this: Does this mean that an image with text,
such as "About us" linking to an "about us" webpage, must be rendered as
text, not as an image? Common practice is to use an image including the
text "About us" with an alt="About Us" attribute and nest the image in the
link element. Are we to tell all these webmasters that their linked images
with text are WCAG 2.0 violations?

If not, how do we avoid a WCAG 2.0 violation since that is what the above
words seem to say?

From: Ugurcan Kutluoglu
Date: Thu, Aug 17 2017 5:57PM
Subject: Re: Linked Text Image Violating WCAG's 1.4.5?l
← Previous message | Next message →

Hi Peter,

I'm not sure if it is a clear violation, but it certainly is an
accessibility barrier. I don't think it is going to cause any problems for
screen reader users if images have correct text alternatives. However,
bitmap text doesn't play well screen magnifiers due to pixellation. It will
also cause problems in Windows High Contrast mode, especially if you use
transparent PNG's. I'd definitely stay away from bitmap text where
possible, even if you provide a text alternative.

When 1.4.5 was released, there was no reliable way to embed fonts, create
shadows or gradients with CSS. Web developers were doing crazy things with
Flash to display fancy fonts (Remember Cufon? Sifr?) So, read the WCAG
criteria in that context.

Today, CSS can do almost everything the Photoshop's Effect palette can. I
really can't think of any situation that requires the developer to use
raster text anywhere.

Ugi

On Thu, Aug 17, 2017 at 3:14 PM, Peter Shikli < = EMAIL ADDRESS REMOVED = > wrote:

>
> Understaing WCAG 2.0, http://www.w3.org/TR/UNDERSTANDING-WCAG20/ states
> that unless the use of text in an image is essential to the information
> being conveyed, as with text in a logo, text should be used to convey the
> information instead of image of text. Specifically, it says that, "If an
> author can use text to achieve the same visual effect, he or she should
> present the information as text rather than using an image."
>
> In "Examples of Success Criterion 1.4.5", the document discusses
> navigation items. It says that the navigational links can have both an icon
> and text to describe the target of the links and then describes a CSS
> technique for achieving this. I can see WebAIM's menu bar works like this,
> as does ours.
>
> The clarification I need is this: Does this mean that an image with text,
> such as "About us" linking to an "about us" webpage, must be rendered as
> text, not as an image? Common practice is to use an image including the
> text "About us" with an alt="About Us" attribute and nest the image in the
> link element. Are we to tell all these webmasters that their linked images
> with text are WCAG 2.0 violations?
>
> If not, how do we avoid a WCAG 2.0 violation since that is what the above
> words seem to say?
>
>
> > > > >

From: Peter Shikli
Date: Fri, Aug 18 2017 10:24AM
Subject: Re: Linked Text Image Violating WCAG's 1.4.5?l
← Previous message | Next message →

Hi Ugi,

Whereas I do agree that linked text images should be replaced by
CSS-stylized text, the argument raging here is whether we suggest that
or require it for a Level AA rating per WCAG 2.0? We're getting
pushback from web designers, as one should expect, and we need to take a
stand to suggest or to require.

Their argument is that linked text images function just like
type="image" buttons, which WCAG allows. The counterargument is that
the syntax (tags) for buttons are different from images.

Cheers,
Peter


Ugurcan Kutluoglu wrote on 8/17/2017 4:57 PM:
> Hi Peter,
>
> I'm not sure if it is a clear violation, but it certainly is an
> accessibility barrier. I don't think it is going to cause any problems
> for screen reader users if images have correct text alternatives.
> However, bitmap text doesn't play well screen magnifiers due to
> pixellation. It will also cause problems in Windows High Contrast
> mode, especially if you use transparent PNG's. I'd definitely stay
> away from bitmap text where possible, even if you provide a text
> alternative.
>
> When 1.4.5 was released, there was no reliable way to embed fonts,
> create shadows or gradients with CSS. Web developers were doing crazy
> things with Flash to display fancy fonts (Remember Cufon? Sifr?) So,
> read the WCAG criteria in that context.
>
> Today, CSS can do almost everything the Photoshop's Effect palette
> can. I really can't think of any situation that requires the developer
> to use raster text anywhere.
>
> Ugi
>
> On Thu, Aug 17, 2017 at 3:14 PM, Peter Shikli < = EMAIL ADDRESS REMOVED =
> <mailto: = EMAIL ADDRESS REMOVED = >> wrote:
>
>
> Understaing WCAG 2.0, http://www.w3.org/TR/UNDERSTANDING-WCAG20/
> <http://www.w3.org/TR/UNDERSTANDING-WCAG20/>; states
> that unless the use of text in an image is essential to the
> information
> being conveyed, as with text in a logo, text should be used to
> convey the
> information instead of image of text. Specifically, it says that,
> "If an
> author can use text to achieve the same visual effect, he or she
> should
> present the information as text rather than using an image."
>
> In "Examples of Success Criterion 1.4.5", the document discusses
> navigation items. It says that the navigational links can have
> both an icon
> and text to describe the target of the links and then describes a CSS
> technique for achieving this. I can see WebAIM's menu bar works
> like this,
> as does ours.
>
> The clarification I need is this: Does this mean that an image
> with text,
> such as "About us" linking to an "about us" webpage, must be
> rendered as
> text, not as an image? Common practice is to use an image
> including the
> text "About us" with an alt="About Us" attribute and nest the
> image in the
> link element. Are we to tell all these webmasters that their
> linked images
> with text are WCAG 2.0 violations?
>
> If not, how do we avoid a WCAG 2.0 violation since that is what
> the above
> words seem to say?
>
>
> > > > <http://webaim.org/discussion/archives>;
> > <mailto: = EMAIL ADDRESS REMOVED = >
>
>

From: Patrick H. Lauke
Date: Fri, Aug 18 2017 10:37AM
Subject: Re: Linked Text Image Violating WCAG's 1.4.5?l
← Previous message | Next message →

On 18/08/2017 17:24, Peter Shikli wrote:
> Hi Ugi,
>
> Whereas I do agree that linked text images should be replaced by
> CSS-stylized text, the argument raging here is whether we suggest that
> or require it for a Level AA rating per WCAG 2.0?  We're getting
> pushback from web designers, as one should expect, and we need to take a
> stand to suggest or to require.
>
> Their argument is that linked text images function just like
> type="image" buttons, which WCAG allows.  The counterargument is that
> the syntax (tags) for buttons are different from images.

The same rationale would apply to type="image" buttons as well. As in:
those buttons aren't exempt from 1.4.5 either.

Images of text have many disadvantages - ranging from mild annoyance for
some to actual hard-to-overcome problems for others.

The question really is: can the same/very similar look and feel be
achieved using something other than images of text? This can range from
using HTML and CSS, to using SVG, adding web fonts, etc.

If the answer is no, a follow-up question is: is it absolutely essential
that the text be presented in a certain way? For instance, if the text
didn't have a pillow emboss effect with flames shooting up inside the
characters, which can only be done easily in Photoshop, would it still
serve the same function? Or, more realistically: if the text for the
navigation items wasn't in the official company typeface because it's
not available as a web font, would this contravene corporate identity
guidelines?

If the answer is again no, then it's a FAIL of 1.4.5.

That's pretty much the hardline interpretation here of the normative
aspect of this SC. Now, the understanding document for this
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-presentation.html
is a bit weaker (it talks of "should" and "encourage authors"), but the
understanding is informative/non-normative. Going by a strict reading of
the normative SC text only, it's a fairly clear pass/fail situation.

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Guy Hickling
Date: Sat, Aug 19 2017 6:22PM
Subject: Re: Linked Text Image Violating WCAG's 1.4.5?l
← Previous message | No next message

It's like this. A low vision user sets his browser to show text at 300%
(for instance). But the "About" image link on the website you describe
(presumably one of several menu options) is not affected by this browser
setting, so it is displayed at its original size, three times smaller than
the rest of the page content.

So our user has to zoom the content temporarily just to read the About and
other menu links, then zoom back down again to read the new page once they
have clicked the link. And they have to repeat this on any other image
links there may be. Hopefully your web designers will see that is not a
good experience!

Regards,
Guy Hickling