E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Detlev Fischer
Date: Tue, Jun 05 2018 4:00AM
Subject: Long links around teasers - best practices?
No previous message | Next message →

You all know these: Links including both heading and a longish teaser
text. When focused with a screeenreader, the whole text gets read out,
the role (this is a link) comes right at the end. I wonder what people
recommend as best practice here, accessibility-wise:

1. not include the teaser text in link, just link the heading (this
decreases click / tab area and focus for sighted users)

2. trigger the (redundant) click tab on the teaser text via some script
so SR users get a short link followed by text?

3. leave as is, but use aria-label to supply a short link text alternative?

4. accept as-is, working on the assumption that SDR users are by now
familiar with those constructs and can manage just fine?

5. anything else?

Detlev



---
Diese E-Mail wurde von Avast Antivirus-Software auf Viren geprüft.
https://www.avast.com/antivirus

From: Mallory
Date: Tue, Jun 05 2018 4:05AM
Subject: Re: Long links around teasers - best practices?
← Previous message | Next message →

I often tend to do something like #2.

One problem with that is it interfering with text copypasta. I've wanted to copy text with a mouse for various crazy reasons so I always expect wherever I have plain text that someone, somewhere, may want to copy it.
There's often an image involved as well. Since my right-click has been busted for years, I have it turned on in my OS to listen for a long left-click, which eventually can give me the context menu so I can do right-clicky things... but this still sends out the left-click, therefore click() event :( (for inspecting the image or opening it in a new tab, etc).

Heydon has an example hacky JavaScript that listens for mousedowns and then checks if mouseup occurs after some minimum length of time, cancelling the click event. But it's pretty hacked, and I wonder the implications for WCAG 2.1's Pointer Cancellation (though the down is just listening and only the up is doing the job, so it *should* be fine).

cheers,
_mallory

On Tue, Jun 5, 2018, at 12:00 PM, Detlev Fischer wrote:
> You all know these: Links including both heading and a longish teaser
> text. When focused with a screeenreader, the whole text gets read out,
> the role (this is a link) comes right at the end. I wonder what people
> recommend as best practice here, accessibility-wise:
>
> 1. not include the teaser text in link, just link the heading (this
> decreases click / tab area and focus for sighted users)
>
> 2. trigger the (redundant) click tab on the teaser text via some script
> so SR users get a short link followed by text?
>
> 3. leave as is, but use aria-label to supply a short link text alternative?
>
> 4. accept as-is, working on the assumption that SDR users are by now
> familiar with those constructs and can manage just fine?
>
> 5. anything else?
>
> Detlev
>
>
>
> ---
> Diese E-Mail wurde von Avast Antivirus-Software auf Viren geprüft.
> https://www.avast.com/antivirus
>
> > > >

From: Birkir R. Gunnarsson
Date: Tue, Jun 05 2018 5:33AM
Subject: Re: Long links around teasers - best practices?
← Previous message | Next message →

I think some version of #2 is best.
You don't want to use aria-label, it will override the visible text,
and the teaser text is probably there for a reason so it has
information that user needs to have access to.
You could code the actal link text as a heading, a heading can be
contained in a link, so screen reader users can navigate by headings
and hear on the short text.
<a href="#">
<h4>Super sale on moon flights</h4>
<span class="teaser">Tired of earthly politics, outrage and crap,
we'll take you to the moon, maybe it really is made of cheese, make
sure you're not allergic to dairy</span>
</a>



On 6/5/18, Mallory < = EMAIL ADDRESS REMOVED = > wrote:
> I often tend to do something like #2.
>
> One problem with that is it interfering with text copypasta. I've wanted to
> copy text with a mouse for various crazy reasons so I always expect wherever
> I have plain text that someone, somewhere, may want to copy it.
> There's often an image involved as well. Since my right-click has been
> busted for years, I have it turned on in my OS to listen for a long
> left-click, which eventually can give me the context menu so I can do
> right-clicky things... but this still sends out the left-click, therefore
> click() event :( (for inspecting the image or opening it in a new tab,
> etc).
>
> Heydon has an example hacky JavaScript that listens for mousedowns and then
> checks if mouseup occurs after some minimum length of time, cancelling the
> click event. But it's pretty hacked, and I wonder the implications for WCAG
> 2.1's Pointer Cancellation (though the down is just listening and only the
> up is doing the job, so it *should* be fine).
>
> cheers,
> _mallory
>
> On Tue, Jun 5, 2018, at 12:00 PM, Detlev Fischer wrote:
>> You all know these: Links including both heading and a longish teaser
>> text. When focused with a screeenreader, the whole text gets read out,
>> the role (this is a link) comes right at the end. I wonder what people
>> recommend as best practice here, accessibility-wise:
>>
>> 1. not include the teaser text in link, just link the heading (this
>> decreases click / tab area and focus for sighted users)
>>
>> 2. trigger the (redundant) click tab on the teaser text via some script
>> so SR users get a short link followed by text?
>>
>> 3. leave as is, but use aria-label to supply a short link text
>> alternative?
>>
>> 4. accept as-is, working on the assumption that SDR users are by now
>> familiar with those constructs and can manage just fine?
>>
>> 5. anything else?
>>
>> Detlev
>>
>>
>>
>> ---
>> Diese E-Mail wurde von Avast Antivirus-Software auf Viren geprüft.
>> https://www.avast.com/antivirus
>>
>> >> >> >> > > > > >


--
Work hard. Have fun. Make history.

From: IL Holdsworth
Date: Tue, Jun 05 2018 8:08AM
Subject: Re: Long links around teasers - best practices?
← Previous message | No next message

If the link were just the header, isn't there some way of reliably increasing the space taken up by the link so that it overlays the teaser text, then fiddling with the z-index so that the invisible overlay gets clicked instead of the static header text?

Apologies if I'm way out here - I'm no design guru - but this is the approach I'd be attempting.