components
Table
v.1.0.0 | SaturnAccessibility is a crucial consideration when designing and developing components, as it ensures that all users, regardless of their abilities or limitations, can interact effectively with your project. In this section, we will explore how our table has been developed with accessibility in mind, ensuring that all users have a smooth and meaningful experience.
The following mencioned props and recommendations are optional, althougt at Kubit strongly recommend their use to meet accessibility standars.
Usage recommendations
Tables will allow users to easily find specific data if these are organized in a coherent and hierarchical way. Use tables to:
- Make information easier to scan.
- Compare the information in rows and columns.
Do not use tables to:
- Layout content on a page.
- Display name/value pairs such as terms and definitions or glossaries. Use a list component instead.
Content recommendations
- The table header and data cells should always be filled.
- Do not repeat header labels.
- Accurately describe the category of the corresponding data columns or cells.
- Do not vary units within the same column.
- When tables have too many rows, it is recommended to have a pagination option to limit the number of rows. That will help users manage and go through the information.
Alignment recommendations
- Align text labels to the top left of the row.
- Align numbers to the top right of the row to make it easier to identify the quantity.
Keyboard interaction and Screen-reader experience
To support screen reader users, this component should include WAI ARIA attributes (the alt and aria specific props) to have a correct semantic markup. Screen reader and keyboard users should be able to operate with all the interactive elements. If table use a correct semantic markup:
- Screen readers will identify the component as a table.
- Screen reader users could know how many rows and columns there are.
- Screen reader users could know if they are in a table heading.
- Screen reader users could know in which column and row they are positioned and the table heading related to that cell.
- If there is a sort by functionality, screen readers should be informed about the columns that is sorted by default.
- Screen reader users could use the shortcuts to access directly to them.
Optionally, write a concise summary to allow assistive technologies’ users to get the idea of a table without voice-processing all its cells. Visually include this summary in the interface, or present it only to assistive technologies’ users.
Visual design
Color contrast
- For text labels in links needs a color contrast of at least 4'5:1 for regular text and 3:1 for large scale (18pt) or bold text (14pt).
- For the rest of elements and the focus indicator at least of 3:1 color contrast ratio is needed.
Target Size
The area for clicking and tapping buttons must be large enough. The recommended size of the target for pointer inputs is at least 24x24px and 44x44px for best readability.