In Gutenberg, I have added your Service Section and added 6 service blocks. All is fine, except in the website’s first-time load, the WebAIM WAVE tool shows a warning for all the Service Links.
Empty link
A link contains no text.What It Means
A link contains no text.
Why It Matters
If a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users.
How to Fix It
Remove the empty link or provide text within the link that describes the functionality and/or target of that link.
<!-- Inaccessible Inline SVG Empty Link generate from your Code -->
<div class="link">
<a href="https://domain.com/">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 493.356 493.356">
<path d="M490.498,239.278l-109.632-99.929c-3.046-2.474-6.376-2.95-9.993-1.427c-3.613,1.525-5.427,4.283-5.427,8.282v63.954H9.136 c-2.666,0-4.856,0.855-6.567,2.568C0.859,214.438,0,216.628,0,219.292v54.816c0,2.663,0.855,4.853,2.568,6.563 c1.715,1.712,3.905,2.567,6.567,2.567h356.313v63.953c0,3.812,1.817,6.57,5.428,8.278c3.62,1.529,6.95,0.951,9.996-1.708 l109.632-101.077c1.903-1.902,2.852-4.182,2.852-6.849C493.356,243.367,492.401,241.181,490.498,239.278z"></path>
</svg>
</a>
</div><!-- Accessible Fixed Inline SVG Link -->
<div class="link">
<title id="sstitletext">Service Title</title>
<a href="https://domain.com/">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 493.356 493.356" role="img" aria-labelledby="sstitletext">
<path d="M490.498,239.278l-109.632-99.929c-3.046-2.474-6.376-2.95-9.993-1.427c-3.613,1.525-5.427,4.283-5.427,8.282v63.954H9.136 c-2.666,0-4.856,0.855-6.567,2.568C0.859,214.438,0,216.628,0,219.292v54.816c0,2.663,0.855,4.853,2.568,6.563 c1.715,1.712,3.905,2.567,6.567,2.567h356.313v63.953c0,3.812,1.817,6.57,5.428,8.278c3.62,1.529,6.95,0.951,9.996-1.708 l109.632-101.077c1.903-1.902,2.852-4.182,2.852-6.849C493.356,243.367,492.401,241.181,490.498,239.278z"></path>
</svg>
</a>
</div>I have added role =”img” and aria-labelledby=”sstitletext” to the <svg> tag where the attributes match the ids of the defined title. When a screen reader encounters the SVG, it would read out the Service Section Title: “Service Title.” This basically works like an IMG Tag ALT attribute.
Please replace the Title value with the Service Title. Kindly update your plugin with Fixed code and release a new version, so that I can update the plugin in my end to fix accessibility issues at the earliest.
- This topic was modified 15 hours, 57 minutes ago by .