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