Table > Accessibility Audit

Refer to the [parent epic description](https://gitlab.com/groups/gitlab-org/-/epics/5387) for more information on this effort.

## Purpose

Audit the accessibility of the GitLab UI Table component in all variants and states in order to update the Pajamas component [Status table](https://design.gitlab.com/components/status), and provide more documentation on the component’s page in Pajamas.

## Component description

Tables display tabular data in a basic grid composed of cells, columns, and rows. This format makes it easy for users to scan and compare large amounts of data. Tables are not for layout.

## Methods and Tools

Review the [initial testing methods in the parent epic](https://gitlab.com/groups/gitlab-org/-/epics/5387#initial-methods-and-tools). List the testing methods used for your audit below, including any additional testing methods needed for this component that is not listed in the parent epic.

* Evaluate all of the [table](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-table-table--default) variants and configurations in GitLab UI.
* Visual review for contrast and states.
# Semantic and functional review for tables using the `<table>` element.
* Semantic and functional review for tables not using the `<table>` element align with [WAI-ARIA Authoring Practices for tables](https://www.w3.org/TR/wai-aria-practices/#table) (if present).
* Keyboard only
* Screen reader: VoiceOver + Safari on macOS
* Screen reader: NVDA + Chrome on Windows
* axe DevTools extension in browser

## Audit Criteria 

Review the [general audit criteria in the parent epic](https://gitlab.com/groups/gitlab-org/-/epics/5387#audit-criteria). Add applicable criteria to this section, including any additional criteria needed for this component that is not listed in the parent epic. A check indicates that the audit has been performed, not that it passes.

* [ ] All actions and functionality can be done with a [keyboard](https://design.gitlab.com/accessibility-audits/2-keyboard-only).
* [ ] Color combinations have [sufficient contrast](https://design.gitlab.com/product-foundations/colors#accessibility).
* [ ] Table heading, column, and row relationships are clearly defined and communicated with the correct scope.
* [ ] Tables include a `caption` or are directly preceded by a heading (a `caption` is preferred).

## Results

| **Problem** | **Solution** | **Related MR** |
| ----------- | ------------ | -------------- |
| Some ARIA attributes and roles are either unnecessary or not allowed on a `<table>` and sub elements. | Evaluate each ARIA attribute a/role and either remove or document correct use. | TBD |
| No `<caption>` element is present to explain the table's purpose. | Include a `<caption>` element that describes the purpose of the table. | TBD |
| The ability to select a row interferes with expected behavior. `tab-index="0"` shouldn't be used at all here. | Introduce plain table examples and document requirements of expected behavior for selectable table elements (if they should exist). | TBD |
| Using literal "column one" and "column two" text in the examples makes testing confusion, since columns are also announced. | Update text in Storybook stories. | TBD |
| Stacked layout has several issues that make it difficult or impossible to use or understand. Including, but not limited to no table headers, pseudo content, and other items that are already mentioned. | Rethink responsive tables and accessible options. | TBD |
| Filter variant unusable in NVDA. | Update filter capabilities, see the [Web Experience Toolkit Tables](https://wet-boew.github.io/v4.0-ci/demos/tables/tables-en.html) for examples. | TBD |

## Completing the audit

After the solutions have been explored and applied, review the [completing the audit section in the parent epic](https://gitlab.com/groups/gitlab-org/-/epics/5387#completing-the-audit). Complete all items prior to closing this issue.

## Resources and reference

- [Data Tables](https://inclusive-components.design/data-tables/) by Heydon Pickering
- [Tables, CSS Display Properties, and ARIA](https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html#TheTweet) by Adrian Roselli
- [Web Experience Toolkit Tables](https://wet-boew.github.io/v4.0-ci/demos/tables/tables-en.html), great examples of tables with filtering, sorting, and pagination.

~accessibility ~"Category:FE/UX Foundations" ~"component:table"

Story points: 5.0