WebAIM - Web Accessibility In Mind

E-mail List Archives

Focus Order/Hierarchy for Buttons Within Cards

for

From: Nicolas Leonard
Date: Jul 10, 2024 1:13PM

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.