CODEWITHSUNDEEP
javascriptaccessibilitywai-aria
user3177255
user3177255

Reputation: 21

Hide some part from the table column header

I have one table. In table column I have two thing one table column name and one icon to sort column. Everything works fine, but right now I started working with accessibility and found that for each column value it reads both table header and aria label for icon also. I don't want read aria label for icon Is there any way to give label for icon so that it read in screen reader but don't read foe each data row.dont want to put icon outside of table column also.

Upvotes: 1

Views: 993

Answers (1)

Ritesh Jagga
Ritesh Jagga

Reputation: 1442

Use the solution as explained here in Sortable Table.

  • Use aria-hidden to remove the icon from accessibility and also
  • Use aria-sort which meets the arrow icon purpose and lets the Screen Reader know the direction of the sort: ascending or descending.

Visual users would be able to know the direction by seeing the arrow icon position.

Non-visual users would be able to know when SR speaks the aria-sort value.

Upvotes: 0

Related Questions