WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: WCAG2 and vertical bars (|)

for

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
<EMAIL REMOVED>

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
> <EMAIL REMOVED>
> 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.
> > > > > > >