WebAIM - Web Accessibility In Mind

E-mail List Archives

Suggestion for most accessible solution to lists of links that are shown or hidden with CSS

for

From: Birkir R. Gunnarsson
Date: Apr 1, 2013 7:06AM


Yea wise ones.
Hope you have enjoyed thy Easters to the max!
I have been contemplating a bit of a conundrum for one of my
accessibility evaluation projects.
I have too many solutions and my search so far does not seem to
indicate a standard accessibility implemenation, but this is a common
coding technique.

There is a website I am evaluating.
On the site there is an item (pseudo link I believe).
It says (in Icelandic admittedly):
"Apply for a new ID".

When you hover over it with the mouse (onMouseOver) you get a list of
actual links such as "apply for new ID as a foreigner", "apply because
my ID was lost or stolen" etc. These are all links to different forms
and procedures.
This is implemented by just hiding the options with CSS until the event happens.

If you turn off CSS you see all the items in this list without having
to activate them with the mouse.
The obvious issue with this control is that it is device-dependent and
there is no keyboard support.
It can be made keyboard accessible by adding a TabIndex, setting ARIA
role = "link" or "button" and then implementing the onKeyDown event
handler to accept space or enter.
The question I am contemplating is how best to indicate to non-sighted
users that the item has a submenu.
Is this a prime candidate for HasPopupMenu ARIA attribute, should I
look into aria-expand (all coding examples that I have seen for
aria-expand have to do with trees), should I suggest making this into
a button and using the button-pressed property, or something entirely
different?

Any of these suggestions should work just fine, but given that this is
a fairly common coding technique I am wondering if you guys have more
of a standard recommendation for how best to address this from an
accessibility perspective.
I like consistent recommendations to the extent possible, so I decided
to throw this one out here.
Cheers
-B