WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Focus Order/Hierarchy for Buttons Within Cards

for

From: Jon Bodnar
Date: Jul 10, 2024 2:13PM

Hi Nick,

I'm not sure of the 'protocol' for the list, and I rarely respond to messages, but for what it's worth, here's what I'd suggest:

Remove the wrapping link. Make it either a <div> or an <li> - an <li>if your card appears in what would be semantically considered a list of items for possible download, although your <div> could be a child of the <li>. Links and buttons inside of links and buttons is a practice best avoided and often creates problems for screen readers and non-mouse users.

Remove all the setting of the tab indexes. There's likely no reason for it and messing with the tab index can become problematic for non-mouse (keyboard/switch device) users. Also, according to the spec, links aren't permitted child elements with explicit tabindex settings.

If you do those things, I see no reason to think you'd be excluding non-mouse (keyboard / switch device) users. They'll be doing the equivalent of 'tabbing' through your page / interface. Buttons and links are both interactive and will natively handle focus on either and in the order in which they appear in the html, unless someone messes with their tabindex.

You might also consider simply making your button a link with a download attribute and styling it visually to look like a button. I personally use links for page navigation (internal and external) and downloads as it's their expected behavior and I use buttons for interactive activities other than those.

I hope that helps,

-Jon

-----

Jonathan Bodnar
Web Services Lead | Library Technology Project Manager
Digital Library Services