Haz que la app para Mac sea más accesible para todos

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
- Catch up on accessibility in SwiftUI
WWDC21
- SwiftUI Accessibility: Beyond the basics
Hola, soy Nicholas, ingeniero del equipo de accesibilidad. La accesibilidad permite que todos usen y disfruten las apps que creas. Hoy iré más allá de lo básico para explorar cómo puedes hacer que tu app de Mac sea más accesible. Las apps de Mac están diseñadas principalmente para las interacciones de teclado y mouse con IU densas y experiencias multitarea potentes. Estas cualidades específicas de la Mac implican importantes consideraciones de accesibilidad que abordaré hoy.
Esto incluye brindar accesibilidad en el diseño de la app, acelerar la navegación y crear interacciones más accesibles. En la Mac, tu app tiene mucho espacio para mostrar controles y contenido. Así como visualmente diseñas la IU de modo que sea comprensible e intuitiva, es importante pensar en cómo plasmar esto en las tecnologías de accesibilidad. SwiftUI transmite las vistas individuales que componen tu app como elementos de accesibilidad. Los elementos de accesibilidad contienen la información necesaria para que las tecnologías de accesibilidad comprendan e interactúen con tu app. Si no conoces con los elementos de accesibilidad, te recomiendo que consultes “Catch Up on Accessibility in SwiftUI” de la WWDC 2024. Creé una nueva app para Mac en SwiftUI que permite editar documentos de texto.
Tiene una barra lateral para cambiar de página y marcar las más importantes.
Tiene un inspector con controles para dar formato al texto, con una lista de ajustes de estilo preestablecidos que permiten aplicar múltiples opciones de formato a la vez.
Realmente quiero que esta app sea excelente para Mac y sé que eso implica que sea accesible para todos. Desde el principio, apliqué los conceptos básicos de accesibilidad y probé nuevas funcionalidades basadas en VoiceOver.
VoiceOver es un lector de pantalla que permite que personas con distintos niveles de visión usen tu app. Con VoiceOver, la IU de tu app se representa por medio de una voz… “VoiceOver funciona en un editor de texto accesible”. … o con el sistema braille. Usar VoiceOver es una excelente manera de probar la accesibilidad de tu app porque aprovecha toda la información de accesibilidad que tu app proporciona. Si tu app funciona bien con VoiceOver, estás en el camino correcto para brindar una gran experiencia con otras tecnologías de accesibilidad como Control por Voz y Switch Control.
En la Mac, VoiceOver se controla principalmente con atajos de teclado. Por ejemplo, hay atajos para moverse a los elementos siguientes y anteriores en la pantalla. Con estos atajos de teclado, puedo mover el foco de VoiceOver elemento por elemento para escuchar una descripción.
“Minimizar, botón, pantalla completa, botón, barra de herramientas, mi documento de texto, barra lateral, tabla, divisor vertical, editar texto, inserción al final del texto, divisor vertical, inspector de formato, área de desplazamiento”. Lo que normalmente requiere un simple movimiento del mouse, puede requerir muchos comandos para alguien que usa VoiceOver.
Detrás de escena, VoiceOver está avanzando hacia el siguiente elemento de accesibilidad que ofrece SwiftUI.
Para que la navegación sea más rápida con VoiceOver, SwiftUI puede agrupar los elementos en contenedores de elementos de accesibilidad.
VoiceOver tiene atajos para entrar y salir de estos contenedores. En la Mac, de forma predeterminada, VoiceOver navega por contenedor para facilitar el desplazamiento y solo se enfoca en uno cuando es necesario. Una diferencia clave entre la accesibilidad de la Mac y otras plataformas como el iPhone y el iPad es que, a menudo, la Mac tienen contenedores anidados. Así, los elementos de accesibilidad se estructuran en forma de árbol para representar la IU de tu app. En tu app, puedes agrupar elementos en contenedores para que la navegación sea más rápida con VoiceOver.
Al mismo tiempo, procura no crear demasiados niveles de contenedores anidados. A veces, esto puede dificultar la búsqueda de elementos en tu app y demandar tiempo a enfocarte en los distintos contenedores.
Para definir los contenedores de tu app, usa el modificador accessibilityElementchildren.
Cuando lo aplicas a una vista, el comportamiento establecido determina cómo se representan las vistas y subvistas en la experiencia de accesibilidad. Hay tres opciones de comportamiento.
Contain representará la vista como un contenedor de accesibilidad cuyos elementos de accesibilidad incluidos son las subvistas.
Combine representará la vista y las subvistas como un elemento de accesibilidad que combina todos sus atributos y acciones. Ignore representará la vista como un elemento de accesibilidad que ignora completamente las subvistas.
Cuando estaba probando mi app con VoiceOver, noté algunas áreas que quisiera revisar. Primero, usaré VoiceOver para desplazarme por los elementos a través del inspector de formato. “En inspector de formato, área de desplazamiento, 22 elementos, estilos de encabezado”. “Título, botón aplicar, subtítulo, botón aplicar, encabezado, botón aplicar, cuerpo, botón aplicar, negrita, botón alternar”. Observé que debía navegar por todos los ajustes preestablecidos de estilo para llegar al botón de alternar negrita. Estos ajustes preestablecidos se muestran mediante un VStack.
Puedo usar el modificador accessibilityElementchildren con el comportamiento de contenido en el VStack para crear un contenedor. También puedo usar el modificador accessibilityLabel para nombrar este contenedor.
Intentaré nuevamente usar VoiceOver para desplazarme por los elementos del inspector de formato de la derecha. “En inspector de formato, área de desplazamiento, 15 elementos, estilos de encabezado, ajustes preestablecidos de estilo, grupo, negrita, botón de alternar”. Esto es genial. No necesito seleccionar todos los ajustes de estilo preestablecidos salvo que quiera hacerlo. Quiero que la navegación en este contenedor funcione correctamente. Enfocaré VoiceOver en el contenedor de ajustes de estilo y luego desplazaré VoiceOver por cada elemento.
“En ajustes de estilo preestablecidos, grupo, 8 elementos, título, botón aplicar, subtítulo, botón aplicar, encabezado, botón aplicar, texto, botón aplicar”. Esto funciona, pero noto que VoiceOver se enfoca en los títulos y los botones de aplicar de cada ajuste preestablecido de estilo por separado.
Un ajuste de estilo se representa como un HStack que contiene una vista de título y una vista de botón.
Puedo usar el modificador accessibilityElementchildren con el comportamiento combinado en el HStack para crear un elemento de accesibilidad que fusione las propiedades de las dos vistas.
Intentaré nuevamente mover VoiceOver por los elementos del contenedor de ajustes de estilo preestablecidos. “En ajustes de estilo preestablecidos, grupo. 4 elementos, título, botón aplicar. subtítulo, botón aplicar. Encabezado, botón aplicar. Texto, botón aplicar”. Ahora cada ajuste preestablecido funciona como un solo elemento. Esto facilita la navegación y la comprensión.
Otro aspecto de la estructura de accesibilidad que puedes mejorar es el orden de los elementos. En este ejemplo, el autor del libro aparece antes que el título del libro. Pero quiero que VoiceOver lea primero el título del libro, ya que eso ayudaría a escanear rápidamente muchos libros. Puedo cambiar el orden de los elementos de accesibilidad con el modificador accessibilitySortPriority.
Si le doy prioridad a la vista del título del libro, este elemento se ordenará primero. Por defecto, las vistas tienen una prioridad de cero. Luego, las vistas con prioridades iguales se ordenan según su posición visual. Ahora VoiceOver leerá el título del libro antes que el autor y la descripción. Cuando pruebes tu app con VoiceOver, si el orden no es correcto, usa el modificador accessibilitySortPriority.
Ahora que la estructura de accesibilidad de mi app se perfeccionó, quiero llevar la navegación aún más lejos con rotores.
Con la funcionalidad de marcadores de mi app, el usuario podría escanear visualmente la lista de páginas en un instante para ver cuáles están marcadas. Sin embargo, si usa VoiceOver, tendría que navegar por cada página solo para saber si tiene marcadores. “Página 2 marcada como favorita. Página 3. Página 4. Página 5 marcada como favorita. Página 6. Página 7. Página 8 marcada como favorita, página 9, página 10”. Para que esta experiencia sea tan sencilla como la visual, los usuarios de VoiceOver deben poder navegar solo por las páginas marcadas.
Para ello, puedo usar rotores. Los rotores son una manera sencilla de acelerar la navegación para alguien que usa VoiceOver. Te permiten definir colecciones de vistas o rangos de texto entre los que el usuario se puede desplazar rápidamente. Para agregar un rotor de marcadores a mi lista, usaré el modificador accessibilityRotor y le asignaré el nombre Bookmarks. Puedo declarar condicionalmente qué páginas quiero incluir en el rotor de Marcadores. Cuando enfoco VoiceOver en la lista de páginas en la barra lateral, puedo abrir el menú del rotor con un atajo, que me permite recorrer rápidamente todos mis marcadores y saltar directamente a la página de marcadores que quiero. “Menú de marcadores. Página 2. Página 5. Página 5 marcada como favorita”.
Los enrutadores de accesibilidad convierten las experiencias de navegación lentas o complejas para el usuario de VoiceOver en una gran experiencia.
Cuando navego por mi app con VoiceOver, muevo lo que se denomina el foco de VoiceOver. Las tecnologías de accesibilidad como VoiceOver mantienen su estado de enfoque separado del enfoque del teclado.
En macOS y en iOS 26, la app puede sugerir un enfoque inicial para las tecnologías de accesibilidad como VoiceOver con el modificador accessibilityDefaultFocus. Cuando aparezca una nueva escena, SwiftUI sugerirá colocar el foco sobre la vista que tiene el modificador y permitirá que la tecnología de accesibilidad tome la mejor decisión según las preferencias de cada persona.
Ahora que navegar por todos los elementos de mi app es muy fácil, quiero asegurarme de que las interacciones con ellos sean sencillas. En mi app, agregué la posibilidad de marcar páginas con un botón que aparece cuando coloco el cursor sobre la miniatura de una página. Visualmente, es práctico, ya que las miniaturas no se ven obstruidas cuando no lo necesito. Sin embargo, dado que alguien que usa VoiceOver no mueve el puntero, nunca podrá acceder al botón.
En tu app, las interacciones que requieran colocar el puntero sobre un elemento o realizar un gesto con el panel táctil podrían no ser accesible para todos. Debes ofrecer otras maneras de descubrir y ejecutar estas interacciones.
Por suerte, SwiftUI ofrece una forma sencilla de hacer esto. En tus vistas, puedes agregar acciones de accesibilidad que las tecnologías como VoiceOver puedan realizar de manera accesible. Para agregar una acción de accesibilidad a una vista, usa el modificador accessibilityAction. Este modificador permite agregar acciones de marcador a las vistas en mi lista de páginas. Es tan simple como agregar un botón. Ahora usaré VoiceOver para colocar el foco sobre una miniatura de página y usaré mi nueva acción de accesibilidad de marcador. “Página 3. Menú de acciones. Dos elementos. Mostrar elementos alternativos. Marcar página 3 como favorita. Marcar Página 3 como favorita”.
Pude abrir el menú de acciones con un atajo de teclado y marcar la página como favorita fácilmente. Otras tecnologías de accesibilidad, como Switch Control y Control por Voz, también se basan en estas acciones de accesibilidad.
Otra forma rápida de mejorar las interacciones con tu app son los atajos de teclado. Agregar atajos de teclado para tareas comunes en tu app no solo ofrece practicidad, sino que también tiene un gran impacto en la accesibilidad, especialmente para quienes no puedan usar un mouse. Por último, si creas tus propios controles, es posible que no tengan la información de accesibilidad que otros controles tienen incorporada. Para aprender cómo crear controles accesibles fácilmente en SwiftUI, puedes consultar “SwiftUI Accessibility: Beyond the basics” de la WWDC 2021. Ahora es tu turno para probar tu app con VoiceOver en la Mac, definir mejor los contenedores y descubrir dónde puedes agregar rotores personalizados. Por último, puedes demostrar la excelente accesibilidad de tu app con Accessibility Nutrition Labels. Para obtener más información, consulta “Evaluar las Accessibility Nutrition Labels de tu app”. Gracias por ver 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.

Capítulos

Recursos

Videos relacionados

WWDC24

WWDC21