Accessibility : Buttons do not have an accessible name

Shopify Discussion

Topic summary

Main issue: Google’s accessibility audit flags that buttons and links on a Shopify store lack accessible (discernible) names.

Key context: Screenshots are central, showing the audit findings. Code snippets are referenced but not detailed in the thread.

Explanation provided: Buttons/links need labels so screen readers (assistive technologies that read web content aloud) can convey their purpose. Adding an aria-label attribute (an HTML attribute that supplies an accessible name) to icon-only buttons/links was suggested, e.g., labeling a search icon as “Search”.

Clarifications: “alt” text applies to images, not to buttons/links. For interactive elements, use visible text or aria-label/aria-labelledby.

User responses: Multiple participants express confusion about how to edit Shopify theme (Liquid) code and apply these changes without hiring a developer. The accepted solution is criticized for lacking actionable, step-by-step instructions.

Status/outcome: No confirmed fix or step-by-step actions were provided. The discussion remains unresolved, with an open need for practical guidance on implementing aria-labels within Shopify themes.

Summarized with AI on December 18. AI used: gpt-5.
2

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:

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:

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

1 Like