SwiftUI Fundamentals
Build and review a complete SwiftUI learning app that adapts across devices, input methods, text sizes, and assistive technologies.
Before you begin
Learning stage
Accessibility begins with semantic structure. Native controls already communicate roles and interaction. Custom compositions may need children combined, decorative images hidden, or labels and values added so the spoken interface conveys the same meaning as the visual one. An accessibility label names an element; a value communicates its current state; a hint explains a non-obvious result sparingly.
Adaptive design responds to available space and user settings rather than detecting one device model. Support Dynamic Type, sufficient contrast, VoiceOver order, Reduce Motion, button shapes, localization, keyboard input, and different window widths. Use flexible layout first and introduce ViewThatFits or size-class choices when content genuinely needs another arrangement.
The mini project is a learning tracker with a lesson list, detail navigation, completion state, search, an editor sheet, async loading simulation, animation, and accessible progress. Build it in vertical slices: model and sample data, list states, navigation and detail, editing, async behavior, then accessibility and adaptive review.
Learning stage
The progress component preserves the visual design while presenting one concise, actionable accessibility element.
import SwiftUI
struct AccessibleProgress: View {
let completed: Int
let total: Int
private var fraction: Double {
total == 0 ? 0 : Double(completed) / Double(total)
}
var body: some View {
ViewThatFits(in: .horizontal) {
HStack {
Text("Course progress")
Spacer()
ProgressView(value: fraction) { EmptyView() }
.frame(maxWidth: 180)
Text("(completed) of (total)")
}
VStack(alignment: .leading, spacing: 8) {
Text("Course progress")
ProgressView(value: fraction)
Text("(completed) of (total)")
}
}
.accessibilityElement(children: .ignore)
.accessibilityLabel("Course progress")
.accessibilityValue("(completed) of (total) lessons complete")
}
}Learning stage
Connect the SwiftUI concept to complete, maintainable application features.
Learning stage
Identify patterns that weaken ownership, identity, adaptation, accessibility, or user experience.
Learning stage
Build the behavior in a small Xcode project and review it in multiple states.
Activity 1
Create the mini app with identified lesson models, observable shared state, search, list states, NavigationStack detail, completion binding, an editor sheet, async loading, and one purposeful animation.
Hint: Build one working vertical slice at a time and keep external services replaceable with sample implementations.
Activity 2
Test the project with VoiceOver, an accessibility text size, Reduce Motion, narrow and wide windows, increased contrast, and a long translated string. Record and fix at least five issues.
Hint: Verify task completion, not only whether every element can receive focus.
Learning stage
Answer each question before revealing the explanation.
QUESTION 1
The label names the element; the value describes its current state
For progress, the label might be “Course progress” and the value “6 of 10 lessons complete.”
QUESTION 2
The available space, content, and user settings—not a hard-coded device model.
Windows resize, text grows, and localization changes content even on the same hardware.
Learning stage
Explain the design in terms of data flow, identity, lifecycle, platform behavior, and trade-offs.
Short answer: Start with semantic native controls, flexible content, and real task-based testing with accessibility settings and assistive technologies.
I make the hierarchy meaningful first, then add labels, values, traits, grouping, or actions only where the default semantics are insufficient. I test Dynamic Type, VoiceOver order and actions, contrast, Reduce Motion, localization, and multiple widths. I verify that a user can complete the feature, not merely that elements are announced.
Possible follow-ups
Learning stage
A SwiftUI interface is complete only when people can understand and operate it across content sizes, windows, languages, and assistive technologies. The mini project turns isolated APIs into one coherent, reviewable feature.