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.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Paul Adam
> Sent: Thursday, June 25, 2015 1:20 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Truncated links and titles
>
> That's not correct. VO OS X reads title of links with a default delay
> after reading the link text or Accessible name. iOS is the same with a very
> short delay.
>
> If you want to control how a screen reader speaks the link text then
> modify the accessible name eg aria-label.
>
> Sent from my iPhone
>
> > On Jun 25, 2015, at 10:51 AM, Jonathan C. Cohn < <EMAIL REMOVED> >
> wrote:
> >
> > Remember, that JAWS is not the only screen reader. VoiceOVer on the
> Macintosh will generally read the title rather than the screen text unless
> you interact with the element. I believe this will be OK in this situation,
> though on a specific web site there were onClick spans that VoiceOver
> would read click here for more inofrmation, and one would not know what you
> were supposed to find more information about.
> >
> >
> >
> >
> > Jonathan Cohn
> >
> >> On Jun 25, 2015, at 11:17 AM, Moore,Michael (HHSC) <
> <EMAIL REMOVED> > wrote:
> >>
> >> The title will not be read for a text link in JAWS by default. It
> requires the user make changes to their verbosity settings.
> >>
> >> Mike Moore
> >> Accessibility Coordinator
> >> Texas Health and Human Services Commission Civil Rights Office
> >> (512) 438-3431 (Office)
> >> (512) 574-0091 (Cell)
> >>
> >>
> >> -----Original Message-----
> >> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Steven Garvin
> >> Sent: Thursday, June 25, 2015 10:15 AM
> >> To: <EMAIL REMOVED>
> >> Subject: [WebAIM] Truncated links and titles
> >>
> >> Hi,
> >>
> >>
> >>
> >> I've been doing some research on acceptable uses of title attributes on
> links but can't seem to find anything on a piece of functionality we're
> about to implement. We have a list of links, each representing a
> user-entered data set. The link name is a title field which could be up to
> 100 characters long. In our application this will, in some instances, be
> too long to display and so needs to be truncated. The desired functionality
> is to display the shortened version on the link with the full string inside
> the title attribute on the link so that it will display as a tooltip. For
> example:
> >>
> >>
> >>
> >> <a href="#" title="This is the full title for the data set">This is the
> full.</a>
> >>
> >>
> >>
> >> My question is then, is this an acceptably accessible solution? My
> understanding is that JAWS for one will read both the link name and the
> title, which seems a bit wrong to me. Is the solution to add an Aria-label
> with the full title?
> >>
> >>
> >>
> >> Thanks,
> >>
> >>
> >>
> >> Steven
> >>
> >>
> >>
> >>
> >> > >> > archives at http://webaim.org/discussion/archives
> >> > >> > >> > >> > >> > > > > > > > > > > > > >
> > > > >