WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Long links around teasers - best practices?

for

From: Birkir R. Gunnarsson
Date: Jun 5, 2018 5:33AM

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 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.