{"id":58026,"date":"2023-08-23T17:37:56","date_gmt":"2023-08-23T12:07:56","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=58026"},"modified":"2024-06-10T15:37:41","modified_gmt":"2024-06-10T10:07:41","slug":"part-5-web-accessibility-fixing-checkbox-to-announce-the-checked-unchecked-state-while-using-screen-reader","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/part-5-web-accessibility-fixing-checkbox-to-announce-the-checked-unchecked-state-while-using-screen-reader\/","title":{"rendered":"Part 5 – Web Accessibility: Fixing Checkbox to announce the \u201cchecked\u201d \/ \u201cunchecked\u201d state while using screen reader"},"content":{"rendered":"

This is the third example for the web aria accessibility implementation where we will understand announcing the checkbox label<\/strong> and checkbox checked\/unchecked state<\/strong> correctly on the <\/span>spacebar<\/b> key-down and <\/span>click<\/b>. This is the working solution below on how to make this checkbox announce label and state.<\/span><\/p>\n

\u21d2 Code SNIPPET 3 –<\/b><\/h2>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<style>\r\n* {\r\nbox-sizing: border-box;\r\n}\r\n\r\nul {\r\nlist-style-type: none;\r\npadding: 0;\r\nmargin: 0;\r\n}\r\n\r\nli {\r\nposition: relative;\r\ndisplay: inline-block;\r\n}\r\n\r\n.checkbox-custom {\r\nopacity: 0;\r\nposition: absolute;\r\n}\r\n\r\n.checkbox-custom-label {\r\nposition: relative;\r\ncursor: pointer;\r\ntext-decoration: none;\r\ndisplay: inline-block;\r\nvertical-align: middle;\r\n}\r\n\r\n.checkbox-custom-label::before {\r\ncontent: '';\r\nbackground: #fff;\r\nborder: 1px solid #ddd;\r\nwidth: 20px;\r\nheight: 20px;\r\npadding: 2px;\r\nmargin-right: 10px;\r\nmargin-bottom: 3px;\r\ndisplay: inline-block;\r\nvertical-align: middle;\r\n}\r\n\r\n.checkbox-custom-label:focus {\r\noutline: 5px auto -webkit-focus-ring-color;\r\noutline-offset: -2px;\r\n}\r\n\r\n.checkbox-custom-label[aria-checked=\"true\"]::before {\r\ncontent: '';\r\nbackground: url(.\/assets\/images\/icon-tick.svg) #000 no-repeat;\r\nbackground-position: center;\r\nbackground-size: 13px;\r\ncolor: #fff;\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<header><\/header>\r\n\r\n<main>\r\n<div class=\"container\">\r\n<h2>Checkbox Check and Uncheck status and label announce<\/h2>\r\n\r\n<ul role=\"list\">\r\n<li class=\"filter-checkbox\" role=\"listitem\">\r\n<input tabindex=\"-1\" type=\"checkbox\" id=\"analyst-citations\" autocomplete=\"off\" class=\"checkbox-custom\">\r\n<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>\r\n<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/main>\r\n\r\n<footer><\/footer>\r\n\r\n<script>\r\nfunction changeCheckbox(keyCode) {\r\nconst spacebarKeyCode = 32;\r\nconst item = document.getElementById(\"checkbox-custom-label\");\r\nconst checked = item.getAttribute(\"aria-checked\");\r\n\r\nif (keyCode && keyCode !== spacebarKeyCode) {\r\nreturn;\r\n} else if (checked === \"true\") {\r\nitem.setAttribute(\"aria-checked\", \"false\");\r\n} else {\r\nitem.setAttribute(\"aria-checked\", \"true\");\r\n}\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
Here, on using the NVDA screen reader<\/strong> tool and by using the keyboard navigation TAB key,<\/strong> when you reach the checkbox initially, it will say as – checkbox not checked Analyst citations<\/strong>.<\/p>\n
Here, the screen reader reads out the state of the checkbox as well as the label of the checkbox, which here is Analyst citations.<\/p>\n
Once you press the spacebar key<\/strong> from the keyboard, the tick mark becomes visible inside the checkbox, and it will announce it as – checked; now,<\/strong> if you press this again, it will announce it as – not checked<\/strong>.<\/p>\n
You can see this same thing in action if you use the mouse<\/strong> instead of a keyboard,<\/strong> where it will announce the text on hover, and on clicking the checkbox, it will announce the same state as above.<\/p>\n
\"checkbox<\/p>\n
In the next blog, you will see the last example for implementing web aria accessibility.<\/p>\n
Link to Part 6 – Web Accessibility: Focusing on Visual Representation of navigation links<\/a>.<\/b><\/p>\n
<\/div>","protected":false},"excerpt":{"rendered":"
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. \u21d2 Code SNIPPET 3 – <!DOCTYPE html> <html lang=”en”> […]<\/p>\n","protected":false},"author":1622,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":263,"footnotes":""},"categories":[5868,3429],"tags":[5340,5343,5344,5341,5339],"class_list":["post-58026","post","type-post","status-publish","format-standard","hentry","category-adobe","category-front-end-development","tag-aria-accessibility","tag-implementing-aria-accessibility","tag-screen-reader","tag-web-accessibility","tag-web-development"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t