Ios accessibility skill

Every interactive element needs accessibility labels:

by wondelai·MIT license·★ 2,235 Stars on the repo·GitHub ↗

Use now

wondelai/main1 file

accessibility.md1.3 KB

accessibility.md

Show the full text64 lines

ios-accessibility/accessibility.md64 lines · 1.3 KB

PreviewCode

Outline

RawView on GitHub

iOS Accessibility

VoiceOver Support

Every interactive element needs accessibility labels:

// Accessible label (what it is)
Image(systemName: "heart.fill")
    .accessibilityLabel("Favorite")

// Accessible value (current state)
Slider(value: $volume)
    .accessibilityLabel("Volume")
    .accessibilityValue("\(Int(volume * 100))%")

// Accessible hint (what it does)
Button("Share") { share() }
    .accessibilityHint("Shares this item with others")

// Group related elements
HStack {
    Image(systemName: "person")
    Text("John Doe")
}
.accessibilityElement(children: .combine)

Dynamic Type

Support user font size preferences:

// Use semantic text styles (automatically scales)
Text("Content")
    .font(.body)

// For custom fonts, scale with Dynamic Type
@ScaledMetric var customSize: CGFloat = 16

Text("Custom")
    .font(.system(size: customSize))

High Contrast Mode

@Environment(\.colorSchemeContrast) var contrast

var textColor: Color {
    contrast == .increased ? .primary : .secondary
}

Accessibility Checklist

All images have accessibility labels
Touch targets are minimum 44×44pt
Text scales with Dynamic Type
Color contrast meets WCAG standards
Motion can be reduced
VoiceOver navigation is logical
Don't rely solely on color to convey meaning

1	# iOS Accessibility
2
3	## VoiceOver Support
4
5	Every interactive element needs accessibility labels:
6
7	```swift
8	// Accessible label (what it is)
9	Image(systemName: "heart.fill")
10	.accessibilityLabel("Favorite")
11
12	// Accessible value (current state)
13	Slider(value: $volume)
14	.accessibilityLabel("Volume")
15	.accessibilityValue("\(Int(volume * 100))%")
16
17	// Accessible hint (what it does)
18	Button("Share") { share() }
19	.accessibilityHint("Shares this item with others")
20
21	// Group related elements
22	HStack {
23	Image(systemName: "person")
24	Text("John Doe")
25	}
26	.accessibilityElement(children: .combine)
27	```
28
29	## Dynamic Type
30
31	Support user font size preferences:
32
33	```swift
34	// Use semantic text styles (automatically scales)
35	Text("Content")
36	.font(.body)
37
38	// For custom fonts, scale with Dynamic Type
39	@ScaledMetric var customSize: CGFloat = 16
40
41	Text("Custom")
42	.font(.system(size: customSize))
43	```
44
45	## High Contrast Mode
46
47	```swift
48	@Environment(\.colorSchemeContrast) var contrast
49
50	var textColor: Color {
51	contrast == .increased ? .primary : .secondary
52	}
53	```
54
55	## Accessibility Checklist
56
57	- [ ] All images have accessibility labels
58	- [ ] Touch targets are minimum 44×44pt
59	- [ ] Text scales with Dynamic Type
60	- [ ] Color contrast meets WCAG standards
61	- [ ] Motion can be reduced
62	- [ ] VoiceOver navigation is logical
63	- [ ] Don't rely solely on color to convey meaning
64