E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: Chris Siems
Date: Tue, Jul 23 2013 9:58AM
Subject: How to distinguish visual items for screen readers
No previous message | Next message →

Hi WebAIM forum, this is my first post, and I have a question.

What is the best way to distinguish visually highlighted items for
screen readers?

For example, let's say you have 3 items in a list and 2 of them are
visually highlighted and the other 1 is not. I test web pages with NVDA
and I don't think it supports Aural CSS so I can't "hide" items from it.
NVDA reads all 3 items the same. I'd like it to not read the
non-highlighted item.

Thanks,
Chris

--
Chris Siems | Lead Software Application Developer
Product Strategy & Communication | Texas A&M Information Technology

3142 TAMU | College Station, TX 77843-3142
Ph: 979.458.2071

http://it.tamu.edu | Making IT Possible

From: Jared Smith
Date: Tue, Jul 23 2013 11:24AM
Subject: Re: How to distinguish visual items for screen readers
← Previous message | Next message →

Why would you want a screen reader to not read content that is
visually presented to everyone else within the page? If the items are
meant to be hidden, then I'd think it best to hide them from everyone.

But to answer the question, one could use aria-hidden to do this,
though it would (arguably) be a misuse seeing as the content is not
actually hidden. If you're dealing with highlighting of content, then
the <mark> element would be semantically appropriate, though screen
readers do not do anything specific with this. If you're dealing with
content that is stricken from the page, then <del> is correct, though
screen readers don't support this either.

Functionally, perhaps off-screen text ("inactive" or "highlighted
item:" or similar) preceding the list item text might be the best
solution.

Jared Smith
WebAIM

From: Chris Siems
Date: Mon, Jul 29 2013 1:02PM
Subject: Re: How to distinguish visual items for screen readers
← Previous message | No next message

Thanks Jared, I'll look into "mark" and "highlighted item."

I thought of a better example:
Say you want to display the accessibility level of conformance (A, AA,
AAA) on a page that was tested along with the other two levels. Each is
linked to a description of what it takes to achieve that level. The
page's level is highlighted visually somehow - say background color.

My question goes to what's the best way to highlight the "active" item
for a screen reader while allowing the other non-active items?

It would be cool if the screen reader could say, "Link to Level A of the
Web Content Accessibility Guidelines. Link to Level AA of the Web
Content Accessibility Guidelines. This page conforms to Level AAA of the
Web Content Accessibility Guidelines 1.0! Link to Level AAA of the Web
Content Accessibility Guidelines."

I know it's a lot to listen to, but it's complete.

-Chris


On 7/23/2013 12:24 PM, Jared Smith wrote:
> Why would you want a screen reader to not read content that is
> visually presented to everyone else within the page? If the items are
> meant to be hidden, then I'd think it best to hide them from everyone.
>
> But to answer the question, one could use aria-hidden to do this,
> though it would (arguably) be a misuse seeing as the content is not
> actually hidden. If you're dealing with highlighting of content, then
> the <mark> element would be semantically appropriate, though screen
> readers do not do anything specific with this. If you're dealing with
> content that is stricken from the page, then <del> is correct, though
> screen readers don't support this either.
>
> Functionally, perhaps off-screen text ("inactive" or "highlighted
> item:" or similar) preceding the list item text might be the best
> solution.
>
> Jared Smith
> WebAIM
> > > --
Chris Siems | Lead Software Application Developer
Product Strategy & Communication | Texas A&M Information Technology

3142 TAMU | College Station, TX 77843-3142
Ph: 979.458.2071

http://it.tamu.edu | Making IT Possible