WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: hide decorative characters from screen readers

for

From: John Foliot
Date: Aug 12, 2011 6:30PM

James Nurthen wrote:
>
> John, This is how it used to work - but WAI-ARIA introduces the
> following
> into the accessible name calculation (
> http://www.w3.org/TR/wai-aria/roles#textalternativecomputation )
>
> 3. Text nodes are often visited because they are children of an element
> that
> > uses rule 2C to collect text from its children. However, because it
> is
> > possible to specify or alter textual content using CSS rules, it is
> > necessary for user agents to combine such content, as appropriate,
> with the
> > text referenced by the text nodes to produce a complete text
> alternative. An
> > example is the use of CSS :before and :after pseudo-elements, where
> the user
> > agent combines the textual content specified in the style sheet with
> that
> > given in the DOM.
> >
> >
> > - When an image replaces text, then the UA should use the
> original
> > text, since that text is presumably the equivalent.
> > - When text replaces an image, then the UA should provide that
> text.
> > - When new text replaces old, then the UA should include the
> new
> > text, since that is what is rendered on screen.



Keith Parks
>
> > Mine, too, so I had to go to the link for context. This section of
> > the ARIA spec is talking about how to determine alternative text for
> > elements. Rule 2C says to calculate the alternative text by
> > concatenating the text values of an element's children, and this
> > (confusingly written) note says that CSS-generated text content should
> > be added into the mix.
>
> Thanks.
>
> So it would be a better practice to use CSS to add a visual separator
> (vertical line) rather than use CSS to add the vertical bar character?
>
> Is that the take-away from this?


Apparently it is, although I see this as doing as much harm as benefit,
and I don't totally agree with what WAI-ARIA is saying here.

If one were to try to highlight, copy and paste any text inserted with
those selectors that text is "left behind" at 'paste'.

My question is, why are screen readers reading content that is, from the
visual/interactive perspective more similar to background images (via
CSS)?

My thinking is that if text (and other characters) were not voiced that we
could do something like this:

=== code ==
<style>
label:before {
content: "* ";
color:red;
font-weight:bold;
}
</style>
</head>

<body>
<form action="do_something">

<label for="name">Name:</label> <input type="text" name="name" id="name"
required aria-required="true">

</form>

=== end code ==
This would result in a visual output of:

Name* |_________|

...but would read aloud: "Name (as opposed to name-star), input text,
required" (YMMV) which would result in a far superior user experience for
screen reader users IMHO.

What say y'all?