Find all display:none attributes and add in aria-hidden attribute using JavaScript

Question

Is there a way to search for all the instances where property display:none is used and add the attribute aria-hidden="true" using JavaScript.

My site has hundreds of instances of this and i am looking for a quicker way.

Could it be something like this: (added to a function)

$(*).css( "display", "none" ).attr( "aria-hidden", "true" );

http://stackoverflow.com/questions/1220834/select-all-elements-that-have-a-specific-css-using-jquery — Shekhar Joshi, Jun 12 '15 at 14:30
`$('*').filter(function(){ return $(this).css('display').toLowerCase().indexOf('none') > -1 }).attr("aria-hidden", "true");` — Shekhar Joshi, Jun 12 '15 at 14:35

score 9 · Answer 1 · answered Jun 13 '15 at 11:32

9

The effect of aria-hidden="true" is to instruct the browser to not expose the element to the accessibility tree even if it is not hidden.

The browsers do not expose any elements to the accessibility API that are display:none.

So what you are trying to do is totally redundant. It will have absolutely zero additional affect on accessibility. Save yourself the effort and do something more productive.

answered Jun 13 '15 at 11:32

unobf

7,158
1
23
36

Screen reader still reads out content that has the display:none attribute so the aria-hidden is in fact required – Smithy Jun 13 '15 at 14:43
1

@RAS that is absolute poppycock – unobf Jun 13 '15 at 23:59
2

@RAS here is a reference to one of the specs that talks about when content should not be exposed to the accessibility tree http://www.w3.org/TR/core-aam-1.1/#h-exclude_elements2 – unobf Jun 14 '15 at 00:09
1

@Tin Both `display: none` and `visibility: hidden` aren't exposed by SR. Other declarations may or may not depending on SR (`opacity:0`, etc) but those 2 ones are perfectly safe to use – FelipeAls Jun 22 '15 at 14:52

Balachandran · Accepted Answer · 2015-06-12T14:40:07.987

5

use hidden() selector to identify all display none element

$( ":hidden").attr( "aria-hidden", "true" );

DEMO

edited Jun 12 '15 at 14:40

answered Jun 12 '15 at 14:30

Balachandran

9,567
1
16
26

suvroc · Answer 3 · 2015-06-12T14:31:49.423

0

EDIT:

You can use filter, but it is not optimal solution:

$("*").filter(function() { return $(this).css("display") == "none" })

edited Jun 12 '15 at 14:31

answered Jun 12 '15 at 14:28

suvroc

3,058
1
15
29

1

He's looking to add the ARIA, not detect it. – Evan Knowles Jun 12 '15 at 14:28

Find all display:none attributes and add in aria-hidden attribute using JavaScript

3 Answers3