WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: WCAG2 and vertical bars (|)


From: Bourne, Sarah (ITD)
Date: Apr 29, 2015 2:06PM

That would be a failure under 1.3.3 - see F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information (http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/F26 )
" The objective of this technique is to show how using a graphical symbol to convey information can make content difficult to comprehend. A graphical symbol may be an image, an image of text or a pictorial or decorative character symbol (glyph) which imparts information nonverbally. Examples of graphical symbols include an image of a red circle with a line through it, a "smiley" face, or a glyph which represents a check mark, arrow, or other symbol but is not the character with that meaning."

The key part here is the use of a symbol that means something different, for instance, the symbol > means "greater than" not "next".

1.3.3 is level A.

Sarah E. Bourne
Director of IT Accessibility, MassIT
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Tuesday, April 28, 2015 10:57 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] WCAG2 and vertical bars (|)

I don´t thin 1.1.1 applies here .. the only one that mentions ascii art, see H86:
You could go with 2.4.4 or 3.3.2 (link text/labels) and explain that inserting characters for visual effect but without meaning makes the text of link or label of buttons harder to understand for screen reader users.
Propose to use an image with empty alt or a background icon to achieve the same purpose without disrupting screen reader users.
This one is borderline, I would not always call it as a violation of WCAG, though I would usually include it in a best practice recommendation.

On 4/28/15, Lynn Holdsworth < <EMAIL REMOVED> > wrote:
> Hi all,
> Under WCAG2, is there any way to fail techniques that use characters
> for visual effect, such as inserting vertical bars to separate items
> in a menubar, or tacking angle brackets on to "Previous" and "Next"
> links to act as arrows?
> Thanks as always, Lynn
> > > archives at http://webaim.org/discussion/archives
> >

Work hard. Have fun. Make history.