[aria-hidden="true"] elements contain focusable descendents

[aria-hidden="true"] elements contain focusable descendents

PoojaHiwade
Excursionist
26 0 14

Can anyone help to solve this?

Capture.PNG



Reply 1 (1)

flareAI
Shopify Partner
2405 224 543

Hello @PoojaHiwade,

 

Good day! Gina from flareAI app helping Shopify merchants get $6Million+ in sales from Google Search, on autopilot.


The "Aria-Hidden='True'" attribute is used to indicate to screen readers that an element should be hidden from the accessibility tree, but still visible on the page. It's generally used to improve the user experience for screen reader users by reducing the amount of extraneous information that they have to navigate through.


However, the attribute can cause issues with performance testing tools like Google PageSpeed Insights, which may flag it as a potential problem.


If you want to improve your page speed performance and remove the "Aria-Hidden" attribute from your store, you can follow these steps.


1. Open your Shopify store's code editor and go to the file where the "Aria-Hidden" attribute is being used.

2. Locate the element that has the attribute and remove it.

3. If the element needs to be hidden from screen readers, you can use other techniques such as visually hiding the element or using the "aria-label" attribute to provide a more accessible label for the element.

4. Save your changes and test your store's performance again using Google PageSpeed Insights or another performance testing tool to see if the issue has been resolved.


While improving your page speed performance can have benefits for your store's SEO and user experience, you should also prioritize accessibility and ensure that your store is fully accessible to all users, including those who use screen readers.


Gina

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing