CODEWITHSUNDEEP
javascriptwai-aria
ethankr
ethankr

Reputation: 157

Adding WAI-ARIA attributes with JS

At work I have been optimizing one of the sites I have helped developed for one of our clients (I can't say who) for be ADA compliant using WAI-ARIA attributes. I've been wondering if it wouldn't just be easier to create a small JS library that does things like add "role=button" to anchors I've styled to look like a button, add "tabindex=0" to elements I want to be "tabable" etc.

I was wondering if it is a good practice to add in WAI-ARIA attributes with JS or is that frowned upon. Some accessibility evaluation tools won't run the page's JS when evaluating it so it will think these are pain points when they are really not.

Upvotes: 1

Views: 1218

Answers (2)

aardrian
aardrian

Reputation: 9019

I think in the interests of progressive enhancement, it might be best to put all your ARIA inline and not rely on script to add it.

If there are other script errors, if the connection gets dropped, if there is a blocking script in the way, etc., then your library may not come into play and your efforts at remediation will be lost.

I'd also like to build on what Steve said above about using role=button on a link. Especially when you consider that a visual style (to make a link look like a button) is meaningless to a screen reader use (for whom many ARIA roles benefit). I addressed other keyboard interaction gotchas in more detail in another SO answer, but here is one to consider when you try to turn a link into a button:

A hyperlink (<a href>) can be fired by pressing the enter key. But a true <button> can be fired by pressing the enter key or the space bar. When a hyperlink has focus and the user presses the space bar, the page will scroll one screenful. Users of some assistive technology will expect behavior based on the element used.

Also, I caution against putting a tabindex=0 an an element you want to be tabbable unless it is an interactive element. For example, do not put it on a heading (<h#>) just so someone can tab to it as screen readers (for example) already allow navigation by headings.

Upvotes: 0

Steve Faulkner
Steve Faulkner

Reputation: 2630

this may be helpful Add ARIA inline or via script? Also note that if you use role=button it needs to act like a button (i.e. provide appropriate keyboard interaction behaviour)

Upvotes: 1

Related Questions