Day 16: Icon buttons should be labelled with aria-label

This page summarizes the projects mentioned and recommended in the original post on dev.to
Testing Frameworks Frameworks Test Testing testing-tools

SurveyJS
Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
Our great sponsors

  • Cypress

    Fast, easy and reliable testing for anything that runs in a browser.

    Adding role="img" to the element will indicate that the SVG image is not decorative (so screen readers won't skip it). To give an "alt text" to the inline SVG image, I added a element as the element's child and referred to its id attribute value with aria-labelledby in the tag. This is the best practice to make an inline SVG image accessible, according to Fisher (2021).

    However, using this method as a button label turns out to be not a good idea. O'Hara (2019) notes that some combinations of browsers and screen readers won't recognize the element's accessible name as its parent element's accessible name.

    I myself experienced the same issue with Chrome (version 96.0.4664.110). Two of the four buttons don't have accessible names, even though I used exactly the same HTML code structure for all the four buttons...

    Here's a demo. Using Chrome DevTools' accessibility panel, you can see:

    1. The top-left button shows an accessible name of "Show menu", which is the same as its SVG icon's (defined in the </code> element): <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--LGJY7x6w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqq2edisa8inp7ffsddy.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LGJY7x6w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqq2edisa8inp7ffsddy.png" alt="" loading="lazy" width="856" height="870"></a></p></li> <li><p>The top-right button <strong>has no accessible name</strong>, even though its SVG icon does have an accessible name of "Search place": <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--kGl0JLEi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jjmhnyblqr5duplgn2x.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kGl0JLEi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jjmhnyblqr5duplgn2x.png" alt="" loading="lazy" width="856" height="870"></a></p></li> <li><p>The bottom-right button with the airplane icon shows an accessible name of "Track your location", which is the same as its SVG icon's: <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qLRrd5Xc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znyhp2jnyq1ao4lbdb72.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qLRrd5Xc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znyhp2jnyq1ao4lbdb72.png" alt="" loading="lazy" width="856" height="870"></a></p></li> <li><p>The bottom-right button with the plus sign icon <strong>has no accessible name</strong>, even though its SVG icon has an accessible name of "Save place": <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--iqdgAIhe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ga0n81fya1tgrndyzm02.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iqdgAIhe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ga0n81fya1tgrndyzm02.png" alt="" loading="lazy" width="856" height="870"></a></p></li> </ol> <p>This is so weird... Seems like browsers do not consistently recognize an accessible name of the icon image as a button's label text.</p> <h3> <a name="digression-how-ive-noticed-this-bug" href="#digression-how-ive-noticed-this-bug"> </a> Digression: How I've noticed this bug </h3> <p>Incidentally, I noticed the bug thanks to <a href="https://testing-library.com/docs/cypress-testing-library/intro/">Cypress Testing Library</a>. While I was writing some tests for <a href="https://cypress.io/">Cypress</a> to test-drive the search feature of the app, I wrote this line of code:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="nx">cy</span><span class="p">.</span><span class="nx">findByRole</span><span class="p">(</span><span class="dl">'</span><span class="s1">button</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Search place</span><span class="dl">'</span><span class="p">}).</span><span class="nx">click</span><span class="p">();</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode Exit fullscreen mode

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts