WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using ARIA for styling?

for

From: Patrick H. Lauke
Date: Mar 6, 2017 8:13AM

On 06/03/2017 15:05, Preast, Vanessa wrote:
> I'm a novice when it comes to ARIA.
>
> I'd like the menu item for the currently active page to have a
> different appearance within the menu. To kill two birds with one
> stone, I was thinking it would be nice to refer to the ARIA to change
> the appearance of menu items.

That's an excellent idea not only because it saves you having to also
add/remove an extra class for styling, but also because it reduces the
risk that at some point the ARIA stuff breaks but goes unnoticed, since
the visual styling would then also break, thus making it a very visible
apparent problem for all users/testers to spot.

Can I style based on whether the
> ARIA-selected is true or false? If so, what would that css code look
> like?
>
> Here is some HTML code for a menu I'm working with right now for a
> menu: <ul> <li><a href="index.html"
> aria-selected="false">Home</a></li> <li><a href="example1.html"
> aria-selected="false">Another Menu Item</a></li> <li><a
> href="example2.html" aria-selected="true">Current page</a></li>
> </ul>

You'll want to use CSS attribute selectors
https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors ...
something like (scoping this a bit under assumption that that list is in
a nav with id of "menu")

nav#menu ul li a { /* regular/non-selected links */ }
nav#menu ul li a[aria-selected="true"] { /* selected links */ }

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke