Research table accessibility

[nakayan5]

Description

read this article and research table accessibility

modify component if necessary

Problem Statement/Justification

none

Proposed Solution or API

No response

Alternatives

• Update @yamada-ui/table accessibility #1635

Are you willing to participate in implementing this feature and create a pull request include the implementation?

None

Additional Information

No response

[nakayan5]

@GensIto
assign you to this issue too.
please comment if you confirm.

[nakayan5]

@yamada-ui/table is applicable to this issue

Keyboard Interaction
Not applicable.

WAI-ARIA Roles, States, and Properties

• The table container has role table.
• Each row container has role row and is either a DOM descendant of or owned by the table element or an element with role rowgroup.
• Each cell is either a DOM descendant of or owned by a row element and has one of the following roles:
  • columnheader if the cell contains a title or header information for the column.
  • rowheader if the cell contains title or header information for the row.
  • cell if the cell does not contain column or row header information.
• If there is an element in the user interface that serves as a label for the table, aria-labelledby is set on the table element with a value that refers to the labelling element. Otherwise, a label is specified for the table element using aria-label.
• If the table has a caption or description, aria-describedby is set on the table element with a value referring to the element containing the description.
• If the table contains sortable columns or rows, aria-sort is set to an appropriate value on the header cell element for the sorted column or row as described in the Grid and Table Properties Practice.
• If there are conditions where some rows or columns are hidden or not present in the DOM, e.g., there are widgets on the page for hiding rows or columns, the following properties are applied as described in the Grid and Table Properties Practice.
  • aria-colcount or aria-rowcount is set to the total number of columns or rows, respectively.
  • aria-colindex or aria-rowindex is set to the position of a cell within a row or column, respectively.
• If the table includes cells that span multiple rows or multiple columns, then aria-rowspan or aria-colspan is applied as described in the Grid and Table Properties Practice.

[nakayan5]

created issue
#1635