Accessibility using title attribute for truncated text

Question

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?

Answer 1

I will suggest to you https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip. It will work in all environments.

Answer 2

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.

Answer 3

Well, in my opinion it would be the appropriate solution because users just often take the mouse over the text and wait for the hidden text to popup. I saw many of them including my sister who is not at all in these type of things. She just hover overs a text and then wait for the text to come up and when it does not she just says "Oh god! Why???". So in my opinion it would the appropriate way.

One more thing, you can catch the user's attention by styling your title attribute/tooltip a bit.

EDIT: @steveax said that title attribute is not good to use so I recommend you seeing this question. The question has a type of CSS approach so it will be easier for you to style it :)