{"id":58021,"date":"2023-08-22T13:59:18","date_gmt":"2023-08-22T08:29:18","guid":{"rendered":"https:\/\/2thenew.today\/blog\/?p=58021"},"modified":"2024-06-10T15:37:57","modified_gmt":"2024-06-10T10:07:57","slug":"part-4-web-accessibility-nvda-screen-reader-for-effective-debugging","status":"publish","type":"post","link":"https:\/\/2thenew.today\/blog\/part-4-web-accessibility-nvda-screen-reader-for-effective-debugging\/","title":{"rendered":"Part 4 \u2013 Web Accessibility: NVDA Screen Reader for effective debugging"},"content":{"rendered":"

This is the second example of the web aria accessibility<\/strong> implementation, where we will fix the issues using the NVDA Screen Reader<\/strong>.<\/p>\n

Here, we will get to know whether it will read the webpage or not and check the multiple accessibility errors.<\/span><\/p>\n

You can download this tool from this link – <\/span>https:\/\/www.nvaccess.org\/download\/<\/span><\/a><\/p>\n

\"tool \"tool<\/b><\/p>\n

 <\/p>\n

\u21d2 Code SNIPPET 2 –<\/b><\/p>\n

<!DOCTYPE html>\r\n<html>\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}<\/pre>\n
ul {\r\nlist-style-type: none;\r\npadding: 0;\r\nmargin: 0;\r\n}<\/pre>\n
ul li {\r\nborder: 1px solid #ddd;\r\nmargin-top: -1px; \/* Prevent double borders *\/\r\nbackground-color: #f6f6f6;\r\npadding: 12px;\r\ntext-decoration: none;\r\nfont-size: 18px;\r\ncolor: black;\r\ndisplay: block;\r\nposition: relative;\r\n}<\/pre>\n
ul li:hover {\r\nbackground-color: #eee;\r\n}<\/pre>\n
ul li a {\r\ncolor: inherit;\r\ntext-decoration: unset;\r\n}<\/pre>\n
.close {\r\nposition: absolute;\r\nright: 32px;\r\ntop: 50%;\r\ntransform: translateY(-50%);\r\nwidth: 22px;\r\nheight: 22px;\r\nopacity: 0.3;\r\n}\r\n.close:hover {\r\nopacity: 1;\r\n}\r\n.close:before, .close:after {\r\nposition: absolute;\r\nleft: 10px;\r\ncontent: ' ';\r\nheight: 22px;\r\nwidth: 2px;\r\nbackground-color: #333;\r\n}\r\n.close:before {\r\ntransform: rotate(45deg);\r\n}\r\n.close:after {\r\ntransform: rotate(-45deg);\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>Closable List Items<\/h2>\r\n<p>Click on the \"x\" symbol to the right of the list item to close\/hide it.<\/p>\r\n\r\n<ul>\r\n<li>Adele<span class=\"close\"><\/span><\/li>\r\n<li>Agnes<span class=\"close\"><\/span><\/li>\r\n\r\n<li>Billy<span class=\"close\"><\/span><\/li>\r\n<li>Bob<span class=\"close\"><\/span><\/li>\r\n\r\n<li>Calvin<span class=\"close\"><\/span><\/li>\r\n<li>Christina<span class=\"close\"><\/span><\/li>\r\n<li>Cindy<span class=\"close\"><\/span><\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/main>\r\n\r\n<footer><\/footer>\r\n\r\n<script>\r\nvar closebtns = document.getElementsByClassName(\"close\");\r\nvar i;\r\n\r\nfor (i = 0; i < closebtns.length; i++) {\r\nclosebtns[i].addEventListener(\"click\", function() {\r\nthis.parentElement.style.display = 'none';\r\n});\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
This is the browser view of the above initial code.<\/strong><\/p>\n
\"Initial<\/p>\n
While using the keyboard navigation <\/span>TAB<\/b> key the page will start to navigate, but here the navigation is not coming on both list items<\/em> or the close button<\/em>.<\/span><\/p>\n
Fix 1 –<\/h3>\n
Now, to make it work, these are the required changes for list items<\/em> –\u00a0<\/span><\/p>\n
    \n
  1. Adding <\/span>role<\/b> to <ul> \/ <ol> list.<\/span><\/li>\n
  2. Adding <\/span>role<\/b> to <li><\/span><\/li>\n<\/ol>\n
    <ul role=\"list\">\r\n<li role=\"listitem\">Adele<\/li>\r\n<li role=\"listitem\">Agnes<span class=\"close\"><\/span><\/li>\r\n\r\n<li role=\"listitem\">Billy<span class=\"close\"><\/span><\/li>\r\n<li role=\"listitem\">Bob<span class=\"close\"><\/span><\/li>\r\n\r\n<li role=\"listitem\">Calvin<span class=\"close\"><\/span><\/li>\r\n<li role=\"listitem\">Christina<span class=\"close\"><\/span><\/li>\r\n<li role=\"listitem\">Cindy<\/li>\r\n<\/ul><\/pre>\n
    Here, by adding these, the NVDA screen reader<\/strong> on page refresh will read this as a list<\/strong>.<\/span><\/p>\n
    Fix 2 –<\/h3>\n
    Now to get the focus on the close button and to describe this button, we have to add the following –\u00a0<\/span><\/p>\n
      \n
    1. role<\/b> in describing the HTML tag<\/span><\/li>\n
    2. tabindex<\/b> to get the focus on the close button<\/span><\/li>\n
    3. aria-label<\/b> to describe the button<\/li>\n<\/ol>\n
      Here, the final code will look like this –<\/p>\n
      <ul role=\"list\">\r\n<li role=\"listitem\">Adele<span class=\"close\" tabindex=\"0\" role=\"button\" aria-label=\"close button\" ><\/span><\/li>\r\n<li role=\"listitem\">Agnes<span class=\"close\" tabindex=\"0\" role=\"button\" aria-label=\"close button\" ><\/span><\/li>\r\n\r\n<li role=\"listitem\">Billy<span class=\"close\" tabindex=\"0\" role=\"button\" aria-label=\"close button\" ><\/span><\/li>\r\n<li role=\"listitem\">Bob<span class=\"close\" tabindex=\"0\" role=\"button\" aria-label=\"close button\" ><\/span><\/li>\r\n\r\n<li role=\"listitem\">Calvin<span class=\"close\" tabindex=\"0\" role=\"button\" aria-label=\"close button\" ><\/span><\/li>\r\n<li role=\"listitem\">Christina<span class=\"close\" tabindex=\"0\" role=\"button\" aria-label=\"close button\" ><\/span><\/li>\r\n<li role=\"listitem\">Cindy<span class=\"close\" tabindex=\"0\" role=\"button\" aria-label=\"close button\" ><\/span><\/li>\r\n<\/ul><\/pre>\n
      After adding this, we will get the focus by keyboard navigation, and on page refresh, it will clearly define the close button so that the user gets to know what it really is.<\/span><\/p>\n
      Also, the button is focused on keyboard navigation<\/strong>, which can easily be closed by pressing the <\/span>space<\/b> and <\/span>enter<\/b> buttons.<\/span><\/p>\n
      This is the browser view of the final code.<\/strong><\/p>\n
      \"Final<\/p>\n
      In the next blog, we will look at the checkbox announce state for aria accessibility. There are other implementations in this chain of blogs.<\/p>\n
      Link to Part 5 – Web Accessibility: Fixing Checkbox to announce the \u201cchecked\u201d \/ \u201cunchecked\u201d state while using screen reader<\/b><\/a><\/p>\n
      <\/div>","protected":false},"excerpt":{"rendered":"
      This is the second example of the web aria accessibility implementation, where we will fix the issues using the NVDA Screen Reader. Here, we will get to know whether it will read the webpage or not and check the multiple accessibility errors. You can download this tool from this link – https:\/\/www.nvaccess.org\/download\/   \u21d2 Code […]<\/p>\n","protected":false},"author":1622,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":72,"footnotes":""},"categories":[5868,3429],"tags":[5340,5343,5344,5341,5339],"class_list":["post-58021","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