9

WCAG AA Compliance and Card Patterns

over 1 year ago from , Associate Creative Director @ Rightpoint

Question on product cards and WCAG AA compliance.

Reference image: https://imgur.com/VRiZnS7

We are specifically questioning the link styles of this clickable cards—which take you to a new page.

Each card you see has a focus + hover state for the title to underline.

Callout A: Is the arrow next to the title required in order to be AA compliant, or is the context of this element as a clickable card clear enough?

Callout B: Here, a similar card treatment. Is the context of being surrounded by other cards enough to indicate that they are clickable, or is a visual indication required for the title text?

Again, this is all assuming proper focus states. This is a responsive page.

Thanks in advance for any insight! I've found some best practice information in regards to cards and accessibility, but having a difficult time interpreting specific success criterion for card patterns.

8 comments

  • Alex CarpenterAlex Carpenter, over 1 year ago

    Here is a good resource for card accessibility https://inclusive-components.design/cards/

    8 points
  • Matthew Morek, over 1 year ago

    I don't think vision deficiencies were taken into account in this example. Accessibility isn't just about screeen readers but about making the content accessible to everyone.

    The problem I see with the card links in your exmaple is that there is no clear signifier even for people with 20/20 eyesight and no vision deficiencies. To me they just look like a different way to present static content (with a mild exception for A, because it has an arrow pointing to the right, which might signify a link).

    In addition, reliance on :hover and :focus states is a one-way street, as not all people will use them, especially on touchscreens. Adding a bit of colour to the link might a be a good first step to signify a link on a base level, then go a step further and add something like an arrow to the anchor text itsels that will signify going to another page (, etc).

    Also, if you rely on box-shadow alone, make sure to add an outline of some sort to the :focus state.

    These aren't rules, but just guidelines from a few years of testing different content types and presentation for links with users, where accessibility was paramount to the end-experience. WCAG AA won't tell you everything, but it's a great start.

    3 points
  • Steven CavinsSteven Cavins, over 1 year ago

    I don't think you need a visual link indicator to validate...at least I have yet to see that come up in an audit. In either case, an icon which may be arbitrary or not even visible to some customers is not necessarily going to be an indicator of WCAG validation.

    Screen readers will identify it as a link if you've got it marked up correctly, and you've got your focus/hover states. The question for you would be if the copy is clear and good, and if you're following or breaking established patterns that customers may rely on for this kind of behavior.

    3 points
    • Ben RamseyBen Ramsey, over 1 year ago

      thanks! that's what we were thinking — but wanted to confirm without leading. good advice + considerations.

      0 points
  • Andrew C, over 1 year ago

    1) The colours themselves do not pass. The small font on each card (#7B7C80 or so which I pulled from a quick eyedrop) only has a 4.2 contrast ratio. You can use this tool to check it (http://contrast-ratio.com/#%237B7C80-on-white) so you need to either darken that or increase the font size to 18pt.

    2) This design may simply have general usability problems – improving this benefits every user. Context is important though—if the entire site is a repo of websites you're providing for inspiration then a user may assume each card is a link... but maybe including a link action on the bottom right would make that association stronger. Can someone using it anticipate what an action will do? In this case you can simply measure that with a user test asking them to explain your website, followed by a task analysis usability test.

    I would assume this current design is not accessible. I say this because of what you said about focus and hover states...

    3) Cards generally shouldn't have focus states associated with them. This is not for just for blind users, it's for those with motor function impairments. The general rule of thumb is that only interactive elements should be in the tab order—so the link title should be the thing highlighting when a user hits TAB. It's highly unusual for someone to tab to a block-level parent. You'd also need to use aria-labeling to provide additional context.

    Lastly, ensure you're using semantics properly too. That's proper HTML. Links should always be anchors like Link with any additional aria label or aria-labelledby tags put in there for screen readers.

    Good luck! Honestly once you start designing with accessibility at the forefront your designs will improve from the outset, since half the battle of accessible digital experiences is simply good usability.

    1 point
    • Ben RamseyBen Ramsey, over 1 year ago

      Thanks! The body text is #767676 and passes all but AAA normal sized text.

      Agreed on the card block itself focusing — was oversimplifying to state that the link would have the focus/hover on non-touchscreen devices. None of the cards have multiple actions.

      We removed the real copy, as this is client work. The context will improve clarity that these are links.

      The designs will ultimately be user tested and optimized. We're currently interested in the AA success criterion to meet the legal team's requirements.

      Do the titles need to appear in a different color because they do not have a visual identifier such as an underline? Or does that requirement strictly apply to body copy links.

      Looking at "Link Style"section https://webaim.org/techniques/hypertext/link_text

      0 points