Accessibility : Buttons do not have an accessible name

[Samy88]

Hello,

I try to improve the accessibility of my shopify store www.vracmentpropre.be .

Google give me two elements to improve :

May anyone help me to change that? I have tried to add "alt" text in my liqui files but dont see it appearing in my code when I open my website.

I am not specialist in code but can follow instructions easily :-).

[BSalim · Accepted solution]

In layman terms, these buttons and links need to be somehow labelled so that screen readers can discern the purpose of the link/button and then relay that to the user. One way to do that is by giving the buttons an aria-label attribute, for example:

<button aria-label="Close" onclick="myDialog.close()">X</button>

Note that without the aria-label the computer would somehow have to figure out that a button with the text X means close (modern screen readers or even other accessibility softwares haven't come this far yet), by adding the aria-label attribute you should be able to improve accessibility and fulfill the suggestion given by Google.

As an example for the button with the search icon:

<button aria-label="Search"> <img src="search-icon.png" /> </button>

Note this is an example your search button may look different.

[Pdigilio]

Yeah uh..   what??? This is an alien language to me. I never knew I had to be an advanced coder for this crap. How does one do this without having to hire a programmer?

[Pdigilio]

I have not one clue of what was done here. How do I edit the code, what do I type? I can't find answers anywhere and it's driving me up a wall

[houseofsxn]

Not sure why this is an accepted solution.  It's doesn't provide an answer.  Anyone else come up with a solution.?