Accessibility for Custom Controls

Context

Custom controls are easy to make and easy to ship without enough accessibility work. The fix is not a giant framework rewrite. It is a small set of habits that make the control understandable to more users.

The snippet

Button {
    isOn.toggle()
} label: {
    Label("Enable alerts", systemImage: "bell")
}
.accessibilityLabel("Enable alerts")
.accessibilityHint("Turns notification alerts on or off")

Why this works

The control now speaks in the language of the action instead of only the icon. That helps VoiceOver users, but it also helps anyone scanning the UI quickly.

Use it when:

• the control uses only an icon or custom drawing
• the visible label is not enough to explain the action
• the tap target needs a clearer semantic name

Avoid it when:

• the default button text already says enough
• the control is purely decorative
• you are adding accessibility text that repeats the visible label word for word

Takeaway: Accessible custom controls say what they do, not just what they look like.

Next steps

• Creating a Custom ButtonStyle Systematically
• Using @FocusState for Better Form UX
• SF Symbols: Icons as Design Data