Part 5 – Web Accessibility: Fixing Checkbox to announce the “checked” / “unchecked” state while using screen reader
This is the third example for the web aria accessibility implementation where we will understand announcing the checkbox label and checkbox checked/unchecked state correctly on the spacebar key-down and click. This is the working solution below on how to make this checkbox announce label and state.
⇒ Code SNIPPET 3 –
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
position: relative;
display: inline-block;
}
.checkbox-custom {
opacity: 0;
position: absolute;
}
.checkbox-custom-label {
position: relative;
cursor: pointer;
text-decoration: none;
display: inline-block;
vertical-align: middle;
}
.checkbox-custom-label::before {
content: '';
background: #fff;
border: 1px solid #ddd;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
margin-bottom: 3px;
display: inline-block;
vertical-align: middle;
}
.checkbox-custom-label:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.checkbox-custom-label[aria-checked="true"]::before {
content: '';
background: url(./assets/images/icon-tick.svg) #000 no-repeat;
background-position: center;
background-size: 13px;
color: #fff;
}
</style>
</head>
<body>
<header></header>
<main>
<div class="container">
<h2>Checkbox Check and Uncheck status and label announce</h2>
<ul role="list">
<li class="filter-checkbox" role="listitem">
<input tabindex="-1" type="checkbox" id="analyst-citations" autocomplete="off" class="checkbox-custom">
<a tabindex="0" for="analyst-citations" onclick="changeCheckbox()" onkeydown="changeCheckbox(event.keyCode)" role="checkbox" aria-checked="false" aria-label="Analyst citations" class="checkbox-custom-label" id="checkbox-custom-label">Analyst citations</a>
</li>
</ul>
</div>
</main>
<footer></footer>
<script>
function changeCheckbox(keyCode) {
const spacebarKeyCode = 32;
const item = document.getElementById("checkbox-custom-label");
const checked = item.getAttribute("aria-checked");
if (keyCode && keyCode !== spacebarKeyCode) {
return;
} else if (checked === "true") {
item.setAttribute("aria-checked", "false");
} else {
item.setAttribute("aria-checked", "true");
}
}
</script>
</body>
</html>
Here, on using the NVDA screen reader tool and by using the keyboard navigation TAB key, when you reach the checkbox initially, it will say as – checkbox not checked Analyst citations.
Here, the screen reader reads out the state of the checkbox as well as the label of the checkbox, which here is Analyst citations.
Once you press the spacebar key from the keyboard, the tick mark becomes visible inside the checkbox, and it will announce it as – checked; now, if you press this again, it will announce it as – not checked.
You can see this same thing in action if you use the mouse instead of a keyboard, where it will announce the text on hover, and on clicking the checkbox, it will announce the same state as above.
In the next blog, you will see the last example for implementing web aria accessibility.
Link to Part 6 – Web Accessibility: Focusing on Visual Representation of navigation links.
