WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Truncated links and titles

for

From: Sean Curtis
Date: Jun 25, 2015 6:34PM

It really seems like something which should be handled by the browser. I
think Safari is the only one which detects when text is being truncated and
adds a visual title on hover. Try out https://jsbin.com/mijeqi/ in Safari
to see what I mean.

In our components we apply a data-tooltip attribute to the element, and
then display a larger tooltip on hover (and often focus) using a modified
version of http://onehackoranother.com/projects/jquery/tipsy/

Screen readers will announce the full contents of the element, and keyboard
users will see the tooltip. The only downside is that there is (necessary)
duplication in the markup, and that the tooltip displays regardless of
truncation. Unfortunately there's no event (that I know of) to bind to that
fires when something is truncated. There are probably some really
non-performant ways of detecting when something is truncated (clone
element, measure the height as the element width is reduced until wrapping
occurs, then compare to original element), but I haven't found it worth the
cost.

Most of the time we use this technique (as does Gmail) when using icon-only
buttons. Other times we can often design our way around the problem.
Normally when text is being truncated at random widths it's a sign the UX
could use some finessing.

Cheers,

Sean

On Fri, Jun 26, 2015 at 5:40 AM, Joy Relton < <EMAIL REMOVED> > wrote:

> Also, unless things have changed significantly Dragon needs both a title
> and a label to recognize the form field.
>
>