WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL]Card UX: Wrapping cards in an unordered list and Nesting when using anchor elements

for

From: Mark Magennis
Date: Nov 20, 2020 2:25AM

Hi Dan,

Like Steve, I encounter strips of cards a lot because my company uses them frequently in its products. The cards are complex, typically containing images, headings, text, links, buttons, and menus. There is no problem with putting the cards into a list.

In terms of links that are headings and whether the link is best within the heading or the heading within the link, I have found the following to be true in my testing. I've also looked at headings that are buttons.

- If a heading is a link, it is best if the link is within the heading.
- If the heading is within the link there are some issues in VoiceOver/Safari.
- If a heading is a button, the button must be within the heading.

I've only tested using Win10/NVDA/Firefox, Win10/Jaws/IE11, and MacOS/VoiceOver/Safari as this is what our customer base demands.

In NVDA/Firefox there is no difference.

In JAWS/IE11, headings that are within buttons aren't announced as headings when the button is tabbed to or arrowed to and cannot be navigated to using the 'h' shortcut. For links, there is no difference.

In VoiceOver/Safari, headings that are within buttons or links aren't announced as headings when the button is tabbed to or arrowed to. Headings within buttons cannot be navigated to using the 'h' shortcut. Headings within links can be navigated to using the 'h' shortcut but the heading level is not announced.

There may also be an affect on the clickable area because a heading is a block level element whereas a link is an inline element. So notwithstanding other CSS treatments, if the link is within the heading, only the text is clickable. Whereas if the heading is within the link, the entire rectangular area encompassing the heading becomes clickable.

Mark