Block Button/Link Warning – Link with no accessible text

  • Resolved jinsley8

    (@jinsley8)


    1 year ago

    Hi,

    I’m using the default Gutenberg buttons and links and the plugin isn’t detecting the links properly.

    It’s giving me a warning for “Link with no accessible text“:

    This link is either a typo (a linked space character), or a linked image with no text alternative.

    Screen readers will either say nothing when they reach this link:
    "Link, [...awkward pause where the link title should be...],"
    or read the URL:
    "Link, H-T-T-P-S forward-slash forward-slash example dot com"

    One example is a button labelled “Download PDF Form” and the link is a PDF from media library, other times it is a regular hyperlink in a paragraph block.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Contributor John Jameson

    (@itmaybejj)

    1 year ago

    Hmm I can’t reproduce this. Would you mind telling me what version of WordPress and what version of the plugin you are running? And if you are seeing this while editing, after saving, or both?

    I’m trying to figure out if the markup might be different in a different Gutenberg version than what I’m testing in, or if there might be a configuration issue where “download”, “pdf” and “form” are getting stripped by the meaningless links test (“click here to download”) and tripping the wrong tooltip.

    Thread Starter jinsley8

    (@jinsley8)

    1 year ago

    PHP 8.3, WP 6.7.2, Editoria11y Accessibility Checker v2.0.9

    The message shows on the frontend, not the block editor page.

    Sorry, it’s showing for Kadence Block button (not WP button) and the regular WP Parapgrah block hyperlink used in a Kadence Block Container. But it looks like every instance of the Kadence button is showing the warning.

    Plugin Contributor John Jameson

    (@itmaybejj)

    1 year ago

    Hmmph; I’m still puzzled. I downloaded that plugin and made a bunch of blocks and buttons, and the only way I could get Editoria11y to throw a tip was if I created a real problem — e.g., assigning an aria-label of an empty space in the Kadence advanced tab:

    Could I ask another favor to try to locate this problem? Would you be willing to inspect some of the marked links and send me a paste or screenshot of the markup? Then I can make sure I’m troubleshooting with the exact right tags. Or if the site is live just give me a link to a page and I’ll take a look at it myself.

    E.g., for the one marked above, the code (with the bad aria-label) looks like this:

    <a class="kb-button kt-button button kb-btn215_e7b705-a1 kt-btn-size-standard kt-btn-width-type-auto kb-btn-global-fill kt-btn-has-text-true kt-btn-has-svg-false wp-block-kadence-singlebtn" aria-label=" " href="https://editoria11y-wp.ddev.site/2024/11/27/hey-there/"><span class="kt-btn-inner-text">link with space in aria label</span></a>
    Thread Starter jinsley8

    (@jinsley8)

    1 year ago

    Oh no, I’m not sure how I mixed this up. I am actually using the free Spectra blocks plugin for the buttons on this site, not Kadence. Sorry, when I checked before, I had two projects open side-by-side.

    This is the markup:

    <a class="uagb-buttons-repeater wp-block-button__link ed11y-ring-red" aria-label="" href="https://drive.google.com/open?id=1OCl44fggfgfg" rel="nofollow noopener" target="_blank" role="button"><div class="uagb-button__link">Submit Online Form</div></a>

    I fixed the paragraph hyperlink issue. My page was outputting the link twice in the HTML for some reason. I deleted and re-added that to fix it.

    Thread Starter jinsley8

    (@jinsley8)

    1 year ago

    There is a blank aria-label on this button by default. If you select “Remove Text” and add an icon, it adds an aria-label which gets rid of the warning.

    • This reply was modified 1 year ago by jinsley8.
    Plugin Contributor John Jameson

    (@itmaybejj)

    1 year ago

    Oh dear. Aria-label attributes should never be empty. I recommend submitting this to Spectra as a bug; they should not be setting the attribute at all if it is empty.

    That said………I’m testing this markup now with NVDA and VoiceOver, and they both seem to recognize this as invalid markup and ignore the attribute, so it might not actually be a problem for accessibility. It looks like someone confirmed the same in JAWS.

    I’ll have to sleep on whether I’ll add an exception to the test. In the interim you can disable checks on these links by going into the Editoria11y settings for “Do not flag these elements” and adding a selector for: 

    a[aria-label=""]
    Plugin Contributor John Jameson

    (@itmaybejj)

    1 year ago

    [duplicate post]

    Thread Starter jinsley8

    (@jinsley8)

    1 year ago

    Thanks, I have submitted a bug report anyways: https://wordpress.org/support/topic/aria-label-bug-in-button-block/

    Plugin Contributor John Jameson

    (@itmaybejj)

    1 year ago

    This is now mostly-addressed in 2.0.10 — it won’t flag it as a red-alert any more, but the manual check for links with unclear purpose (“click here”) still does not read their value right, so it goes from a false positive to a false negative. But that’s at least not annoying any more, and losing a manual check is not so big a deal.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Block Button/Link Warning – Link with no accessible text’ is closed to new replies.