Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What’s New in Accessibility WWDC21

What’s New in Accessibility WWDC21

8ab71237da39f6b1ec47da53f33c3ec8?s=128

Jierong Li

June 28, 2021
Tweet

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. ご清聴ありがとうございました