Links do not have a discernible name

Hi, can you elaborate on the problem? where and when does the error occur? also, where do you want to put the code you provide? thank you

Lighthouse suggesting to fix my a href text

Hi,

that warning is because the link did not have an ‘aria-label’ attribute. gutenverse will solve that problem in a future update. but if you need to solve it immediately, you can add a script tag inside of a custom html block. here is how you can do it:

find the links

if you already know which link needed to have an aria-label, that’s great! but if you don’t, then follow this step. in your site view, right-click on the element you think is a link or if you do not have any guesses, right-click anywhere. you will find an option pop-up and then look for the inspect/inspect element option.

View post on imgur.com

if you are correct to do it on a link you will find tag <a> on the element structure, and if you hover or click that element the view in the site will be highlighted. if not, do command/ctrl + f and type ‘<a’ on the element structure to look for the link. keep selecting until you find the correct link.

View post on imgur.com

add a custom html block in the page editor

as you find the correct link, see the class attribute and keep it. now, go to the page editor and then add custom html block anywhere you wanted.

View post on imgur.com

now, add this code to your custom html block:

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const link = document.querySelectorAll('a.[example-class]');
        link.setAttribute('aria-label', '[Description of the link]');
    });
</script>

don’t worry because the custom html block won’t be displayed in the frontend. now all you need to do is copy the code and paste it on your custom HTML block. change the [example-class] to your link class that you found before then add any description to that link as aria label. if you had more than one link, just copy the two line of code and add it to the bottom of previous code.

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const link = document.querySelectorAll('a.[example-class-1]');
        link.setAttribute('aria-label', '[Description of the link]');
   
        const link = document.querySelectorAll('a.[example-class-2]');
        link.setAttribute('aria-label', '[Description of the link]');

        const link = document.querySelectorAll('a.[example-class-3]');
        link.setAttribute('aria-label', '[Description of the link]');
    });
</script>

hi, these codes solve the problem of the link as much as possible, but I found the main problem, this problem is here
social share`div.guten-column-wrapper > div.guten-element > div#guten-pE4WKR > a
<a target=”_blank” href=”//api.whatsapp.com/send

HI,

you can actually use that for the selector.

const link = document.querySelector('div.guten-column-wrapper > div.guten-element > div#guten-pE4WKR > a');

tnx

you are welcome