Building Accessible Maps and Navigation, SwiftConf 2023

Are you completely lost on how to make the navigation part of your application accessible? Maps and navigation can be made accessible just like any other UI component in your application. In this talk, you'll learn the best practices for how to make your maps more accessible, and what pitfalls to avoid. We'll look at existing mapping applications as examples and discuss the limits of accessibility with MapKit and Google's Maps SDK.

Transcript

1. @@export_scripts@@ Accessible Maps and Navigation
2. @@export_scripts@@ Insert attention catching introduction here
3. @@export_scripts@@ Best practice #1
4. @@export_scripts@@ Challenge why you have a map in the first place
5. @@export_scripts@@ Example #1 Facebook Marketplace
6. @@export_scripts@@ Challenge what kind of map you need
7. @@export_scripts@@
8. @@export_scripts@@ Best practice #2
9. @@export_scripts@@ Let users choose to see your map
10. @@export_scripts@@ Example #2 Airbnb
11. @@export_scripts@@ Best practice #3
12. @@export_scripts@@ Expose your map details to assistive technology
13. @@export_scripts@@ MKAnnotation let annotation = MKPointAnnotation() annotation.title = "Title"
14. @@export_scripts@@ Map pin Map pin Map pin Map pin Map pin Map pin
15. @@export_scripts@@ MKAnnotationView let annotationView = MKMarkerAnnotationView(annotation: annotation, reuseIdentifier: "") annotationView.accessibilityLabel = "Label"
16. @@export_scripts@@ Google Maps SDK
17. @@export_scripts@@ Google Maps Markers let marker = GMSMarker() marker.title = "Title" marker.accessibilityLabel = "Label"
18. @@export_scripts@@ Google Maps gmsMapView.accessibilityElementsHidden = false
19. @@export_scripts@@ Best practice #4
20. @@export_scripts@@ Take care of the accessibility basics
21. @@export_scripts@@ An accessible map... supports portrait and landscape orientations supports light and dark mode doesn't override system gestures
22. @@export_scripts@@ An accessible annotation... has an accessibility label is big enough (44 x 44 px) allows dynamic type is localized scales glyphs as well as text combines text, images, and color to show meaning has enough contrast
23. @@export_scripts@@ Best practice #5
24. @@export_scripts@@ Simplify the user experience.
25. @@export_scripts@@ Custom Actions
26. @@export_scripts@@ UIAccessibilityCustomAction let name = "Toggle Favorite" let actionToggleFavorite = UIAccessibilityCustomAction(name: name) { // Do action return true|false }
27. @@export_scripts@@ accessibilityCustomActions let detailView: UIView detailView.accessibilityCustomActions = [ actionToggleFavorite, ... ]
28. @@export_scripts@@ Custom Actions let favoriteButton: UIButton favoriteButton .isAccessibilityElement = false
29. @@export_scripts@@ Custom Actions
30. @@export_scripts@@ VoiceOver Rotor
31. @@export_scripts@@ Rotor - Name let name = "Museums" let museumsRotor = UIAccessibilityCustomRotor(name: name) { ... }
32. @@export_scripts@@ Rotor - Current Index let museums: [MKAnnotationView] let museumsRotor = UIAccessibilityCustomRotor(name: name) { predicate in let currentElement = predicate .currentItem .targetElement as? MKAnnotationView let currentIndex = museums .firstIndex { $0 == currentElement } ... }
33. @@export_scripts@@ Rotor - Target Index ... let currentIndex = museums .firstIndex { $0 == currentElement } let targetIndex: Int switch predicate.searchDirection { case .previous: targetIndex = (currentIndex ?? 1) - 1 case .next: targetIndex = (currentIndex ?? -1) + 1 } guard 0..<museums.count ~= targetIndex else { return nil } ... }
34. @@export_scripts@@ Rotor - Rotor Item Result let museums: [MKAnnotationView] let targetIndex: Int ... return UIAccessibilityCustomRotorItemResult( targetElement: museums[targetIndex], targetRange: nil) ...
35. @@export_scripts@@ Rotor - All Together let museums: [MKAnnotationView] let name = "Museums" let museumsRotor = UIAccessibilityCustomRotor(name: name) { let currentElement = predicate .currentItem .targetElement as? MKAnnotationView let currentIndex = museums .firstIndex { $0 == currentElement } let targetIndex: Int switch predicate.searchDirection { case .previous: targetIndex = (currentIndex ?? 1) - 1 case .next: targetIndex = (currentIndex ?? -1) + 1 } guard 0..<favorites.count ~= targetIndex else { return nil } return UIAccessibilityCustomRotorItemResult( targetElement: museums[targetIndex], targetRange: nil) }
36. @@export_scripts@@ Rotor - Map View // MapKit mkMapView.accessibilityCustomRotors = [museumsRotor] // Google Maps gmsMapView.accessibilityCustomRotors = [museumsRotor]
37. @@export_scripts@@ Categories
38. @@export_scripts@@ Best practice #6
39. @@export_scripts@@ Make it BIG
40. @@export_scripts@@ Best practice #7
41. @@export_scripts@@ Use wheelchair access information
42. @@export_scripts@@ Google Places API https://maps.googleapis.com /maps/api/place/details/json ?place_id=PLACE_ID &key=YOUR_API_KEY &fields=wheelchair_accessible_entrance
43. @@export_scripts@@ Best practice #8
44. @@export_scripts@@ Keep the layout clean and simple
45. @@export_scripts@@ Best practice #9
46. @@export_scripts@@ Help the user focus
47. @@export_scripts@@ setRegion let location = CLLocation( latitude: 48.852851, longitude: 2.349398) let radius = 500 // meters let region = MKCoordinateRegion( center: location.coordinate, latitudinalMeters: radius, longitudinalMeters: radius) mkMapView .setRegion(region, animated: true)
48. @@export_scripts@@ GMSCameraPosition let camera = GMSCameraPosition .camera( withLatitude: 48.852851, longitude: 2.349398, zoom: 16.0) let gmsMapView = GMSMapView.map( withFrame: self.view.frame, camera: camera)
49. @@export_scripts@@ setCameraBoundary let region = MKCoordinateRegion( center: location.coordinate, latitudinalMeters: 50000, longitudinalMeters: 60000) let boundary = CameraBoundary(coordinateRegion: region) mkMapView.setCameraBoundary( boundary, animated: true)
50. @@export_scripts@@ cameraTargetBounds let bounds = GMSCoordinateBounds(...) gmsMapView.cameraTargetBounds = bounds
51. @@export_scripts@@ pointOfInterestFilter // Show certain categories mkMapView.pointOfInterestFilter = MKPointOfInterestFilter( including: [ .restaurant, .cafe ] ) // Hide all mkMapView.pointOfInterestFilter = .excludingAll
52. @@export_scripts@@ Style.json [ { "featureType": "poi.business", "stylers": [ { "visibility": "off" } ] } ]
53. @@export_scripts@@ Style.json [ { "featureType": "poi", "stylers": [ { "visibility": "off" } ] } ]
54. @@export_scripts@@ GMSMapStyle let styleURL = Bundle.main.url(forResource: "style", withExtension: "json") let style = GMSMapStyle( contentsOfFileURL: styleURL) gmsMapView.mapStyle = style
55. @@export_scripts@@ Best practice #10
56. @@export_scripts@@ Make it easy to reset
57. @@export_scripts@@ Reset North-South // MapKit mkMapView.showsCompass = true // Google Maps gmsMapView.settings.compassButton = true
58. @@export_scripts@@ Reset to Current Location // Google Maps gmsMapView.settings.myLocationButton = true // MapKit let currentLocation: CLLocation let region = MKCoordinateRegion( center: currentLocation.coordinate, latitudinalMeters: 500, longitudinalMeters: 500) mkMapView .setRegion(region, animated: true)
59. @@export_scripts@@ Navigation
60. @@export_scripts@@ Best practice #11
61. @@export_scripts@@ Give options for outsourcing
62. @@export_scripts@@ Google Maps // Base URL https://www.google.com/maps/dir/? api=1 // Parameters destination=48.85840,2.29449 travelmode=driving|walking|transit
63. @@export_scripts@@ Apple Maps MKMapItem.openInMaps(launchOptions:) // Key MKLaunchOptionsDirectionsModeKey // Values MKLaunchOptionsDirectionsModeDriving MKLaunchOptionsDirectionsModeWalking MKLaunchOptionsDirectionsModeTransit MKLaunchOptionsDirectionsModeDefault
64. @@export_scripts@@ Apple Maps // Base URL http://maps.apple.com/ // Parameters daddr=48.85840,2.29449 dirflg=d|w|r
65. @@export_scripts@@ Copy Paste let pasteboard = UIPasteboard.general pasteboard.string = "501 Main Street"
66. @@export_scripts@@ Best practice #12
67. @@export_scripts@@ Leverage all of the senses
68. @@export_scripts@@ Haptic Feedback let generator = UINotificationFeedbackGenerator() generator .notificationOccurred( .warning|.success|.error )
69. @@export_scripts@@ Audio Instructions AVFoundation AVSpeechSynthesizer AVSpeechUtterance
70. @@export_scripts@@ Spacial Audio Microsoft Soundscape github.com/microsoft/soundscape
71. @@export_scripts@@ Best practice #13
72. @@export_scripts@@ Personalise the navigation experience
73. @@export_scripts@@ "Think beyond the visual" - Marco Salsiccia, Deque Systems
74. @@export_scripts@@ Best practice #14
75. @@export_scripts@@ Provide list of turn-by-turn instructions
76. @@export_scripts@@
77. @@export_scripts@@ Best practice #15
78. @@export_scripts@@ Tell the user where they are
79. @@export_scripts@@ CLGeocoder let currentLocation = locationManager.requestLocation() let geocoder = CLGeocoder() geocoder .reverseGeocodeLocation(currentLocation) { (placemarks, error) in // placemarks: [CLPlacemark] }
80. @@export_scripts@@ Best practice #16
81. @@export_scripts@@ Let the user save their current location
82. @@export_scripts@@ Best practice #17
83. @@export_scripts@@ Test with real people who use assistive technology
84. @@export_scripts@@ Recap
85. @@export_scripts@@ Thank you!