WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Brian Lovely
Date: Jul 22, 2019 9:15AM

" you might find a combination that doesn't like something in it" --ain't
that the truth

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

> No reason why not. The title would be read twice though. Once as the link
> text and once as itself. You could add aria-hidden to the title to prevent
> that. You could even use aria-labelledby instead of aria-label because it's
> a bit more elegant and I think it will still work even when it's pointing
> at a hidden element.
>
> You would have to test this across all your supported browser/screen
> reader combinations though because it's possible that you might find a
> combination that doesn't like something in it, e.g. an aria-label on a div
> even if it has a link role.
>
> Mark
>
> Mark Magennis
> Skillsoft | mobile: +353 87 60 60 162
> Accessibility Specialist
>
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Brian Lovely via WebAIM-Forum
> Sent: 22 July 2019 14:34
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Cc: Brian Lovely < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] [External Sender] Re: [EXTERNAL] Re: Linking article
> previews
>
> 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.
> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=PLArPxH9LCj8pHdQz6WswscJAiiGmCM7s9naTSbOJ4o&s=zJ-Kq4xP-XT79W_FVmv8H9x3Nc_rXav-Gk5Th84O_VI&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=PLArPxH9LCj8pHdQz6WswscJAiiGmCM7s9naTSbOJ4o&s=o6q7ywFylSywmiC23yl1MMvMoL-sd1hrNod8EVp7Emw&e=
> > > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=PLArPxH9LCj8pHdQz6WswscJAiiGmCM7s9naTSbOJ4o&s=zJ-Kq4xP-XT79W_FVmv8H9x3Nc_rXav-Gk5Th84O_VI&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=PLArPxH9LCj8pHdQz6WswscJAiiGmCM7s9naTSbOJ4o&s=o6q7ywFylSywmiC23yl1MMvMoL-sd1hrNod8EVp7Emw&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.