An ADA issue: the «Grid» / «Link» links labels are not suffucient for screen readers on the product list pages

[dmitrii-fediuk]

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.

[dmitrii-fediuk]

Related issues:

• 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 (fixed previously)
• An ADA issue: «the state (selected/not selected) of the view modes i.e., Grid and List is not announced by the screen reader»