htmlwordpresswordpress-themingaccessibilitylighthouse

How to fix Lighthouse “Links do not have a discernible name”


I have an error :

Links do not have a discernible name.

Error Links do not have a discernible name

<div id="kt-info-box_55b0dc-d7" class="wp-block-kadence-infobox"><a class="kt-blocks-info-box-link-wrap info-box-link kt-blocks-info-box-media-align-top kt-info-halign-center" href="https://albaytalraqy.com/%d8%b4%d8%b1%d9%83%d8%a9-%d9%86%d9%82%d9%84-%d8%a7%d8%ab%d8%a7%d8%ab/" aria-label="افضل شركة نقل اثاث وعفش بالرياض افضل شركة تخزين بالرياض"><div class="kt-blocks-info-box-media-container"><div class="kt-blocks-info-box-media kt-info-media-animate-none"><div class="kadence-info-box-icon-container kt-info-icon-animate-none"><div class="kadence-info-box-icon-inner-container"><span style="display:block;justify-content:center;align-items:center" class="kt-info-svg-icon kt-info-svg-icon-fe_truck"><svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="50" width="50" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><title>افضل خدمات نقل وتخزين الاثاث والعفش بالمملكة العربية السعودية</title><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg></span></div></div></div></div><div class="kt-infobox-textcontent"><h2 class="kt-blocks-info-box-title">نقل وتخزين الأثاث</h2></div></a></div>

How do I get to solve this problem?


Solution

  • This could be a false positive.

    Your aria-label provides accessible link text (and there is text within the anchor itself).

    One suggestion is that you might not have set the page language in your HTML declaration correctly and so it is struggling with a right to left language as the aria-label (I am assuming right to left, please excuse my ignorance!).

    Try adding lang=(relevant language ISO code) to the <html> declaration and see if that fixes it if you haven't already done so.

    Another possibility is that this error can be shown if you have two links going to the same URL with the same link text, check that this isn't the case.

    If neither of the above are true then you can safely ignore this warning.