-
Make your app visually accessible
When you design with accessibility in mind, you empower everyone to use your app. Discover how to create an adaptive interface for your app that takes a thoughtful approach to color, provides readable text, and accommodates other visual settings to maintain a great experience throughout.
We've designed this session like our user interfaces — to be accessible to all. If you'd like to learn even more about accessibility and design, you may also enjoy “Visual Design and Accessibility,” “Accessibility Inspector,” “Building Apps with Dynamic Type,” and “Introducing SF Symbols.”Recursos
Vídeos relacionados
WWDC23
WWDC21
WWDC19
-
Buscar neste vídeo...
-
-
3:14 - Button Shapes
func observeButtonShapesNotification() { // Make buttons more visible by using shapes. // If your default design does not include button shapes, observe this notification to make visual changes. NotificationCenter.default.addObserver(self, selector: #selector(updateButtonShapes), name: UIAccessibility.buttonShapesEnabledStatusDidChangeNotification, object: nil) } @objc func updateButtonShapes() { if UIAccessibility.buttonShapesEnabled { // Use extra visualizations for buttons. } else { // Use default design for buttons. } } -
3:31 - Differentiate Without Color
func observeDifferentiateWithoutColorNotification() { // Use symbols or shapes to convey meaning instead of relying on color alone. // If your default design does not differentiate without color, observe this notification to make visual changes. NotificationCenter.default.addObserver(self, selector: #selector(updateColorAndSymbols), name: NSNotification.Name(UIAccessibility.differentiateWithoutColorDidChangeNotification), object: nil) } @objc func updateColorAndSymbols() { if UIAccessibility.shouldDifferentiateWithoutColor { // Use symbols or shapes to convey meaning. } else { // Use default design. } } -
7:47 - Smart Invert Colors
extension UIView { @available(iOS 11.0, tvOS 11.0) var accessibilityIgnoresInvertColors: Bool { get set } } -
9:57 - Large Text
// ZodiacConstellationCell.swift override func traitCollectionDidChange (_ previousTraitCollection: UITraitCollection?) { if (traitCollection.preferredContentSizeCategory < .accessibilityMedium) { // Default font sizes stackView.axis = .horizontal stackView.alignment = .center } else { // Accessibility font sizes stackView.axis = .vertical stackView.alignment = .leading } } -
11:33 - Bold Text
func observeBoldTextNotification() { // Update labels to use bold or heavy font styles. // If you aren't using system font styles, observe this notification to make visual changes. NotificationCenter.default.addObserver(self, selector: #selector(updateLabelWeight), name: UIAccessibility.boldTextStatusDidChangeNotification, object: nil) } @objc func updateLabelWeight() { if UIAccessibility.isBoldTextEnabled { // Use bold or heavy font weight } else { // Use font weight that is default to your design. } } -
13:08 - Reduce Motion
func observeReduceMotionNotification() { // Observe this notification to reduce or remove the frequency and intensity of motion effects. NotificationCenter.default.addObserver(self, selector: #selector(updateMotionEffects), name: UIAccessibility.reduceMotionStatusDidChangeNotification, object: nil) } @objc func updateMotionEffects() { if UIAccessibility.isReduceMotionEnabled { // Reduce or remove extraneous motion effects. } else { // Use default motion effects. } } -
13:51 - Prefers Cross-fade Transitions
func observeCrossFadeTransitionsNotification() { // Reduce or remove sliding animations for transitioning views. // If you aren't using system-provided navigation, observe this notification to make visual changes. NotificationCenter.default.addObserver(self, selector: #selector(updateTransitionEffects), name: UIAccessibility.prefersCrossFadeTransitionsStatusDidChange, object: nil) } @objc func updateTransitionEffects() { if UIAccessibility.prefersCrossFadeTransitions { // Replace sliding transitions with cross-fade animations. } else { // Use default sliding transitions. } } -
15:07 - Reduce Transparency
func observeReduceTransparencyNotification() { // Reduce or remove transparency by adjusting these effects to be completely opaque. // If you aren't using system-provided visual effects for blurs or vibrancy, observe this notification to make visual changes. NotificationCenter.default.addObserver(self, selector: #selector(updateTransparencyEffects), name: UIAccessibility.reduceTransparencyStatusDidChangeNotification, object: nil) } @objc func updateTransparencyEffects() { if UIAccessibility.isReduceTransparencyEnabled { // Make transparency effects opaque. } else { // Use default transparency. } }
-