Should I be updating aria-* attributes with JavaScript?
Question
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.
1 answers
solution1
1 2018-03-13 22:26:21
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.