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

Answer 1

use hidden() selector to identify all display none element

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

DEMO

Answer 2

EDIT:

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

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

Answer 3

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.