1

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.

user3177255
  • 21
  • 4
  • 1
    Just add [`aria-hidden="true"`](https://stackoverflow.com/questions/31107040/whats-the-difference-between-html-hidden-and-aria-hidden-attributes) – George Jun 05 '17 at 13:57
  • Yes but I want to read icon label when it get focus. Which is not possible with aria-hidden=true – user3177255 Jun 05 '17 at 16:19
  • 1
    If you want screen reader users to be able to sort, definitely do not use `aria-hidden="true"`. Typically a screen reader will announce everything in a cell. This is normal. Do you have an example we can test? – aardrian Jun 05 '17 at 17:13
  • Another question maybe worth asking is why are you using the aria-label attribute to begin with? If your sort icon is a standard image file, then the standard ALT text should be sufficient on it's own. This won't really solve your issue of reading the image text every time a column is read, but as aardrian stated, this is normal and it is the expected behavior by screen reader users. – Josh Jun 06 '17 at 21:34

1 Answers1

0

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.

Ritesh Jagga
  • 1,387
  • 1
  • 11
  • 23