Torne seu app para Mac mais acessível para todos

Torne seu app para Mac mais acessível para todos

Saiba como integrar recursos de acessibilidade que aproveitam ao máximo a potência e a flexibilidade do macOS. Vá além do básico para saber como incluir a compatibilidade com o VoiceOver e o Controle por Voz, melhorar o layout de suas visualizações, explorar como as tecnologias assistivas navegam em seu conteúdo e muito mais.

Capítulos
- 0:00 - Introdução
- 0:44 - Layout
- 7:48 - Navegação
- 9:52 - Interatividade
Recursos
Vídeos relacionados

WWDC24
- Catch up on accessibility in SwiftUI
WWDC21
- SwiftUI Accessibility: Beyond the basics
Olá! Meu nome é Nicholas. Sou engineer da equipe Accessibility. A acessibilidade permite que todos experimentem e curtam os apps que você cria. Hoje, vou além do básico para descobrir como tornar os apps para Mac mais acessíveis. Os apps para Mac são desenvolvidos principalmente para interatividade com teclado e mouse, com interfaces mais densas e multitarefa eficaz. Essas características do Mac envolvem considerações importantes sobre acessibilidade, que abordarei hoje.
Isso inclui definir o layout do app para acessibilidade, acelerar a navegação no app e tornar a interatividade no app mais acessível. No Mac, seu app tem muito espaço para exibir controles e conteúdo. Assim como você expõe visualmente sua interface para ser compreensível e intuitiva, é importante pensar na maneira como isso é transmitido para as tecnologias de acessibilidade. A SwiftUI transmite as visualizações individuais que compõem o app como elementos de acessibilidade. Os elementos de acessibilidade contêm as informações necessárias para que as tecnologias de acessibilidade interpretem e interajam com o app. Se você não conhece bem os elementos de acessibilidade, confira o vídeo "Recursos de acessibilidade na SwiftUI", da WWDC 2024. Estou construindo um novo app para Mac na SwiftUI para editar documentos de texto.
Há uma barra lateral onde posso trocar de página e marcar as importantes nos favoritos.
Há também um inspetor com controles para formatar o texto selecionado, incluindo uma lista de estilos que posso usar para aplicar várias opções de formatação de uma só vez.
Quero muito que seja um ótimo app para Mac, e sei que isso significa torná-lo acessível a todos. Então, desde o início, aplico os conceitos básicos de acessibilidade e testo os novos recursos que adiciono com o VoiceOver.
Só para lembrar, o VoiceOver é um leitor de tela que permite que pessoas com diferentes níveis de visão usem o app. O VoiceOver permite que a interface do app seja ouvida como locução no editor de texto acessível ou em braille. Usar o VoiceOver também é uma maneira fantástica para testar a acessibilidade do app porque usa todas as informações de acessibilidade que seu app fornece. Se o app funcionar bem com o VoiceOver, você estará no caminho certo para ter uma ótima experiência com outras tecnologias de acessibilidade, como Controle por Voz e Controle Assistivo. No Mac, o VoiceOver é controlado principalmente por atalhos de teclado. Por exemplo, existem atalhos de teclado para mover para o elemento seguinte e anterior na tela. Usando esses atalhos, posso mover o foco do VoiceOver por um elemento de cada vez para ouvir a descrição dele.
Minimizar, botão, tela cheia, botão, barra de ferramentas, meu documento de texto, barra lateral, tabela, divisor vertical, editar texto, inserção no final do texto, divisor vertical, inspetor de formato, área de rolagem. O que seria um rápido movimento do mouse na tela poderia levar quem usa o VoiceOver a pressionar muitas teclas.
Nos bastidores, o VoiceOver está passando para o próximo elemento de acessibilidade fornecido pela SwiftUI.
Para acelerar a navegação com o VoiceOver, a SwiftUI pode agrupar elementos de acessibilidade em um contêiner com atalhos de teclado para ter foco dentro e fora desses contêineres. Por padrão, no Mac, o VoiceOver navega pelo contêiner para que seja mais rápido percorrer o app e só focar em um contêiner quando necessário. Uma diferença importante quanto à acessibilidade no Mac em relação a outras plataformas, como iPhone e iPad, é que os contêineres contêm contêineres agrupados. Isso cria uma estrutura semelhante a uma árvore de elementos de acessibilidade que representam a interface do app. No seu app, agrupe elementos relacionados em contêineres para facilitar a navegação com o VoiceOver.
Ao mesmo tempo, atenção à criação de muitos níveis de contêineres aninhados. Às vezes, isso pode dificultar a localização de elementos no app e aumentar o tempo gasto voltando repetidamente aos contêineres.
Para refinar contêineres no app, use o modificador de elementos filhos de acessibilidade.
Ao aplicar o modificador a uma visualização, o comportamento fornecido determina como a visualização e as subvisualizações serão representadas para fins de acessibilidade. Há três opções de comportamento diferentes.
Conter representa a visualização como um contêiner de acessibilidade, em que as subvisualizações são os elementos de acessibilidade dentro dele.
Combinar representa a visualização e as subvisualizações como um elemento de acessibilidade que mescla todos os atributos e ações. Ignorar representa a visualização como um elemento de acessibilidade que ignora completamente as subvisualizações.
Enquanto testava meu app com o VoiceOver, notei algumas áreas que quero rever. Primeiro, vou mover o VoiceOver, item por item, pelo inspetor de formatação à direita. No inspetor de formatação, área de rolagem, 22 itens, estilos de título. Título, Aplicar - botão, Subtítulo, Aplicar - botão, Cabeçalho, Aplicar - botão, Corpo, Aplicar - botão, Negrito, Alternar - botão. Notei que tenho que navegar em cada estilo predefinido antes de chegar ao botão "Negrito, Alternar - botão". Esses estilos são exibidos usando um VStack.
Posso usar o modificador de elemento filho de acessibilidade com o comportamento Conter no VStack para criar um contêiner. Também posso usar o modificador de rótulo de acessibilidade para dar um nome a esse contêiner.
Agora vou tentar de novo mover o VoiceOver, item por item, pelo inspetor de formatação à direita. No inspetor de formatação, área de rolagem, 15 itens, estilos de título, predefinições de estilo, grupo, negrito, botão de alternância. Está ótimo. Não preciso passar por todas as predefinições de estilo, a menos que eu queira. Quero ter certeza de que a navegação nesse contêiner de estilos funciona. Vou focar o VoiceOver no contêiner de estilos e, em seguida, mover item por item do VoiceOver.
Em predefinições de estilo, Grupo, 8 itens, Título, Aplicar, Botão, Subtítulo, Aplicar, Botão, Título, Aplicar, Botão, Corpo, Aplicar, Botão. Funciona, mas percebi que o VoiceOver se concentra no título e no botão aplicar de cada estilo separadamente.
Um estilo é representado como uma pilha H contendo uma visualização de título e de botão.
Posso usar o modificador do elemento filho de acessibilidade com o comportamento combinado na pilha de idade para criar um elemento de acessibilidade que mescle as propriedades de visualização do título e do botão.
Agora vou tentar, mais uma vez, mover item por item do VoiceOver no contêiner de estilos. Em predefinições de estilo, Grupo. Para itens, Título, Aplicar - botão. Legenda, Aplicar - botão. Cabeçalho, Aplicar - botão. Corpo, Aplicar - botão. Agora posso analisar cada estilo como um elemento. É mais fácil de navegar e entender. Outro aspecto da estrutura de acessibilidade que você pode refinar é a ordenação dos elementos. Neste exemplo, visualmente, o autor do livro está antes do título. Mas eu quero que o título seja lido primeiro pelo VoiceOver, para ficar mais fácil passar rapidamente por muitos livros. Posso mudar a ordem dos elementos usando o modificador de prioridade de classificação de acessibilidade.
Se eu der prioridade ao título do livro, ele será classificado primeiro. Por padrão, as visualizações têm prioridade de classificação zero. As visualizações com prioridades iguais são classificadas com base na posição visual. Agora, o título do livro será dito pelo VoiceOver antes do autor e da descrição. Ao testar o app com o VoiceOver, se a ordem não estiver certa, use o modificador de prioridade de classificação de acessibilidade.
Agora que a estrutura de acessibilidade do app foi refinada, quero levar a navegação ainda mais longe com os rotores.
Com o recurso de favoritos no meu app, deve-se conseguir escanear visualmente a lista de páginas para ver quais estão marcadas. No entanto, com o VoiceOver, seria necessário navegar por todas as páginas só para saber se havia alguma marcada. Página 2 marcada. Página 3. Página 4. Página 5 marcada. Página 6. Página 7, Página 8 marcada, página 9, página 10. Para tornar isso tão fácil quanto a experiência visual, quem usa o VoiceOver deve poder navegar apenas pelas páginas marcadas.
Para isso, posso usar rotores. Os rotores são uma maneira essencial de acelerar a navegação para quem usa o VoiceOver. Os rotores permitem definir coleções de visualizações ou intervalos de texto no app que podem ser movidos rapidamente. Para adicionar um rotor de favoritos à lista de páginas, usarei o modificador rotor de acessibilidade com o nome de Favoritos. Posso declarar condicionalmente quais das minhas páginas quero incluir no rotor de Favoritos. Agora, quando o VoiceOver foca na lista de páginas na barra lateral, posso abrir o menu rotor com um atalho de teclado, onde posso percorrer todos os meus favoritos rapidamente e ir direto para a página marcada que eu quiser. Menu Favoritos. Página 2. Página 5. Página 5 marcada.
Os roteadores de acessibilidade transformam o que seria uma navegação demorada ou complexa para quem usa o VoiceOver em uma ótima experiência.
Ao navegar pelo app com o VoiceOver, estou movendo o chamado foco do VoiceOver. Tecnologias de acessibilidade como o VoiceOver mantêm o próprio estado de foco separado do foco do teclado.
No macOS e no iOS 26, o app pode sugerir um foco inicial para tecnologias de acessibilidade, como o VoiceOver, usando o modificador de foco padrão de acessibilidade. Quando uma cena nova for exibida, a SwiftUI sugere que a visualização com o modificador se concentre e, ao mesmo tempo, permita que a tecnologia de acessibilidade tome a melhor decisão com base nas preferências. Agora que navegar pelos elementos do meu app ficou fácil, quero ter certeza de que posso interagir facilmente com eles também. No meu app, adicionei a capacidade de marcar uma página com um botão que aparece quando eu passo o cursor sobre uma miniatura da página. Visualmente, isso é bom, pois as miniaturas não ficam bloqueadas quando eu não preciso do botão. No entanto, como quem usa o VoiceOver não está movendo o cursor, pode não conseguir acessar o botão.
No seu app, uma interatividade que exija passar o cursor ou executar um movimento no trackpad pode não ser acessível a todos. Você deve fornecer outras maneiras de descobrir e realizar essas interatividades. Felizmente, o SwiftUI propicia um jeito fácil de fazer isso. É possível adicionar ações de acessibilidade a uma visualização que tecnologias como o VoiceOver possam executar de maneira simples. Para adicionar uma ação de acessibilidade a uma visualização, use o modificador accessibilityAction. Eu uso esse modificador para adicionar uma ação de marcador na minha lista de páginas. É tão simples quanto adicionar um botão.
Agora vou usar o VoiceOver para me concentrar em uma miniatura de página e usar a nova ação de acessibilidade de marcador. Página 3. Menu Ações. Dois itens. Mostrar itens alternativos. Marcar página 3. Marcar página 3.
Consegui abrir o menu Ações com um atalho de teclado e marcar a página facilmente. Outras tecnologias, como o Controle Assistivo e o Controle por Voz, também contam com essas ações de acessibilidade.
Outra maneira rápida de melhorar a interatividade com o app são os atalhos de teclado. Adicionar atalhos de teclado para tarefas comuns no app é não apenas um ótimo recurso para o usuário, mas também tem enorme impacto na acessibilidade, em especial para quem não pode usar um mouse. Por fim, se você criar seus próprios controles personalizados, eles podem não ter as informações de acessibilidade que outros controles integraram. Para saber como tornar os controles facilmente acessíveis na SwiftUI, confira o vídeo "Acessibilidade da SwiftUI: além do básico", da WWDC 2021. Agora é a sua vez de testar o app com o VoiceOver no Mac, refinar os contêineres no app e analisar onde você pode adicionar rotores personalizados. No final, você poderá mostrar a excelente acessibilidade do seu app com os rótulos de acessibilidade. Para saber mais, consulte "Avaliar seu app quanto aos rótulos de acessibilidade". Agradeço sua participação.

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 - Introdução
- Saiba como aprimorar a acessibilidade em apps para Mac. Conheça as melhores práticas para representação de layout, navegação rápida e acessibilidade de interação, para todas as pessoas usarem apps para Mac.
- 0:44 - Layout
- O SwiftUI no macOS permite tornar seus apps acessíveis, especialmente para quem depende do VoiceOver. O SwiftUI cria elementos de acessibilidade das visualizações, mas você deve aprimorá-los para uma navegação ideal. Os aspectos da acessibilidade no macOS incluem agrupar elementos em contêineres para criar uma estrutura em árvore, acelerando a navegação. Use modificadores como 'accessibilityElement(children:)' para especificar como as visualizações e subvisualizações são representadas: como contêineres, elementos combinados ou ignorados. No app de editor de texto de Nicholas, as melhorias no inspetor de formatação foram feitas agrupando os estilos predefinidos e combinando os botões de título e de aplicar em elementos únicos. Use a 'accessibilitySortPriority' para reordenar os elementos, garantindo que as informações mais importantes sejam lidas primeiro.
- 7:48 - Navegação
- A acessibilidade do app de exemplo é aprimorada com rotores, um recurso do VoiceOver que permite navegar entre conteúdos específicos, como páginas marcadas com favoritos. Isso agiliza a navegação, tornando-a mais eficiente para quem usa o VoiceOver. Um novo modificador no SwiftUI pode sugerir pontos de foco iniciais.
- 9:52 - Interatividade
- Em apps SwiftUI, todas as interações devem ser acessíveis além dos métodos baseados em ponteiro. Use ações de acessibilidade e atalhos de teclado para quem utiliza o VoiceOver, Controle Assistivo e Controle por Voz.

Capítulos

Recursos

Vídeos relacionados

WWDC24

WWDC21