{"id":58014,"date":"2023-08-21T13:56:23","date_gmt":"2023-08-21T08:26:23","guid":{"rendered":"https:\/\/2thenew.today\/blog\/?p=58014"},"modified":"2024-06-10T15:36:08","modified_gmt":"2024-06-10T10:06:08","slug":"part-3-web-accessibility-practical-approaches-to-implement-accessibility-using-axe-tool","status":"publish","type":"post","link":"https:\/\/2thenew.today\/blog\/part-3-web-accessibility-practical-approaches-to-implement-accessibility-using-axe-tool\/","title":{"rendered":"Part 3 \u2013 Web Accessibility: Practical Approaches to Implement accessibility using Axe tool"},"content":{"rendered":"

This is the first example for the web aria accessibility implementation, where we will understand how this Axe Tool works and look at how we can fix these issues.
\n<\/span><\/p>\n

You can read more about the accessibility implementation from the <\/span>mdn web docs<\/span><\/a>. But by Installing this Axe Accessibility Linter plugin on the Visual Studio Code, the application will start itself after some time and will show the error messages on the HTML code if there are any, and can implement the accessibility by this tool’s suggestions.<\/span><\/p>\n

\"Visual<\/p>\n

\u21d2 Code SNIPPET 1 –<\/b><\/h2>\n
<!<\/span>DOCTYPE<\/span> html<\/span>><\/span>\r\n<<\/span>html<\/span> lang<\/span>=<\/span>\"en\"<\/span>><\/span>\r\n<<\/span>head<\/span>><\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span><<\/span>meta<\/span> charset<\/span>=<\/span>\"UTF-8\"<\/span>><\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span><<\/span>meta<\/span> name<\/span>=<\/span>\"viewport\"<\/span> content<\/span>=<\/span>\"width=device-width, initial-scale=1.0\"<\/span>><\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span><<\/span>title<\/span>><\/span>Document<\/span><\/<\/span>title<\/span>><\/span>\r\n<\/<\/span>head<\/span>><\/span>\r\n<<\/span>body<\/span>><\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span><<\/span>header<\/span>><\/<\/span>header<\/span>><\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span><<\/span>main<\/span>>\r\n<div class=\"container\">\r\n     <div class=\"imageBox\">\r\n       <img src=\"${download.iconPath}\" class=\"cta-\r\ndownload__icon-img\">\r\n      <\/div>\r\n     <\/div>\r\n    <\/main>\r\n    <footer><\/footer>\r\n<\/body>\r\n<\/html>\r\n<\/span><\/pre>\n
 <\/p>\n
\"VS<\/p>\n
Here, for this simple code, it shows me the error on this <img> tag in the index.html file, as there is nothing on the image that describes it. So after hovering over the <img> tag, it will show the axe-linter error message where you can click the link highlighted in blue as shown in the above image, and it will show you the solution.<\/span><\/p>\n
Error Code for SNIPPET 1 –<\/b><\/h2>\n
axe-linter (image-alt): Ensures <img> elements have alternate text or a role of none or presentation axe-linter(image-alt<\/a>)<\/strong><\/p>\n
Fix for SNIPPET 1 –<\/b><\/h3>\n
    \n
  1. #Fix – Add <\/span>alt<\/b> attribute.
    \n<\/span><img src=”${download.iconPath}” alt=”Download image” class=”cta-download__icon-img”><\/li>\n
  2. #Fix – Using aria-label<\/b> attribute.
    \n<img src=”${download.iconPath}” aria-label=”download image” class=”cta-download__icon-img”><\/li>\n
  3. #Fix – Using aria-labelledby<\/b> attribute.
    \n<img src=”${download.iconPath}” aria-labelledby=”download image” class=”cta-download__icon-img”><\/li>\n<\/ol>\n
    After following any of these above solutions, the axe-linter accessibility plugin will not show the error.<\/span><\/p>\n
    \"VS<\/p>\n
    Here, you can see how the code is error-free. There are more implementations in this chain of blogs.<\/p>\n
    Link to Part 4 – Web Accessibility: NVDA Screen Reader for effective debugging –\u00a0<\/b><\/a><\/p>\n
    <\/div>","protected":false},"excerpt":{"rendered":"
    This is the first example for the web aria accessibility implementation, where we will understand how this Axe Tool works and look at how we can fix these issues. You can read more about the accessibility implementation from the mdn web docs. But by Installing this Axe Accessibility Linter plugin on the Visual Studio 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":16,"footnotes":""},"categories":[5868,3429],"tags":[5340,5343,5341,5339],"class_list":["post-58014","post","type-post","status-publish","format-standard","hentry","category-adobe","category-front-end-development","tag-aria-accessibility","tag-implementing-aria-accessibility","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