- This topic has 3 replies, 2 voices, and was last updated 4 years, 6 months ago by
.
-
Posts
-
<span style="float:right;padding-right:12px;"><svg aria-hidden="true" role="img" height="1.5em" width="1.5em" focusable="false" data-prefix="fas" data-icon="angle-double-down" class="svg-inline--fa fa-angle-double-down fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M143 256.3L7 120.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0L313 86.3c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.4 9.5-24.6 9.5-34 .1zm34 192l136-136c9.4-9.4 9.4-24.6 0-33.9l-22.6-22.6c-9.4-9.4-24.6-9.4-33.9 0L160 352.1l-96.4-96.4c-9.4-9.4-24.6-9.4-33.9 0L7 278.3c-9.4 9.4-9.4 24.6 0 33.9l136 136c9.4 9.5 24.6 9.5 34 .1z"></path></svg></span>Hello!
I added the above code to my menu to display a button for sub-categories. After implementing the code, Google Lighthouse displays the problem in the screenshot: https://drive.google.com/file/d/1AHxHucKtBHQ-MNEfPAastgNscMPl0VI1/view?usp=drivesdkLink to the explanation: https://web.dev/button-name/
How can I solve this problem?
Customer Support
Hi there,
that doc you linked to explains the answer:
https://web.dev/button-name/#how-to-add-accessible-names-to-buttons
You need to include
aria-label="whatever label you require goes here"inside your SPAN HTML.<span aria-label="subcategories icon" style="float:right;padding-right:12px;"><svg aria-hidden="true" role="img" height="1.5em" width="1.5em" focusable="false" data-prefix="fas" data-icon="angle-double-down" class="svg-inline--fa fa-angle-double-down fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M143 256.3L7 120.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0L313 86.3c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.4 9.5-24.6 9.5-34 .1zm34 192l136-136c9.4-9.4 9.4-24.6 0-33.9l-22.6-22.6c-9.4-9.4-24.6-9.4-33.9 0L160 352.1l-96.4-96.4c-9.4-9.4-24.6-9.4-33.9 0L7 278.3c-9.4 9.4-9.4 24.6 0 33.9l136 136c9.4 9.5 24.6 9.5 34 .1z"></path></svg></span>Actually, I have already tried the code above as you and the mentioned doc explained; however, it did not work at all.
Looking at the google report its the
<button>element that is being flagged. The aria-label should be in the button html.
- You must be logged in to reply to this topic.
