Solved

Accessibility : Buttons do not have an accessible name

Samy88
Tourist
6 0 1

Hello,

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

Google give me two elements to improve :

Samy88_0-1630677507896.pngSamy88_1-1630677534995.png

 

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 :-).

Accepted Solution (1)

BSalim
Excursionist
10 2 5

This is an 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.

View solution in original post

Replies 3 (3)

BSalim
Excursionist
10 2 5

This is an 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
Visitor
2 0 0

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
Visitor
2 0 0

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