WCAG Accessibility Issue

  • Resolved anblik

    (@anblik)


    1 year, 6 months ago

    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 >
<svg xmlns="https://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 >
<svg xmlns="https://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 1 year, 6 months ago by anblik.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter anblik

    (@anblik)

    To temporarily fix the issue, I have deselected BUTTON type link and Selected Link for TITLE. Even your BODY area link also got major issue in Accessibility.

    Selecting TITLE for link fixed the accessibility issue for the time being. I am still waiting for the button type link to function properly for screenreader application.

    Plugin Author Charles Cormier

    (@charlescormier)

    Hi @@anblik,

    We fixed the issue and released a new version. Please update the plugin to the new version.
    Thanks!

    Thread Starter anblik

    (@anblik)

    @charlescormier Congrats! It makes your plugin accessible and Fixes all issues, as I tested in AXE, Wave, and Lighthouse. It Passed the test successfully.

    Thank you very much for a prompt initiative and fixing of WCAG issues.

    I have reverted back the Service section to link with Button now ??

    I have not checked the Service Section body link yet, do check and fix if any remains.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘WCAG Accessibility Issue’ is closed to new replies.