WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Focus Order/Hierarchy for Buttons Within Cards

for

From: Ryan E. Benson
Date: Jul 11, 2024 4:54AM

Hi Nick

Have you and read the following article by Heydon - Cards
(inclusive-components.design) <https://inclusive-components.design/cards/>?
It is rather long, but in short, instead of using an button element, you
are making a span element appear as a button and make the whole div
clickable.

--
Ryan E. Benson


On Wed, Jul 10, 2024 at 3:13 PM Nicolas Leonard < <EMAIL REMOVED> > wrote:

> Hi folks!
>
> I'm new to the forum, so please let me know if I'm doing anything wrong 😃
>
> We're working on some web components, including cards that contain an
> image, headline, description, and button. The entire card is wrapped in an
> <a> tag, which doesn't currently have a destination, but it will eventually
> have the same result as pressing the button. Whether you click the button
> or the anywhere in the card, you will perform the same action. In effect,
> the card becomes one big button. Some background: Mouse users will activate
> card-specific effects on hover, and we want to avoid excluding users who
> won't be hovering.
>
> <a class="card" tabindex="0">
> <div class="card-image">
> </div>
> <div class="card-text">
> <div class="card-heading">Heading</div>
> <div class="card-description">Description goes here.</div>
> <button tabindex="-1"><span class="icon"><img
> src="icon-download-white.svg"></span>Download (PDF 3.2 MB)</button>
> </div>
> </a>
>
> In the above code snippet, we're adding tab focus to the card, and
> removing tab focus from the button. I'm wondering which you all think is
> most ideal:
>
>
> * Tab to cards, not to buttons inside (as in the example code snippet)
> * Tab to buttons, skipping focus on cards
> * Tab to focus on card, tab again to focus on button inside card, tab
> to focus next card, tab to focus on button inside that card, etc.
>
> Thanks very much!!
> Nick
>
>
>
>
> [Vic CanAssist Logo]
> Nick Leonard
> he/him
> Marketing & Social Media
> 604-999-1418
> CanAssist at the University of Victoria
> CARSA, PO Box 1700, STN CSC
> Victoria, BC V8W 2Y2
> www.canassist.ca<;http://www.canassist.ca/>;
>
>
>
> We acknowledge and respect the lək̓ʷəŋən peoples on whose traditional
> territory the university stands, and the Songhees, Esquimalt and WSÁNEĆ
> peoples whose historical relationships with the land continue to this day.
>
> CONFIDENTIALITY NOTICE: This e-mail message, including any attachments, is
> for the sole use of the intended recipient(s) and may contain confidential
> and privileged information. Any unauthorized review, use, disclosure or
> distribution is prohibited. If you are not the intended recipient, please
> contact me immediately and destroy all copies of the original message.
> Thank you.
>
> > > > >