WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Focus Order/Hierarchy for Buttons Within Cards

for

From: Steve Green
Date: Jul 11, 2024 5:01AM

There are a number of accessible design patterns, but wrapping an <a> element around everything is definitely not one of them even though a lot of people still do that.

In the past, it was common to put a JavaScript event handler on the container <div> element. This was not a terrible solution as long as the container did not receive focus. It meant that mouse users could click anywhere on the card, while keyboard users could tab to the button or link in the card. The event handler was invisible to assistive technologies, although some might announce it as "clickable" depending on their settings.

I was just about to recommend Heydon Pickering's design, but Ryan beat me to it. The demo page is at https://heydon.github.io/Inclusive-Components/cards-pseudo-content/, and we recommend this, or variants of it, to our clients because it does not use JavaScript at all. One change we often make is to put the <a> element around a "call to action" phrase rather than around the heading, but it depends on the card's contents.

Steve Green
Managing Director
Test Partners Ltd