-
Haz que la app para Mac sea más accesible para todos
Descubre cómo integrar funcionalidades de accesibilidad que aprovechan al máximo la potencia y la flexibilidad de macOS. Ve más allá de los conceptos básicos para aprender a admitir VoiceOver y Control por Voz, mejorar el diseño de las vistas, explorar cómo las tecnologías de asistencia navegan por tu contenido y mucho más.
Capítulos
- 0:00 - Te damos la bienvenida
- 0:44 - Diseño
- 7:48 - Navegación
- 9:52 - Interacción
Recursos
Videos relacionados
WWDC24
WWDC21
-
Buscar este video…
-
-
4:15 - Contain subviews within accessibility container
// Contain subviews within accessibility container import SwiftUI struct ContentView: View { var body: some View { VStack { FirstView() SecondView() } .accessibilityElement(children: .contain) } } -
4:23 - Combine subviews into one accessibility element
// Combine subviews into one accessibility element import SwiftUI struct ContentView: View { var body: some View { VStack { FirstView() SecondView() } .accessibilityElement(children: .combine) } } -
4:33 - Hide subviews from accessibility
// Hide subviews from accessibility import SwiftUI struct ContentView: View { var body: some View { VStack { FirstView() SecondView() } .accessibilityElement(children: .ignore) } } -
5:12 - Contain style presets in accessibility container
// Contain style presets in accessibility container import SwiftUI struct FormattingInspectorView: View { var body: some View { Form { VStack { StylePresetView(type: .title) StylePresetView(type: .heading) StylePresetView(type: .subHeading) StylePresetView(type: .body) } .accessibilityElement(children: .contain) .accessibilityLabel("Style Presets") } } } -
6:21 - Merge Title View and Button into one accessibility element
// Merge Title View and Button into one accessibility element import SwiftUI struct StylePresetView: View { let preset: StylePreset var body: some View { HStack { PresetTitleView(preset: preset) Button("Apply") { /* ... */ } } .accessibilityElement(children: .combine) } } -
7:01 - Set the order of accessibility elements
// Set the order of accessibility elements import SwiftUI struct BookDetailsView: View { let book: Book var body: some View { VStack { Text(book.author) Text(book.title) .accessibilitySortPriority(1) DescriptionView(book: book) } .accessibilityElement(children: .combine) } } -
8:43 - Add an accessibility rotor for bookmarked pages
// Add an accessibility rotor for bookmarked pages import SwiftUI struct PagesView: View { @Binding var pages: [Page] var body: some View { List(pages) { page in PageListItemView(page: page) } .accessibilityRotor("Bookmarks") { ForEach(pages) { page in if page.isBookmarked { AccessibilityRotorEntry(page.title, id: page.id) } } } } } -
9:33 - Set the default VoiceOver focus
// Set the default VoiceOver focus struct MyView: View { @AccessibilityFocusState(for: .voiceOver) var focusedForVoiceOver var body: some View { FirstView() SecondView() .accessibilityDefaultFocus($focusedForVoiceOver, true) ThirdView() } } -
10:28 - Add an accessibility action to bookmark the page
// Add an accessibility action to bookmark the page import SwiftUI struct PageListItemView: View { var page: Page var body: some View { VStack() { ThumbnailView(page: page) Text(page.title) } .onHover { /* ... */ } .accessibilityAction(named: page.isBookmarked ? "Remove Bookmark" : "Bookmark") { page.isBookmarked.toggle() } } }
-
-
- 0:00 - Te damos la bienvenida
Obtén más información sobre cómo mejorar la accesibilidad de las apps para Mac. Descubre las prácticas recomendadas para la representación del diseño, la aceleración de la navegación y la accesibilidad de la interacción para garantizar que todos puedan disfrutar de las apps de Mac.
- 0:44 - Diseño
SwiftUI en macOS te permite hacer que tus apps sean accesibles para todos, especialmente para aquellos que dependen de VoiceOver. SwiftUI crea elementos de accesibilidad a partir de vistas, pero debes refinar esta estructura para una navegación óptima. Los aspectos clave de la accesibilidad de macOS incluyen la agrupación de elementos relacionados en contenedores para crear una estructura en forma de árbol, lo que acelera la navegación. Puedes usar modificadores como 'accessibilityElement(children:)' para especificar cómo se representan las vistas y sus subvisualizaciones como contenedores, elementos combinados o ignorados. Por ejemplo, en la app de edición de texto de Nicholas, las mejoras en el inspector de formato se realizan agrupando los preajustes de estilo y combinando los botones de título y app en elementos individuales. Además, usa el modificador “accessibilitySortPriority” para reordenar los elementos y asegurarte de que la información más importante se lea primero.
- 7:48 - Navegación
La accesibilidad de la app de ejemplo se ha mejorado con los rotores, una función de VoiceOver que permite pasar rápidamente de un contenido a otro, como páginas marcadas. Esto simplifica la navegación y la hace igual de eficaz para las personas que utilizan VoiceOver. Un nuevo modificador en SwiftUI puede sugerir puntos de enfoque iniciales.
- 9:52 - Interacción
En las apps SwiftUI, asegúrate de que se pueda acceder a todas las interacciones más allá de los métodos basados en punteros. Usa acciones de accesibilidad y atajos de teclado para personas que usen VoiceOver, Control por botón y Control por voz.