Information on Display: New Features and More Accessible Data Tables
Updated interactions, new customizations and expanded access for users—dig into Material Design’s new-and-improved data tables
Data tables, which organize information into easy-to-digest formats, are especially useful at work. That’s why our latest Material Design release included updates specifically addressing the needs of data tables in the workplace. It’s all part of a new effort to provide greater Material support for the UI needs of enterprise teams, products, and companies.
TL;DR on data tables
Data tables display sets of similar information so that it’s easy to scan — often ordered in a hierarchical or alphabetical way that helps users find patterns and insights. A variety of interactive elements (like selecting rows and column sort) support a range of use cases demonstrated in our design guidance.
To customize Material’s baseline data tables on the web, developers can use our handy Sass mixins.
Making data tables more accessible
With the latest release, Material data tables got larger touch targets, as well as support for screen reader and keyboard access. The component uses semantic HTML tags, enabling users with different abilities to use our data tables. The web component is implemented in a table-pattern which is optimized for tables with low to zero interactive elements because every focusable element is a tab stop. In this release, checkboxes are a focusable element with keyboard tabs.
We’re planning to follow up with a grid-pattern variant in a later release which supports tables with many interactive elements. The grid-pattern variant provides users with greater navigation efficiency and flexibility since arrows and other keys can be used for navigation, not just tabs.
While designing for a wider set of users, our team referenced a few excellent articles to better understand data table accessibility:
- Web AIM
- Table implementation and Grid pattern implementation guidance from w3.org
Next up
Our current release covers foundational usage needs, but we recognize that providing more features will support an even wider set of use cases. New features are already in the works, and we’re hoping to release them by the end of the year.
In the meantime, please use our data table guidance and code to help make your work easier.
What do you think?
Let us know about any feature requests or bugs by reaching out to us on Twitter with @materialdesign.
