CODEWITHSUNDEEP
javascriptjqueryaccessibilitywai-aria
Smithy
Smithy

Reputation: 791

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

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" );

Upvotes: 2

Views: 5337

Answers (3)

unobf
unobf

Reputation: 7244

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.

Upvotes: 9

Balachandran
Balachandran

Reputation: 9637

use hidden() selector to identify all display none element 

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

DEMO

Upvotes: 5

suvroc
suvroc

Reputation: 3062

EDIT:

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

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

Upvotes: 0

Related Questions