Question

I'm hoping to improve the experience for people using screen readers on a site that has a few menu levels with a lot of links (that might feel endless to people hearing every item).

Is there a way of instructing the screen reader what to say? Other than using a link and the SR reading the text (which in this case wouldn't make much sense). I was thinking something like:

"Further filtering of events can be done in the following sub menu. If you do not wish to do so, please tab through the sub menu to the event listings."

I know this isn't ideal; - at the moment I'm trying to figure out how to allocate focus to an element without javascript/jquery so that the tabbing through isn't necessary - but for future reference (for example if an element needs further explanation that isn't a link with text) this would be good to know.

I already have a Skip Navigation link on the page, but that is for the main menu.

Was it helpful?

Solution

Multiple skip links can be used

You could create a hidden link before the menu that allows you to skip it, if that's what you mean. When a user tabs onto it, they would hear your instruction and by selecting it they could bypass the menu.

More information on the WebAIM site: http://webaim.org/techniques/skipnav/

Highlights:

The idea is simple enough: provide a link at the top of the page which jumps the user down to an anchor or target at the beginning of the main content.

Probably the most accessible method for visually hiding skip links is to hide them off screen, then cause them to be positioned on screen when they receive keyboard focus.

Skip links or other in-page links can also be used to allow users to jump to or jump over page content. For example, the Table of Contents at the top of this page includes in-page links to facilitate navigation to page areas. A "skip" link could also be used to allow the user to quickly bypass confusing or potentially inaccessible content, such as ASCII art, complex tables, etc.

OTHER TIPS

The Open Ajax Alliance Accessibility Examples site might help: http://www.oaa-accessibility.org/example/25/

It is difficult to tell from your description whether this is applicable to your situation. If it is then the example site provides a great amount of implementation guidance for incorporating ARIA into your solution.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top