Grid: Grid is missing appropriate roles and/or attributes

Rule

The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

Background

Every user interface control must have a role along with any applicable states and properties so that screen reader users know how to interact with the control. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, and their necessary states and properties - such as the checked/unchecked state of a checkbox - are automatically conveyed so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) and any applicable states and properties using ARIA as well as expected keyboard interactions.

How to Fix

A grid widget is a container that enables users to navigate the information or interactive elements it contains using arrow keys. An ARIA grid is a composite widget so it: 1) Always contains multiple focusable elements. 2) Only one of the focusable elements contained by the grid is included in the page tab sequence. 3) Requires the author to provide code that manages focus movement inside it. ARIA grid markup should not be used on a simple data table or a grid of items that can be easily navigated with the Tab key. Instead, use HTML <table> markup.

Fix this issue by doing ONE of the following:

1. Use a <table> element and associated child elements and attributes such as <th>, <td>, scope, etc.
2. Follow the ARIA grid design pattern including expected keyboard interactions at: https://www.w3.org/WAI/ARIA/apg/patterns/grid/