Making a custom card accessible

Accessibility & localization Senior Swift 5.0+ iOS 17+ Reviewed By Alok Singh

Pick the fix

A product card has an image, title, price, rating and a heart button. VoiceOver stops on each piece. Best fix?

Options
Hint 1 of 1

One stop, all actions.

Choose an answer, then open Show answer below to check it.

Show answer

Answer: A Combine it into one element labelled with title, price and rating, add the button trait, and expose 'Favourite' as a custom action

Correct. It's one stop with all actions available.

Why not the others?
  • B Hide the card from accessibility. VoiceOver users can't use it at all.
  • C Add a hint to every subview. There are still five stops, now with more speech.
  • D Make the image the only accessible element. The label would lack price and rating.

30-second answer

Combine the card into one accessibility element with a clear label (title, key details, state) so VoiceOver reads it in one stop, and expose its secondary buttons as custom actions. Give it the button trait if tapping opens it. Use text styles and let the layout reflow vertically at accessibility sizes, keep tap targets at least 44 by 44 points, and check contrast in light and dark mode.

Practise saying it · 45 s. No recording, just a timer

Explain an accessible custom card.

Say your answer out loud, then check which of these points you covered:

  • One combined element
  • Custom actions
  • Reflow at large sizes
  • Targets and contrast

Deep dive

.accessibilityElement(children: .combine) merges child labels; .ignore lets you write your own.

.accessibilityAction(named:) adds actions to the rotor.

Sort order matters: use accessibilitySortPriority if needed.

Test with VoiceOver, Voice Control and the largest text size.

Common mistakes

  • Every label inside the card is a separate stop.
  • Secondary buttons unreachable with VoiceOver.

Senior take & follow-ups

Seniors design the card's accessibility as one coherent element.

Follow-up questions

Think of your answer first, then open the hint.

  1. How do VoiceOver users reach the card's favourite button?

    Show hint

    A custom action.

  2. What does Voice Control need?

    Show hint

    Visible labels that match accessibility labels.

Related questions

Try it in a free tool

From the author

Catalog - UI

Made by the author: browse UIKit and SwiftUI components with live demos, and copy their code snippets into your project.

See the appApp Store

Suggest a fix if something here is wrong or out of date.