An ADA issue: «the state (selected/not selected) of the view modes i.e., Grid and List is not announced by the screen reader»

[dmitrii-fediuk]

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

A particularly important state of a user interface control is whether or not it has focus. The focus state of a control can be programmatically determined, and notifications about change of focus are sent to user agents and assistive technology. Other examples of user interface control state are whether or not a checkbox or radio button has been selected, or whether or not a collapsible tree or list node is expanded or collapsed.

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.
Or Implement the link as tab.

[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 «Grid» / «Link» links labels are not suffucient for screen readers on the product list pages