WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender][EXTERNAL]Linking article previews

for

From: Brian Lovely
Date: Jul 22, 2019 7:33AM

Mark, that might work. I assume that the contents of the div would still be
discoverable with the virtual cursor.

On Mon, Jul 22, 2019 at 5:27 AM Mark Magennis < <EMAIL REMOVED> >
wrote:

> Glen, a problem with this approach is that the whole on-screen area of the
> article is no longer clickable. You have to click on the title.
>
> Brian, an approach that may work for you is to make the container a <div
> role="link" tabindex="0" aria-label="article_title"> (using the actual
> title of course).
>
> Mark
>
> Mark Magennis
> Skillsoft | mobile: +353 87 60 60 162
> Accessibility Specialist
>
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> glen walker
> Sent: 20 July 2019 16:38
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: [EXTERNAL] Re: [WebAIM] Linking article previews
>
> 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.
> > > > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=e3ON0Aq9lcJwGMJ6v2VvjK0ECSx90FtQ1kP3PHTSm1I&s=3wAuZDmW02lP6989eK1kaO311Yzah6pOu9AhbRSSe7c&e=
> > List archives at
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=e3ON0Aq9lcJwGMJ6v2VvjK0ECSx90FtQ1kP3PHTSm1I&s=vSsVwfYVuoK-4O-doUfeg2Fv6n5FDY0NW-p3L5PnNkg&e=
> > > >
> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=e3ON0Aq9lcJwGMJ6v2VvjK0ECSx90FtQ1kP3PHTSm1I&s=3wAuZDmW02lP6989eK1kaO311Yzah6pOu9AhbRSSe7c&e=
> List archives at
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=e3ON0Aq9lcJwGMJ6v2VvjK0ECSx90FtQ1kP3PHTSm1I&s=vSsVwfYVuoK-4O-doUfeg2Fv6n5FDY0NW-p3L5PnNkg&e=
> > > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=e3ON0Aq9lcJwGMJ6v2VvjK0ECSx90FtQ1kP3PHTSm1I&s=3wAuZDmW02lP6989eK1kaO311Yzah6pOu9AhbRSSe7c&e=
> List archives at
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=e3ON0Aq9lcJwGMJ6v2VvjK0ECSx90FtQ1kP3PHTSm1I&s=vSsVwfYVuoK-4O-doUfeg2Fv6n5FDY0NW-p3L5PnNkg&e=
> >


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