WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Linking article previews

for

From: glen walker
Date: Jul 20, 2019 9:38AM

How about remove the click handler on the <div> and let the article title
link just do it's job. You can associate the extra metadata (article type,
date, first sentence) with the link using aria-describedby.

Old code:

<div click="yourstuff()">
<p>article type</p>
<a href="article.html">title</p>
<p>first sentence</p>
<p>date</p>
</div>

New code

<div>
<p id="one">article type</p>
<a href="article.html" aria-describedby="one three two">title</p>
<p id="two">first sentence</p>
<p id="three">date</p>
</div>



On Fri, Jul 19, 2019 at 11:50 AM Brian Lovely via WebAIM-Forum <
<EMAIL REMOVED> > wrote:

> There are some article previews that have the article type, title, first
> sentence, and publish date in a div. They are listening for mouse events on
> the div, but there is no actionable element at all. Currently clicking on
> the div opens the article page in another tab. I told them to make the
> article title into a link, but now if someone clicks on the link, two tabs
> are opened.
>
> I don't want to wrap the entire div in a link and have the link text be all
> that hoo hah.
>
> Any suggestions on how to avoid this?
>
>
> *Brian Lovely*
> Capital One Digital Accessibility
> 804.389.1064
> >
> The information contained in this e-mail is confidential and/or
> proprietary to Capital One and/or its affiliates and may only be used
> solely in performance of work or services for Capital One. The information
> transmitted herewith is intended only for use by the individual or entity
> to which it is addressed. If the reader of this message is not the intended
> recipient, you are hereby notified that any review, retransmission,
> dissemination, distribution, copying or other use of, or taking of any
> action in reliance upon this information is strictly prohibited. If you
> have received this communication in error, please contact the sender and
> delete the material from your computer.
> > > > >