Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Accessibility using title attribute for truncated text

I have a table cell with max-width set and if the text within the cell is too long, it gets truncated with ellipsis.

Therefore, would using the title attribute to display the full text be an appropriate (accessible) solution?

like image 267
calebo Avatar asked Nov 12 '22 03:11

calebo


1 Answers

If the text is truncated by means of CSS's text-overflow: ellipsis: Yes, the title attribute is a working solution for screen readers.

It does not even matter if it's being read by screen readers, since the original (visually truncated) text will be fully read.

On the other hand, title attributes are not accessible by keyboard, touch screen and other means.

For your case I would see the following solutions:

  • use title if the truncated text is but a preview and linked with another view showing the full version
  • Make the text expandable inline, by means of a toggle like
  • Provide a keyboard and screen reader accessible tooltip that expands the text in a layover

In all cases screen reader users will already have access to the full text without additional interaction.

like image 67
Andy Avatar answered Nov 15 '22 12:11

Andy