WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: WCAG2 and vertical bars (|)


From: Cliff Tyllick
Date: Apr 29, 2015 2:15PM

Lynn, although Sarah is right, there is a way to achieve the same visual effect without failing to conform with WCAG.

In the CSS, establish style for a list in which the items are displayed inline and the vertical line is used as the bullet character for all but the first item.

Sorry I can't give specifics right now, but that is the valid approach. The <ul> and <li> elements programmatically provide the semantic structure that this visual presentation is intended to convey.

Cliff Tyllick
Accessibility Specialist
Texas Department of Assistive and Rehabilitative Services

Sent from my iPhone
Although its spellcheck often saves me, all goofs in sent messages are its fault.

> On Apr 29, 2015, at 3:06 PM, Bourne, Sarah (ITD) < <EMAIL REMOVED> > wrote:
> 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.
> sb
> Sarah E. Bourne
> Director of IT Accessibility, MassIT
> Commonwealth of Massachusetts
> 1 Ashburton Pl. rm 1601 Boston MA 02108
> 617-626-4502
> http://www.mass.gov/MassIT
> -----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 (|)
> Lynn
> I don´t thin 1.1.1 applies here .. the only one that mentions ascii art, see H86:
> http://www.w3.org/TR/WCAG20-TECHS/H86.html
> 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.
> > > > > > >