E-mail List Archives
Thread: WCAG2 and vertical bars (|)
Number of posts in this thread: 9 (In chronological order)
From: Lynn Holdsworth
Date: Tue, Apr 28 2015 8:51AM
Subject: WCAG2 and vertical bars (|)
No previous message | Next message →
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
From: Birkir R. Gunnarsson
Date: Tue, Apr 28 2015 8:57AM
Subject: Re: WCAG2 and vertical bars (|)
← Previous message | Next message →
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 ADDRESS 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
> > > > >
--
Work hard. Have fun. Make history.
From: Bourne, Sarah (ITD)
Date: Wed, Apr 29 2015 2:06PM
Subject: Re: WCAG2 and vertical bars (|)
← Previous message | Next message →
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 ADDRESS REMOVED =
http://www.mass.gov/MassIT
From: Birkir R. Gunnarsson
Date: Wed, Apr 29 2015 2:10PM
Subject: Re: WCAG2 and vertical bars (|)
← Previous message | Next message →
Hey guys
My understanding of the original post was that the symbol was being
used along with the word .. think
<code>
<a href="go back script"><<span>Back</span></a>
</code>
the lt is the less than symbol.
So this way the symbol alone is not being used to communicate the
purpose of the link or button, it is being used as a visual reference
for label already there, to enhance it for sighted users.
It can annoy a screen reader user when that user hears the symbol
being pronounced by screen reader, but it can happen.
I see this a lot when content is used in CSS: before classes.
Again, Sarah might be right here, and I was wrong on this.
-B
On 4/29/15, Bourne, Sarah (ITD) < = EMAIL ADDRESS 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 ADDRESS REMOVED =
> http://www.mass.gov/MassIT
>
>
>
From: Cliff Tyllick
Date: Wed, Apr 29 2015 2:15PM
Subject: Re: WCAG2 and vertical bars (|)
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> http://www.mass.gov/MassIT
>
>
>
From: Bourne, Sarah (ITD)
Date: Wed, Apr 29 2015 2:56PM
Subject: Re: WCAG2 and vertical bars (|)
← Previous message | Next message →
I would think you could use the symbol visually if it's not read out as text, with its potentially confusing real meaning, such as using the vertical bar as a bullet. That's how I would do it. The W3C, however, doesn't give any "Sufficient Techniques", so we're on our own here. On the F26 Failure Criteria I cited earlier, they give a "Related Technique" of " H37: Using alt attributes on img elements". I think they are implying that you could also use an image with alt text, which is what I would consider for forward/back buttons, for instance.
sb
Sarah E. Bourne
Director of IT Accessibility, MassIT
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
= EMAIL ADDRESS REMOVED =
http://www.mass.gov/MassIT
From: Steve Faulkner
Date: Wed, Apr 29 2015 3:04PM
Subject: Re: WCAG2 and vertical bars (|)
← Previous message | Next message →
another technique
<span aria-hidden="true"> < </span>
--
Regards
SteveF
HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>;
On 29 April 2015 at 21:56, Bourne, Sarah (ITD) < = EMAIL ADDRESS REMOVED = >
wrote:
> I would think you could use the symbol visually if it's not read out as
> text, with its potentially confusing real meaning, such as using the
> vertical bar as a bullet. That's how I would do it. The W3C, however,
> doesn't give any "Sufficient Techniques", so we're on our own here. On the
> F26 Failure Criteria I cited earlier, they give a "Related Technique" of "
> H37: Using alt attributes on img elements". I think they are implying that
> you could also use an image with alt text, which is what I would consider
> for forward/back buttons, for instance.
>
> sb
> Sarah E. Bourne
> Director of IT Accessibility, MassIT
> Commonwealth of Massachusetts
> 1 Ashburton Pl. rm 1601 Boston MA 02108
> 617-626-4502
> = EMAIL ADDRESS REMOVED =
> http://www.mass.gov/MassIT
>
>
> > > > >
From: Jonathan Avila
Date: Wed, Apr 29 2015 7:02PM
Subject: Re: WCAG2 and vertical bars (|)
← Previous message | Next message →
> F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information
It seems odd that this failure is listed under SC 1.3.3 because 1.3.3 appears to apply to instructions only. I would think this could fall under SC 1.1.1 Non-text Content as well. Not all uses of sensory information are instructions either although a button's label could be considered instructions I suppose
Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
Jonathan
--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
From: Andrew Kirkpatrick
Date: Thu, Apr 30 2015 6:03AM
Subject: Re: WCAG2 and vertical bars (|)
← Previous message | No next message
Jon,
I was just looking at this also. I think that we need to update F26. The example strikes me as a 1.1.1 example, and the test procedure doesn't match up with the example either.
The example says " A shopping cart uses two simple glyphs to indicate"
The test procedure says " Examine the page for non-text marks that convey information."
Even the procedure says " 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." which is at odds with the procedure.
So in short, I agree that this needs a look.
AWK