WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: aria-controls breaks CSS?

for

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

From: David Engebretson Jr.
Date: Fri, Apr 05 2019 2:28PM
Subject: aria-controls breaks CSS?
No previous message | Next message →

We've got an accordion that uses aria-controls. Aria-controls seems to
complicate the user experience with JAWS. Other screen readers seem to
ignore them.

If I remove aria-controls it breaks our CSS. Why would aria-controls alter
the CSS?

Has anybody found a positive use for aria-controls?

Thanks!

From: Patrick H. Lauke
Date: Fri, Apr 05 2019 3:59PM
Subject: Re: aria-controls breaks CSS?
← Previous message | Next message →

On 05/04/2019 21:28, David Engebretson Jr. wrote:
[...]
> If I remove aria-controls it breaks our CSS. Why would aria-controls alter
> the CSS?

Probably because your CSS is taking advantage of the aria-controls
attribute in some form of attribute selector, a la

button[aria-controls] { ... }

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: Fri, Apr 05 2019 4:18PM
Subject: Re: aria-controls breaks CSS?
← Previous message | No next message

aria-controls inherently has no effect on CSS, but it is convenient
target for CSS classes since it identifies the element affected by
pressing the button.
I recommend using aria-controls if activating or changing the setting
of an element changes content that is no immediately inline to that
element, e.g. when clicking "add to cart" button updates the total
price (assuming it is on the page and visible) or when checking a
checkbox or selecting a radio button dynamically displays content
further down the page.
And, yes, you are right that support for aria-controls is very
rudamentary so you can't use it as the only means to communicate
information.



On 4/5/19, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
> On 05/04/2019 21:28, David Engebretson Jr. wrote:
> [...]
>> If I remove aria-controls it breaks our CSS. Why would aria-controls
>> alter
>> the CSS?
>
> Probably because your CSS is taking advantage of the aria-controls
> attribute in some form of attribute selector, a la
>
> button[aria-controls] { ... }
>
> 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
> > > > >


--
Work hard. Have fun. Make history.