What’s New in Accessibility WWDC21

Transcript

1. WHAT’S NEW IN ACCESSIBILITY YUMEMI.SWIFT #12 FEAT. HAKATA.SWIFT 〜WWDC RECAP～
2. ⾃⼰紹介 JIERONG LI (李) ▸ 株式会社ゆめみ ▸ iOSエンジニア ▸ KMMでAndroid開発キャッチアップ ▸ 永遠にリリースできず個⼈開発 ▸ https://jierong.dev
3. COVERED SESSIONS ▸ SwiftUI Accessibility: Beyond the basics ▸ Bring accessibility to charts in your app
4. PREVIEW WITHOUT RUNNING APP
5. CUSTOM VIEW IMPLEMENTATION SegmentedControl( selectedSegmentIndex: $selectedSegmentIndex ) { HStack { Image(systemName: "tray.full") Text("Inbox") Spacer() Text("\(tasks.count)") } HStack { Image(systemName: "archivebox") Text("Done") } }
6. CUSTOM VIEW ACCESSIBILITY PREVIEW ▸ Inbox Icon ▸ Label: Inbox Full ▸ Traits: .isImage ▸ Inbox Text ▸ Label: Inbox ▸ Traits: .isStaticText ▸ Count ▸ Label: 5 ▸ Traits: .isStaticText ▸ Done Icon ▸ Label: Archive ▸ Traits: .isImage ▸ Done Text ▸ Label: Done ▸ Traits: .isStaticText
7. CUSTOM VIEW EXPECTED ▸ Inbox ▸ Label: Inbox 5 ▸ Traits: .isButton 
 .isSelected ▸ Done ▸ Label: Done ▸ Traits: .isButton
8. CUSTOM VIEW BELOW IOS 15 SegmentedControl( selectedSegmentIndex: $selectedSegmentIndex ) { HStack { Image(systemName: "tray.full") Text("Inbox") Spacer() Text("\(tasks.count)") } ... }
9. CUSTOM VIEW BELOW IOS 15 SegmentedControl( selectedSegmentIndex: $selectedSegmentIndex ) { HStack { Image(systemName: "tray.full") Text("Inbox") Spacer() Text("\(tasks.count)") } .accessibilityElement(children: .ignore) ... }
10. CUSTOM VIEW BELOW IOS 15 SegmentedControl( selectedSegmentIndex: $selectedSegmentIndex ) { HStack { Image(systemName: "tray.full") Text("Inbox") Spacer() Text("\(tasks.count)") } .accessibilityElement(children: .ignore) .accessibility(label: Text(“\(tasks.count)”)) ... }
11. CUSTOM VIEW BELOW IOS 15 SegmentedControl( selectedSegmentIndex: $selectedSegmentIndex ) { HStack { Image(systemName: "tray.full") Text("Inbox") Spacer() Text("\(tasks.count)") } .accessibilityElement(children: .ignore) .accessibility(label: Text(“\(tasks.count)”)) .accessibility(addTraits: selectedSegmentIndex == 0 ? [.isButton, .isSelected] : [.isButton] ) ... }
12. CUSTOM VIEW IOS 15 AND ABOVE SegmentedControl( selectedSegmentIndex: $selectedSegmentIndex ) { HStack { Image(systemName: "tray.full") Text("Inbox") Spacer() Text("\(tasks.count)") } HStack { Image(systemName: "archivebox") Text("Done") } }
13. CUSTOM VIEW IOS 15 AND ABOVE SegmentedControl( selectedSegmentIndex: $selectedSegmentIndex ) { HStack { Image(systemName: "tray.full") Text("Inbox") Spacer() Text("\(tasks.count)") } HStack { Image(systemName: "archivebox") Text("Done") } } .accessibilityRepresentation { Picker("", selection: $selectedSegmentIndex) { Text("Inbox \(tasks.count)").tag(0) Text("Done").tag(1) } .pickerStyle(.segmented) }
14. EXTERNAL VIEW (CHARTVIEW) BELOW IOS 15 BarChart() .data(dataSet.map(\.value)) .chartStyle(chartStyle) 🤷
15. EXTERNAL VIEW (CHARTVIEW) IOS 15 AND ABOVE BarChart() .data(dataSet.map(\.value)) .chartStyle(chartStyle)
16. EXTERNAL VIEW (CHARTVIEW) IOS 15 AND ABOVE BarChart() .data(dataSet.map(\.value)) .chartStyle(chartStyle) .accessibilityChildren { HStack { ForEach(dataSet) { data in Rectangle() .accessibilityLabel(data.label) .accessibilityValue("\(data.value)") } } }
17. ROTOR BELOW IOS 15 UIKit Only
18. ROTOR IOS 15 AND ABOVE VStack { ForEach(lines) { line in Text(line.content) } } .accessibilityRotor("Titles") { ForEach(lines) { line in if line.isTitle { AccessibilityRotorEntry( line.content, id: line.id ) } } }
19. ROTOR IOS 15 AND ABOVE VStack { ForEach(lines) { line in Text(line.content) } } .accessibilityRotor(.headings) { ForEach(lines) { line in if line.isTitle { AccessibilityRotorEntry( line.content, id: line.id ) } } }
20. CONTROL FOCUS @ACCESSIBILITYFOCUSSTATE @AccessibilityFocusState var isFocused: Bool
21. CONTROL FOCUS @ACCESSIBILITYFOCUSSTATE struct NotificationBanner: View { @Binding var notification: Notification? @State var timer: Timer? @AccessibilityFocusState var isNotificationFocused: Bool var body: some View { content .accessibilityFocused(isNotificationFocused) } func startTimer() { timer = Timer.scheduledTimer( withTimeInterval: 3, repeats: true) { _ in if !isNotificationFocused { notification = nil } } } }
22. AUDIO GRAPH AXCHART protocol AXChart: NSObjectProtocol { var accessibilityChartDescriptor: AXChartDescriptor? { get set } }
23. AUDIO GRAPH AXCHART protocol AXChart: NSObjectProtocol { var accessibilityChartDescriptor: AXChartDescriptor? { get set } } class AXChartDescription: NSObject { convenience init( title: String? = nil, summary: String? = nil, xAxis: AXDataAxisDescriptor, yAxis: AXNumericDataAxisDescriptor? = nil, additionalAxes: [AXDataAxisDescriptor] = [], series: [AXDataSeriesDescriptor] ) ... }
24. ご清聴ありがとうございました