CODEWITHSUNDEEP
javascripthtmlcsswai-aria
learningtech
learningtech

Reputation: 33683

Should I be updating aria-* attributes with JavaScript?

Let's say I have the following HTML code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
    display:none;
}
input:focus + p {
    display:block;
}
</style>
</head>
<body>
<input />
<p aria-hidden="true">This field should not exceed 200 characters.</p>
</body>
</html>

When I put my mouse cursor into the input field, the paragraph appears. However, the paragraph still has the attribute aria-hidden="true" despite being visible.

In terms of web accessibility, should I be introducing JavaScript code that will explicitly toggle the aria-hidden between true or false depending on whether my CSS rules shows or hides the paragraph tag?

I'm trying to wrap my head around how these aria attributes are used, and whether they imply the need of a JavaScript developer to add additional code that alters the HTML mark up in a way that reflects the behaviour described by my CSS.

Upvotes: 1

Views: 372

Answers (1)

slugolicious
slugolicious

Reputation: 17445

Your particular example is a little weird, but in general, yes, javascript should be used to change the value of the aria attributes. Just like you can use JS to change the value of any element attribute.

If you had a custom checkbox such as <span role='checkbox' aria-checked='false'> (*), then you'd need JS to change the value of aria-checked from FALSE to TRUE when the checkbox is selected (and vice versa, of course).

(*) If you have a custom checkbox, you're going to have several other attributes that are not shown here, such as tabindex, mouse and keyboard handlers, etc.

Upvotes: 1

Related Questions