E-mail List Archives
Thread: Using ARIA for styling?
Number of posts in this thread: 6 (In chronological order)
From: Preast, Vanessa
Date: Mon, Mar 06 2017 8:05AM
Subject: Using ARIA for styling?
No previous message | Next message →
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. 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>
Thanks,
Vanessa
From: Jonathan Avila
Date: Mon, Mar 06 2017 8:12AM
Subject: Re: Using ARIA for styling?
← Previous message | Next message →
> I'd like the menu item for the currently active page to have a different appearance within the menu. To kill two birds with
Vanessa, the aria-current<http://w3c.github.io/aria/aria/aria.html#aria-current>; attribute from ARIA 1.1 is the right attribute but the support with assistive technology is very limited at this time. Aria-selected is not the appropriate attribute and is not likely to be seen correct by assistive technology now or in the future.
Jonathan
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
See you at CSUN in March!
The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Preast, Vanessa
Sent: Monday, March 06, 2017 7:05 AM
To: WebAIM Discussion List
Subject: [WebAIM] Using ARIA for styling?
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. 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>
Thanks,
Vanessa
From: Patrick H. Lauke
Date: Mon, Mar 06 2017 8:13AM
Subject: Re: Using ARIA for styling?
← Previous message | Next message →
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
From: Patrick H. Lauke
Date: Mon, Mar 06 2017 8:15AM
Subject: Re: Using ARIA for styling?
← Previous message | Next message →
On 06/03/2017 15:13, Patrick H. Lauke wrote:
[...]
> That's an excellent idea not only because it saves you having to also
> add/remove an extra class for styling,
[...]
and in my haste to reply to the CSS part I actually overlooked the fact
that yes, as Jonathan points out, aria-selected isn't quite what you
want. But the CSS part of my advice remains valid, adapted to the
correct ARIA of course...
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
From: Preast, Vanessa
Date: Mon, Mar 06 2017 8:24AM
Subject: Re: Using ARIA for styling?
← Previous message | Next message →
Thank you to both Jonathan and Patrick!
Best,
Vanessa
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Patrick H. Lauke
Sent: Monday, March 06, 2017 9:16 AM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Using ARIA for styling?
On 06/03/2017 15:13, Patrick H. Lauke wrote:
[...]
> That's an excellent idea not only because it saves you having to also
> add/remove an extra class for styling,
[...]
and in my haste to reply to the CSS part I actually overlooked the fact that yes, as Jonathan points out, aria-selected isn't quite what you want. But the CSS part of my advice remains valid, adapted to the correct ARIA of course...
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
From: Birkir R. Gunnarsson
Date: Mon, Mar 06 2017 9:48AM
Subject: Re: Using ARIA for styling?
← Previous message | No next message
To deal with the problem of aria-current not being well supported yet,
you could add a title element="selected" to the currently selected
link.
<li><a aria-current="true" title="selected" class="selected">Menu item</a></li>
I believe only Jaws 18 has aria-current support yet, bt we should see
that support increase quickly over the next couple of months.
With this bckup, usingaria-current will not degrade the experience of
non-supporting user agents, so you can totally do it.
Again aria-selected is not valid with links, only with radio buttons,
options in a dropdown, tabs or grid cells.
Check the ARIA 1.1 section for aria-selected and see the roles and
inherited roles sections in the table for a list of roles that can be
used with aria-selected.
For any role not litsd there, browsers and assistive technologies are
instructed to ignore the use of aria-selected, and ARIA aware
accessibility testing tools will flag its presence on those elements
as an error.
On 3/6/17, Preast, Vanessa < = EMAIL ADDRESS REMOVED = > wrote:
> Thank you to both Jonathan and Patrick!
>
> Best,
> Vanessa
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Patrick H. Lauke
> Sent: Monday, March 06, 2017 9:16 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: Re: [WebAIM] Using ARIA for styling?
>
> On 06/03/2017 15:13, Patrick H. Lauke wrote:
> [...]
>> That's an excellent idea not only because it saves you having to also
>> add/remove an extra class for styling,
> [...]
>
> and in my haste to reply to the CSS part I actually overlooked the fact that
> yes, as Jonathan points out, aria-selected isn't quite what you want. But
> the CSS part of my advice remains valid, adapted to the correct ARIA of
> course...
>
> 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
> > > http://webaim.org/discussion/archives
> > > > > >
--
Work hard. Have fun. Make history.