WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: hide decorative characters from screen readers

for

From: Yves Serrano
Date: Aug 15, 2011 4:33AM

Hi

thanks for all the feedback.

> Vincent Young wrote:
> both users or just hides content from visual users. I believe the
> solution is to use role="presentation"
> ...
> Use an in-line image that is a bit larger than what you need and has empty
> alt (alt=""). Then, incorporate some progressive techniques that allow
> the image to scale.

I think I will go with a <li> background image which was my first idea, it's the easiest to implement.
I would have preferred a scalable solution, to have a more general purpose technique for this problem,
but the "old" layout where I need it doesn't scale. Otherwise I would use the separate Images like suggest with progressive techniques.
I was curious if there was a more elegant/simpler solution than that.
Perhaps when SVG inline is supported by the most common browsers I could use that.
The role="presentation" would be the thing I was looking for but it doesn't seem to be implemented in JAWS (is it implemented in others?),
but it's good to know for the future.

I only want to hide the decorative character in a list, I think there it makes sense.
For non list links I agree that it makes sense to have the spoken separator.

It also right that this is not one of the most important things to do when you make a website accessible.
So resources spent in a complicated solution for this, should be better spent in other parts of the webpage :-).

The behavior of the browsers is very different with pseudo elements and copy&paste.
You can't select the text directly in the Browsers IE9, FF5, Safari5.
You can multiline select the text in Safari and IE9, but not in Firefox.
IE9 even copies it, Safari not. Firefox is the most consistence does't selects (direct & multiline) it and doesn't copies it.

> Jason Kiss wrote:
> ...
> Personally, I was happy thinking of CSS as being just for presentation
> and style, and not also the creation of actual content.
I overall argue with that.
One use case I found a bit against this, is with a responsive table approach.
See http://css-tricks.com/9096-responsive-data-tables/ here the table header content is replicated, to make it more accessible to small screens.
But this is only an edge case.

regards Yves