Pessoas de todos os estilos de vida, de todas as idades, e de diferentes origens usam aplicativos para smartphones, incluindo pessoas com deficiências. Projetar seus aplicativos com acessibilidade em mente ajuda todos a usá-los, incluindo pessoas com deficiências visuais, motoras, de aprendizagem ou auditivas.
Neste tutorial de acessibilidade iOS, você transformará um aplicativo existente para torná-lo mais acessível para pessoas com deficiências visuais. No processo, você aprenderá como:
- Utilizar VoiceOver.
- Verificar seu aplicativo com o Inspetor de Acessibilidade.
- Implementar elementos de acessibilidade com o UIKit.
- Build uma melhor experiência de usuário para pessoas com deficiências.
Este tutorial requer Xcode 11.3 e Swift 5.1. Ele assume que você já conhece os conceitos básicos do desenvolvimento Swift. Se você é novo no Swift, você deve primeiro conferir nosso livro, Swift Apprentice.
- A começar
- Conhecendo a Aplicação de Receita
- Nos bastidores da Receita App
- Por que Acessibilidade?
- Activar o VoiceOver
- Como usar o VoiceOver
- Trying VoiceOver With the Recipe App
- Atributos de acessibilidade
- Usando o Inspetor de Acessibilidade
- Usando o Ponteiro de Inspeção
- Usando Quicklook para verificar áudio no Xcode
- Problemas de iluminação com a Auditoria do Inspetor
- Configurações adicionais do inspetor
- Fazer a aplicação da receita acessível
- Transformando as etiquetas de dificuldade
- Checking for Warnings
- Fazer o texto dinâmico
- Testar algumas outras opções
- Transformando a Tela de Detalhes da Receita
- Aprimorando as caixas de verificação
- Where to Go From Here?
- Semanalmenteraywenderlich.com
- Avaliação média
- Adicionar uma avaliação para este conteúdo
A começar
Neste tutorial, você vai trabalhar com um aplicativo já concluído chamado Receita, que contém uma lista de receitas e seus níveis de dificuldade. Ele também permite que você avalie a qualidade dos pratos que você faz.
Baixar tudo o que você precisa para começar usando o botão Download Materials no topo ou no fundo do tutorial. Abra o arquivo Receita.xcodeproj na pasta begin.
Antes de poder executar o aplicativo em um dispositivo, você precisa configurar a assinatura.
Para fazer isso, clique no projeto Recipe no navegador e selecione o alvo com o mesmo nome. Selecione a aba Signing & Capabilities, então certifique-se de que você selecionou Debug no topo. Finalmente, escolha a sua Equipe a partir do drop-down.
Conhecendo a Aplicação de Receita
Agora, construa e execute a aplicação para se familiarizar com suas características.
O controlador raiz é uma tabela de receitas contendo uma imagem, descrição e classificação de dificuldade. Clique numa receita para uma imagem maior com os ingredientes da receita e instruções.
Para tornar as coisas mais excitantes, você também pode riscar os itens da lista para ter certeza de que você tem todos os ingredientes necessários. Se você ama ou odeia o que você fez, você pode alternar os emoji similares ou não.
Nos bastidores da Receita App
Passe alguns minutos se familiarizando com o código no projeto iniciar. Aqui estão alguns destaques:
- O Main.storyboard contém todas as cenas do storyboard para a aplicação. Você vai notar que todos os componentes do UI são controles e visualizações padrão do UIKit. Eles já estão acessíveis, o que facilita o seu trabalho.
- RecipeListViewController.swift gerencia a visualização da tabela raiz, que exibe a lista de todas as receitas disponíveis. Ele usa um array de objetos
Recipe
como fonte de dados. - Recipe.swift é o objeto modelo que representa uma receita. Ele contém métodos utilitários para carregar um array de receitas que você usará em todo o app.
- RecipeCell.swift é a célula para a lista de receitas do controlador raiz. Ela exibe o nível de dificuldade da receita, nome e foto com base no objeto passado
Recipe
modelo. - RecipeInstructionViewController.swift contém o código do controlador para a vista detalhada, que mostra uma imagem grande do prato junto com seus ingredientes e instruções de cozimento. Ele apresenta um
UISegmentedControl
para alternar entre ingredientes e instruções na vista de tabela, que usaInstructionViewModel
. - InstructionViewModel.swift atua como a fonte de dados para
RecipeInstructionsViewController
. Ele inclui descrições de ingredientes e instruções, bem como informações de estado para as caixas de seleção. - InstructionCell.swift define uma célula que contém uma etiqueta e uma caixa de seleção para uso em instruções e listas de ingredientes. Quando você marca a caixa, ela risca o texto.
Agora você entende como o aplicativo funciona, é hora de considerar como torná-lo mais acessível.
Por que Acessibilidade?
Antes de começar com o código, é importante entender os benefícios da acessibilidade.
- Desenhar o seu aplicativo para acessibilidade facilita a escrita de testes funcionais, quer você esteja usando o framework KIF ou testes UI no Xcode.
- Você também ampliará o seu mercado e base de usuários, tornando o seu aplicativo utilizável por um grupo maior.
- Se você trabalha para qualquer agência governamental, você é obrigado a implementar a conformidade 508, que declara que qualquer software ou tecnologia deve ser acessível a todos os usuários.
- Implementar a acessibilidade em seu aplicativo mostra que você está disposto a ir a milha extra para cada usuário, e isso é uma coisa boa.
- É bom saber que você está fazendo uma pequena, mas notável diferença na vida de alguém!
Convencido? Então é hora de conhecer o VoiceOver, uma ferramenta de acessibilidade para pessoas com deficiências visuais.
Activar o VoiceOver
iOS vem com a ferramenta de leitura de ecrã VoiceOver, que ajuda os utilizadores a interagir com o software sem a necessidade de ver o ecrã. Foi especificamente concebido para pessoas com problemas de visão.
VoiceOver permite aos utilizadores com deficiência visual ouvir e interagir com o que está visível no ecrã. O VoiceOver responde a gestos e comunica audivelmente ao usuário o que está na tela ou o que o usuário seleciona. Em essência, o VoiceOver é a ligação entre a IU e a entrada de toque do utilizador.
A forma mais rápida de utilizar o VoiceOver é abrir a aplicação Settings no seu dispositivo iOS, seleccione Accessibility ▸ Accessibility Shortcut e, em seguida, seleccione VoiceOver.
Cria um atalho para que você possa triplicar o botão home – ou o botão lateral, para telefones mais novos – em um dispositivo físico para ligar e desligar o VoiceOver.
Agora você ativou o VoiceOver, é hora de experimentar.
Como usar o VoiceOver
VoiceOver vem com algumas práticas predefinições de gestos que facilitam a navegação de um aplicativo. Aqui estão alguns dos gestos mais comuns para usar com o VoiceOver:
- Single-tap em qualquer parte do ecrã e o VoiceOver lerá em voz alta a informação de identificação dos atributos de acessibilidade do item.
- Single-swipe left or right e o VoiceOver irá seleccionar o próximo item de acessibilidade visível e lê-lo em voz alta. Os comandos de navegação à direita avançam e descem, enquanto os comandos de navegação à esquerda fazem o oposto.
- Com um único comando de navegação para baixo para soletrar o item focado letra por letra.
- Com duplo comando de navegação para seleccionar o item focado.
- Com três comandos de navegação para a esquerda ou direita para navegar para a frente ou para trás numa vista de página.
Para a lista completa de gestos do VoiceOver, consulte os gestos do Learn VoiceOver da Apple no iPhone. Agora já sabe como funciona o VoiceOver – mas como é que a sua aplicação funciona com ele? Você irá testá-lo no próximo passo.
Trying VoiceOver With the Recipe App
Build e execute em um dispositivo físico e clique três vezes no botão home para ligar o VoiceOver. Deslize para a esquerda e para a direita para navegar pela lista de receitas. O VoiceOver lê os elementos de cima-esquerda para baixo-direita. Ele começa com o nome do cabeçalho seguido pelo nome de cada receita e o nome da imagem associada.
Mas há alguns problemas com a experiência do VoiceOver:
- Imagem não é uma descrição útil das visualizações de imagens em cada célula. Você sabe que uma imagem está lá, mas não o que ela é.
- VoiceOver não diz nada sobre o nível de dificuldade de cada receita, tornando este recurso inútil para pessoas com deficiências visuais.
Agora você identificou áreas problemáticas, você pode querer mergulhar diretamente na correção delas. Mas antes disso, você precisa saber um pouco sobre como os recursos de acessibilidade funcionam.
Atributos de acessibilidade
Atributos de acessibilidade são os componentes principais que você deve implementar para suportar a acessibilidade. Estes atributos fornecem o VoiceOver com informações sobre os elementos da sua aplicação para que o VoiceOver possa ler essas informações em voz alta para os seus utilizadores. Se eles não estiverem devidamente configurados, o VoiceOver não será capaz de fornecer os detalhes necessários sobre a sua aplicação.
Um atributo de acessibilidade tem cinco propriedades:
- Etiqueta: Uma forma concisa de identificar o controle ou a visualização. Alguns exemplos são botão Voltar e imagem da receita.
- Traços: Estes descrevem o estado, comportamento ou uso do elemento. Um traço de botão pode ser selecionado, por exemplo.
- Dica: Descreve a ação que um elemento completa. Por exemplo: Exibe o detalhe da receita.
- Moldura: O frame do elemento dentro da tela, no formato de um
CGRect
. VoiceOver fala o conteúdo do elementoCGRect
. - Valor: O valor de um elemento. Por exemplo, com uma barra de progresso ou um selector, o valor actual pode ser: 5 de 100.
Os componentes mais importantes do UIKit predefinem estes atributos para si; basta fornecer os detalhes para melhorar a experiência do utilizador. Se você criar controles personalizados, você mesmo terá que fornecer a maioria dos atributos.
So agora você sabe onde o VoiceOver obtém as informações que ele fornece aos usuários, é hora de conhecer uma nova ferramenta que irá ajudá-lo a encontrar e corrigir os pontos fracos de acessibilidade em seu aplicativo: o Inspetor de Acessibilidade.
Usando o Inspetor de Acessibilidade
Se você estiver instalando um aplicativo para ser mais acessível, encontrar pontos fracos é demorado e propenso a erros. Felizmente, há uma ferramenta para ajudar chamado Inspetor de Acessibilidade, que faz o seguinte:
- Executando seu aplicativo e encontra problemas comuns de acessibilidade.
- Permite verificar os atributos de acessibilidade dos elementos da IU no Modo de Inspeção.
- Provê previews ao vivo dos elementos de acessibilidade sem sair do seu aplicativo.
- Suporta todas as plataformas incluindo macOS, iOS, watchOS e tvOS.
>
Antes de usar o Inspetor de Acessibilidade em Receitas, dê uma olhada na ferramenta. Primeiro, abra-a no menu Xcode navegando para Xcode ▸ Open Developer Tool ▸ Accessibility Inspector.
The inspector should look something like this:
The target chooser lets you pick which device you would like to inspect. Este pode ser o seu MacBook Pro, um dispositivo iOS ou o seu simulador.
Avisualizações em directo dos elementos de acessibilidade permitem-lhe testar directamente no simulador. Como as pré-visualizações ao vivo são mais rápidas do que ouvir o VoiceOver, é aqui que você fará a maior parte do seu trabalho durante este tutorial de acessibilidade iOS.
Build e execute num simulador, e mude o alvo do Inspector de Acessibilidade para o seu simulador:
Agora que tenha a ferramenta aberta, você pode ver algumas das suas características mais úteis.
Usando o Ponteiro de Inspeção
Selecting Inspection Pointer, que parece uma visão de retículo na IU do inspetor, é semelhante a ativar o VoiceOver no seu dispositivo. Quando você ativa o ponteiro, você pode pairar sobre qualquer elemento da IU para verificar seus atributos. Interagindo com o simulador diretamente através do pressionamento de botões, o ponteiro de inspeção será desativado.
O painel de detalhes de inspeção tem tudo que você precisa para revisar e interagir com os atributos de acessibilidade em seu app:
- Básico: Exibe as propriedades dos atributos do elemento atualmente iluminado.
- Ações: Permite que você execute ações como tocar um botão ou rolar a visualização. Pressionar o botão Executar neste painel irá executar a ação em seu alvo.
- Elemento: Exibe a classe, endereço e controlador do item atual. A partir desta escrita, não funciona consistentemente.
- Hierarquia: Mostra a hierarquia de visualização do elemento, facilitando a compreensão de visualizações complexas.
Usando Quicklook para verificar áudio no Xcode
Xcode 11 tem uma nova funcionalidade no painel Inspection Detail, dentro da seção Quicklook no topo, que permite simular no Xcode o áudio que você ouviria no seu dispositivo. Isto significa que você pode verificar o que seus usuários ouvem ao usar seu aplicativo sem precisar de um dispositivo real.
Pressione o botão Play enquanto o aplicativo está sendo executado em um simulador, deixe o Inspetor de Acessibilidade percorrer o aplicativo e ouvir como ele descreve cada elemento em voz alta.
Se você preferir percorrer manualmente cada elemento, você pode pressionar o botão Pausa ou pressionar o botão Áudio dentro da seção Quicklook. Pressione os botões Avançar ou Voltar para percorrer cada componente ao seu próprio ritmo.
Utilizar este recurso é mais rápido do que executar sua aplicação em um dispositivo e usar o VoiceOver, particularmente durante o desenvolvimento. Como sempre, você também quer testar seu aplicativo, juntamente com todos os seus recursos de acessibilidade, em dispositivos reais.
Problemas de iluminação com a Auditoria do Inspetor
Uma das características mais úteis da Auditoria do Inspetor é sua capacidade de auditoria, que lhe dá avisos sobre problemas de acessibilidade dentro do seu aplicativo. Para experimentar este recurso, certifique-se de que o simulador ainda está rodando e você está na lista de receitas. No inspetor, clique no ícone Auditoria e, em seguida, Executar auditoria.
Verá que o inspector dá vários avisos, incluindo que alguns dos seus elementos não têm descrição.
Quando clica num aviso, o Xcode destaca o elemento relacionado no simulador, bem como na parte inferior da tela de Auditoria do Inspector.
Neste caso, as visualizações das imagens associadas às células não têm descrição. Isto significa que o VoiceOver não será capaz de descrevê-las aos seus leitores.
Clique no ícone Suggest Fixes, que parece um ponto de interrogação num círculo, para um dos avisos e o inspector irá oferecer sugestões sobre como corrigir o problema. Você vai agir sobre essas sugestões mais tarde.
Clique no ícone do Olho para tirar uma foto da aplicação. Isto é útil para qualquer pessoa em controle de qualidade que precise criar relatórios de bugs precisos.
Existem mais algumas configurações de acessibilidade úteis que você pode encontrar no inspetor. A seguir, você vai dar uma olhada rápida nestas características.
Configurações adicionais do inspetor
Embora estejam fora do escopo deste tutorial, é bom saber que o Inspetor de Acessibilidade também permite que você teste as seguintes configurações de acessibilidade:
- Inverter cores
- Incrementar contraste
- Reduzir transparência
- Reduzir movimento
- Alterar tamanho da fonte
Você não precisa mais usar o aplicativo Configurações para habilitar esses recursos. O Inspector de Acessibilidade oferece actualmente apenas estas cinco opções, mas a Apple planeia adicionar mais no futuro.
>
O Inspector de Acessibilidade poupa tempo ao testar o seu aplicativo. Lembre-se, no entanto, que você ainda deve testar o VoiceOver manualmente para testar a experiência real do usuário. Este último passo ajuda-o a detectar quaisquer problemas que o inspector perca.
Agora que tenha feito um tour pelas funcionalidades do Inspector de Acessibilidade, está na hora de começar a trabalhar no seu aplicativo.
Fazer a aplicação da receita acessível
Quando testou a sua aplicação no seu dispositivo com o VoiceOver, notou que as descrições das imagens não eram muito úteis. A ferramenta de auditoria mostrou-lhe a razão porquê: A visualização da imagem não tinha uma etiqueta de acessibilidade. Você vai corrigir isso agora.
No Xcode, abra RecipeCell.swift e adicione o seguinte código no final do arquivo:
// MARK: Accessibilityextension RecipeCell { func applyAccessibility(_ recipe: Recipe) { // 1 foodImageView.accessibilityTraits = .image // 2 foodImageView.accessibilityLabel = recipe.photoDescription }}
Este código preenche as propriedades de acessibilidade que faltam baseadas no objeto Recipe
para a célula. Aqui está como funciona:
-
accessibilityTraits
toma uma máscara de características que caracterizam o elemento de acessibilidade. Neste caso,.image
indica que se trata de uma imagem. - usa-se
accessibilityLabel
para descrever o elemento no VoiceOver. Aqui, está definido pararecipe.photoDescription
, que é uma string que descreve o conteúdo da imagem.
Agora, você quer aplicar isto em receitas futuras, também. Encontre configureCell(_:)
na classe RecipeCell
. Adicione a seguinte linha ao final do método:
applyAccessibility(recipe)
A cada vez que você criar uma célula, este código aplicará os atributos de acessibilidade à imagem usando propriedades no objeto da receita.
Build e execute no seu dispositivo e ative o VoiceOver com três toques no botão home. Teste a lista de receitas para ver se as descrições das imagens são mais significativas.
Muito melhor! Ao invés de simplesmente ouvir “Imagem”, que não forneceu detalhes específicos, você agora ouve uma descrição completa da imagem. O utilizador pode agora visualizar a comida em vez de ficar frustrado por não saber qual é a imagem.
Com a aplicação ainda a correr no simulador, corra novamente o Inspector de Acessibilidade e navegue até à lista de receitas. Certifique-se de limpar todos os avisos no inspector e toque em Run Audit.
WOOOt – sem mais avisos de descrição! Após adicionar com sucesso descrições às imagens, o núcleo desta vista está agora totalmente acessível.
Agora, é hora de tornar acessível o nível de dificuldade de uma receita.
Transformando as etiquetas de dificuldade
No Inspector de Acessibilidade, você vê avisos de texto potencialmente inacessíveis, que lhe dizem que as etiquetas de dificuldade são invisíveis para um utilizador com deficiências visuais. Para corrigi-los, você precisa tornar as etiquetas acessíveis e atualizar suas propriedades com uma descrição significativa.
Para o próximo passo, vá para RecipeCell.swift e adicione o seguinte ao final de applyAccessibility(_:)
:
// 1difficultyLabel.isAccessibilityElement = true// 2difficultyLabel.accessibilityTraits = .none// 3difficultyLabel.accessibilityLabel = "Difficulty Level"// 4switch recipe.difficulty {case .unknown: difficultyLabel.accessibilityValue = "Unknown"case .rating(let value): difficultyLabel.accessibilityValue = "\(value)"}
Aqui estão mais alguns detalhes sobre o que este código faz:
-
isAccessibilityElement
é uma bandeira que torna o item visível aos recursos de acessibilidade quandotrue
. Para a maioria das classes UIKit, o padrão étrue
, mas para o UILabel éfalse
. -
accessibilityTraits
ajuda a caracterizar o elemento acessibilidade. Como você não precisa de nenhuma interação, você o define para não ter traços. - Next, você tem o VoiceOver identificando concisamente a intenção deste rótulo.
Difficulty Level
permite ao utilizador saber exactamente com o que está a lidar. - VoiceOver irá ler o
accessibilityValue
como parte da descrição da etiqueta. Definir o nível de dificuldade aqui torna este elemento muito mais útil.
Build e execute a sua aplicação num dispositivo físico, toque três vezes no botão home para activar o VoiceOver e passe através da lista de receitas.
Enquanto percorre os diferentes elementos de acessibilidade, o VoiceOver lê uma descrição completa de cada célula, incluindo o nível de dificuldade.
Checking for Warnings
A cada vez que você expuser um novo elemento de acessibilidade, como você fez aqui com o nível de dificuldade, você deve executar a auditoria novamente.
Inicie o Inspetor de Acessibilidade, se ele ainda não estiver rodando. Execute o aplicativo no seu dispositivo ou no simulador e defina o alvo do inspetor de acordo. Agora, selecione o botão de alternância de auditoria e toque em Run audit.
Menos avisos apareceram! Os restantes são sobre as etiquetas que não suportam texto dinâmico. Você vai corrigir esses próximos.
Fazer o texto dinâmico
O auditor está avisando que você está perdendo um passo importante para tornar sua aplicação utilizável por todos: texto dinâmico. Esta é uma característica importante para a acessibilidade, permitindo aos usuários com deficiências parciais de visão aumentar o tamanho da fonte para a legibilidade. A fonte não dinâmica que a sua aplicação utiliza actualmente não o permite.
Clique no ícone Sugestões de Correcção para ver o que o auditor recomenda:
Diz-lhe para usar uma fonte preferida da UIfont e para definir adjustsFontForContentSizeCategory
para true. Você fará isso agora.
Within RecipeCell.swift adicione o seguinte código dentro de applyAccessibility(_:)
na parte inferior:
dishNameLabel.font = .preferredFont(forTextStyle: .body)dishNameLabel.adjustsFontForContentSizeCategory = truedifficultyLabel.font = .preferredFont(forTextStyle: .body)difficultyLabel.adjustsFontForContentSizeCategory = true
Isso define o preferredFont
para um estilo body
, o que significa que iOS irá estilizar o texto como se fosse o corpo de um documento. As especificidades do tamanho e da fonte dependem das configurações de acessibilidade. adjustsFontForContentSizeCategory
indica que a fonte deve ser atualizada automaticamente quando o usuário alterar o tamanho do conteúdo do texto.
Testar como seu aplicativo lida com o redimensionamento de fontes é fácil, graças ao Accessibility Inspector.
Build e executar o aplicativo de receitas junto com o Accessibility Inspector. Execute a auditoria novamente e todos os seus avisos devem desaparecer.
Testar algumas outras opções
Navigate to the Settings toggle in the inspector e experimentar algumas das ferramentas:
- Inverter cores para pré-visualizar o aspecto da sua interface com este recurso de acessibilidade. Isto é útil para pessoas com sensibilidade à luz, visão fraca e, em alguns casos, cegueira de cores.
- Você também pode testar mudanças dinâmicas de tamanho de fonte em tempo real para os usuários que preferem tamanhos de fonte maiores.
>
Como você testa seu aplicativo, ele provavelmente se parece muito com isto:
O inspetor facilita os casos de teste de acessibilidade. A partir disto, você pode dizer que a lista de receitas irá funcionar bem para usuários com deficiências visuais.
Transformando a Tela de Detalhes da Receita
Agora você cuidou da lista de opções de receitas, você quer ver o que acontece quando um usuário clica em uma das receitas. Execute a aplicação no seu dispositivo, active o VoiceOver e observe a vista de detalhes. Parece algo assim:
Existem alguns problemas com a interacção VoiceOver na vista de detalhes:
- O botão da seta para a esquerda não é uma boa descrição para a navegação. Como o usuário saberia o que o botão faz?
- Os estados emoji do rosto são: olhos em forma de coração e rosto confuso. Essas explicações confundiriam qualquer usuário!
- Quando o usuário seleciona uma caixa de seleção, ela lê um ícone vazio, o que não explica muito.
Em cada um desses casos, é importante explicar o que significa o estado do controle, ao invés de como ele se parece. O botão Voltar é mais claro do que o botão da Seta Esquerda. Goste e Não goste de explicar sucintamente os emojis. Você fará estas duas mudanças a seguir.
Para mudar a navegação, abra RecipeInstructionsViewController.swift e adicione o seguinte em viewDidLoad
, depois de assert(recipe != nil)
:
backButton.accessibilityLabel = "back"backButton.accessibilityTraits = .button
Em vez do botão da Seta Esquerda, VoiceOver agora diz botão Voltar.
Agora, para o emojis. No mesmo arquivo, substitua o conteúdo de isLikedFood(_:)
pelo seguinte:
if liked { likeButton.setTitle("😍", for: .normal) likeButton.accessibilityLabel = "Like" likeButton.accessibilityTraits = .button didLikeFood = true} else { likeButton.setTitle("😖", for: .normal) likeButton.accessibilityLabel = "Dislike" likeButton.accessibilityTraits = .button didLikeFood = false}
Para ambos os modos Like e Dislike, você adicionou um accessibilityLabel
que é claro sobre o que o botão faz. Você também definiu accessibilityTraits
para identificá-lo como um botão, para que o usuário saiba como pode interagir com ele.
Build e executar em um dispositivo e ativar o VoiceOver. Navegue até a tela de receita detalhada usando o VoiceOver para testar suas alterações nos botões no topo da visualização.
Agora, cada uma dessas características tem descrições claras e curtas que ajudam o usuário a entender sua intenção. Muito melhor!
Aprimorando as caixas de verificação
A última questão é com a lista de verificação. Para cada caixa de seleção, o VoiceOver atualmente declara o ícone vazio seguido pela instrução da receita. Isso não está claro de todo!
Para alterar isso, abra InstructionCell.swift e procure por shouldStrikeThroughText(_:)
. Substitua a instrução inteira if strikeThrough
pela seguinte:
// 1checkmarkButton.isAccessibilityElement = falseif strikeThrough { // 2 descriptionLabel.accessibilityLabel = "Completed: \(text)" attributeString.addAttribute( NSAttributedString.Key.strikethroughStyle, value: 2, range: NSRange(text.startIndex..., in: text))} else { // 3 descriptionLabel.accessibilityLabel = "Uncompleted: \(text)"}
Aqui está o que este código faz:
- Desliga o botão de verificação de acessibilidade para que o VoiceOver o leia como uma unidade em vez de dois elementos de acessibilidade diferentes.
- O
accessibilityLabel
para a descrição agora usa a string codificada"Completed"
seguida pelo texto. Isto fornece todas as informações necessárias com uma única visita à etiqueta. - Como com o código completo, se um usuário marcar um item como não concluído, você adiciona
"Uncompleted"
antes da descrição da etiqueta.
Build e executa o aplicativo novamente e vê como ele soa. Será música para os ouvidos dos seus utilizadores. :]
Where to Go From Here?
Pode fazer o download da versão completa do projecto usando o botão Download Materials no topo ou no fundo deste tutorial.
Neste tutorial de acessibilidade iOS, aprendeu sobre o VoiceOver. Você realizou a auditoria manual rolando por cada elemento acessível e testando a experiência do usuário por si mesmo. Então você usou o Inspetor de Acessibilidade para realizar auditorias, observar os valores dos elementos de acessibilidade e realizar mudanças dinâmicas ao vivo para inverter cores ou alterar o tamanho da fonte.
Agora, você tem as ferramentas necessárias para tornar seu aplicativo mais acessível. Saber que você vai ter um impacto positivo na vida de alguém é gratificante.
Há uma tonelada de possibilidades com recursos de acessibilidade. Este tutorial apenas risca a superfície para que você comece. Abaixo estão mais recursos para verificar:
- Categorias de Acessibilidade
- Recursos de Desenvolvimento de Acessibilidade
- Aplicando Acessibilidade a Visualizações Personalizadas
- Forneça uma Experiência Excepcional de Acessibilidade
- Inspecteur de Acessibilidade
Se você tiver algum comentário ou pergunta, por favor junte-se à discussão abaixo!
Semanalmenteraywenderlich.com
O raywenderlich.com newsletter é a maneira mais fácil de se manter atualizado sobre tudo o que você precisa saber como desenvolvedor móvel.
Receba um resumo semanal de nossos tutoriais e cursos, e receba um curso gratuito por e-mail em profundidade como um bônus!
Avaliação média
4.8/5
Adicionar uma avaliação para este conteúdo
Entrar para adicionar uma avaliação