The link text for selected mode of view is not enough to describe the purpose of the links.
This can be misleading as the screen reader user won’t be able to identify the role of the button.
https://www.kitchencollection.com/kitchen-gadgets
Code snippet:
<div class="modes"> <strong class="modes-label" id="modes-label">View as</strong> <!-- 2018-10-28 Dmitry Fedyuk https://www.upwork.com/fl/mage2pro "An ADA issue: the «View as Grid» button of the frontend product list page is read as plain text by the screen reader. This can be misleading as the screen reader user won’t be able to identify the nature or role of the button.": https://github.com/kitchencollection-com/core/issues/33 --><strong title="Grid" class="modes-mode active mode-grid" data-role="mode-switcher" data-value="grid" tabindex="0"><span>Grid</span></strong> <a class="modes-mode mode-list" title="List" href="#" data-role="mode-switcher" data-value="list" id="mode-list" aria-labelledby="modes-label mode-list"><span>List</span></a> </div>
Rationale
Assistive technology has the ability to provide users with a list of links that are on the Web page.
Link text that is as meaningful as possible will aid users who want to choose from this list of links.
Meaningful link text also helps those who wish to tab from link to link.
Meaningful links help users choose which links to follow without requiring complicated strategies to understand the page.
Recommendations
Remove tabindex from <strong> having class="modes-mode active mode-grid" also provide visually hidden text under same <strong>.
And provide a relevant label to the <a> having class="modes-mode mode-list", using aria-label or aria-labelledby attribute.
https://www.kitchencollection.com/kitchen-gadgets
Code snippet:
Rationale
Recommendations