WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Focus Order/Hierarchy for Buttons Within Cards

for

From: Albert Bretado
Date: Jul 10, 2024 1:58PM

Hi Nick,


Option 3, in my opinion, would be the most accessible. Although it would require more tab navigation for keyboard users, this ensures all interactive elements are reachable.



Thank you,



Albert Bretado
Web Developer, Marketing and Communications
CPRO, California School Employees Association, Chapter 477



From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of Nicolas Leonard < <EMAIL REMOVED> >
Sent: Wednesday, July 10, 2024 12:13 PM
To: ' <EMAIL REMOVED> ' < <EMAIL REMOVED> >
Subject: [EXTERNAL] [WebAIM] Focus Order/Hierarchy for Buttons Within Cards

[You don't often get email from <EMAIL REMOVED> . Learn why this is important at https://aka.ms/LearnAboutSenderIdentification ]

CAUTION: This email originated from outside the organization. Do not click links or open attachments unless you recognize the sender and know that the content is safe.

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