![]() ![]() ![]() While in application mode, a screen reader user hears only focusable elements and content that labels focusable elements. One reason it is important for all cells to be able to receive or contain keyboard focus is that screen readers will typically be in their application reading mode, rather than their document reading mode, when users are interacting with the grid. There is one exception: if column or row header cells do not provide functions, such as sort or filter, they do not need to be focusable. In a grid, every cell contains a focusable element or is itself focusable, regardless of whether the cell content is editable or interactive. The grid pattern is particularly useful if the tabular information is editable or interactive.įor example, when data elements are links to more information, rather than presenting them in a static table and including the links in the tab sequence, implementing the grid pattern provides users with intuitive and efficient keyboard navigation of the grid contents as well as a shorter tab sequence for the page.Ī grid may also offer functions, such as cell content editing, selection, cut, copy, and paste. Advanced Data Grid Example: Example of a grid with behaviors and features similar to a typical spreadsheet, including cell and row selection.ĭata Grids For Presenting Tabular InformationĪ grid can be used to present tabular information that has column titles, row titles, or both.Data Grid Examples: Three example implementations of grid that include features relevant to presenting tabular information, such as content editing, sort, and column hiding.Layout Grid Examples: Three example implementations of grids that are used to lay out widgets, including a collection of navigation links, a message recipients list, and a set of search results.To address these factors, the following two sections describe separate keyboard interaction patterns for data and layout grids. Uses of the grid pattern broadly fall into two categories: presenting tabular information (data grids) and grouping other widgets (layout grids).Įven though both data grids and layout grids employ the same ARIA roles, states, and properties, differences in their content and purpose surface factors that are important to consider in keyboard interaction design. ![]() All focusable elements contained in a table are included in the page tab sequence.Only one of the focusable elements contained by the grid is included in the page tab sequence.Always contains multiple focusable elements.When presenting content that is tabular, consider the following factors when choosing between implementing this grid pattern or the table pattern. While the words "row" and "column" are used in the names of WAI-ARIA attributes and by assistive technologies when describing and presenting the logical structure of elements with the grid role, using the grid role on an element does not necessarily imply that its visual presentation is tabular. It can be used for purposes as simple as grouping a collection of checkboxes or navigation links or as complex as creating a full-featured spreadsheet application. A grid widget is a container that enables users to navigate the information or interactive elements it contains using directional navigation keys, such as arrow keys, Home, and End.Īs a generic container widget that offers flexible keyboard navigation, it can serve a wide variety of needs. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |