Recapitulando a #WWDC20
Implementando acessibilidade visual em apps iOS
Um guia para você preparar seu app e dar suporte a 10 recursos de acessibilidade visual disponíveis para usuários de iOS
Quando criamos interfaces, queremos que elas sejam bonitas, atrativas e bem agradáveis para nossos usuários. Mas o que pode ser confortável para a nossa visão, pode ser não ser a melhor opção para pessoas que possuem alguma deficiência visual.
Pensando na implementação de recursos de acessibilidade visual em aplicativos criados para as plataformas da Apple, lembramos logo do Voice Over. Para quem não conhece, o Voice Over é um leitor de tela ativado por gestos, capaz de descrever exatamente o que aparece na interface de um iPhone, Mac, Apple Watch ou Apple TV. Esse recurso é bem importante, por oferecer a possibilidade de pessoas navegarem pelos apps sem a necessidade de enxergar o que tem na tela.
Mas os recursos de acessibilidade visual dos dispositivos Apple vão bem além do Voice Over — e tem várias opções fáceis de implementar que podem ajudar muita gente.
É importante criar interfaces que ofereçam uma experiência visual inclusiva para todas as pessoas. Para se adequar aos diversos tipos de deficiência visual, a Apple oferece diferentes recursos de acessibilidade que podem ser ativados diretamente nos Ajustes dos dispositivos. Quando adaptamos nossas interfaces para suportar esses recursos, respeitamos as pessoas que dependem dessas configurações e garantimos que elas possam aproveitar ao máximo os nossos produtos.
É sobre isso que Drew Hass fala na WWDC20, em sua sessão Make Your App Visually Accessible. No vídeo, ele fala sobre vários recursos interessantes e fáceis de implementar, e vou falar sobre cada um deles aqui:
Cores & Formas
Uma das coisas mais importantes ao planejar uma interface é ter a certeza de que certos elementos vão se diferenciar de outros. O caminho mais comum/óbvio de fazer isso é utilizando cores diferentes em elementos que precisam se destacar no layout. Porém, a diferenciação por cores pode não ser eficiente para todos os usuários, sendo a melhor opção combinar cores com formas.
1. Button Shapes
Em Tab Bars, a indicação de que uma aba está ativa é feita, por padrão, pela mudança da cor do botão. Mas como falamos antes, essa diferenciação pode não ser suficiente para todas as pessoas. Existe uma configuração que pode ser ativada pelo usuário chamada “Button Shapes” (ou Figuras nos Botões, em português), que permite que os botões não tenham apenas uma indicação de cor, mas também de forma.
Com o iOS 14, é possível checar manualmente se a configuração está ativa e oferecer uma aparência alternativa e acessível do botão.
No iPhone, você pode encontrar essa configuração em Ajustes > Acessibilidade > Tela e Tamanho do Texto > Figura nos botões
2. Differentiate Without Color
Quando adicionamos elementos na interface que dependem da cor para ter significado, algumas pessoas podem não ver a diferença entre eles e, por consequência, não entender o significado que atribuímos àqueles elementos.
No iOS 13, a Apple lançou o Differentiate Without Color (ou Diferenciar Sem Cor, em português), que nos permite usar símbolos como uma forma alternativa de comunicar a função de elementos que se diferenciam originalmente pela cor. Com o código abaixo, você pode conferir se a configuração está ativa e oferecer alternativas para o seu layout.
Quando essa configuração está ativa, o app pode mostrar ícones que ajudam na interpretação dos elementos visuais. Veja um exemplo:
No iPhone, você pode encontrar essa configuração em Ajustes > Acessibilidade > Tela e Tamanho do Texto > Diferenciar Sem Cor
3. SF Symbols
Na WWDC19, a Apple anunciou o lançamento do SF Symbols, um conjunto de mais de mil símbolos que podemos usar em nossos apps. Todos os símbolos estão disponíveis em vários pesos e tamanhos e são perfeitamente compatíveis com San Francisco, a fonte padrão do sistema no desenvolvimento iOS.
A variedade de ícones disponíveis é enorme, o que ajuda bastante na hora de implementar o recurso Differentiate Without Color.
Sendo integrados com a fonte do sistema, os SF Symbols se alinham automaticamente com o texto de labels, reduzindo consideravelmente o nosso esforço ao criar componentes que combinam texto e ícones. A melhor parte dessa integração é o suporte a Dynamic Type e Bold Text, outros recursos de acessibilidade que vamos falar mais pra frente.
Para usar os ícones diretamente no código, encontre a referência do símbolo desejado pelo app do SF Symbols e use o código abaixo, trocando “shuffle” e “location.fill” pela referência que você quiser.
Para usar os ícones em programas de design que possuem suporte a SF Symbols, basta copiar o símbolo no app e colar nos campos de texto do programa. Caso a ferramenta que você estiver usando não tenha esse suporte, você pode exportar um arquivo .svg, que inclui todos tamanhos e pesos do ícone escolhido.
O app do SF Symbols está disponível para download aqui.
4. Increase Contrast
O contraste entre cores tem um papel bem importante na legibilidade de elementos na tela, principalmentez textos e ícones. Para enxergar melhor o contraste entre os elementos da interface, algumas pessoas escolhem ativar uma configuração chamada Increase Contrast (ou Aumentar Contraste, em português), que atualiza as cores da tela para uma aparência de alto contraste.
Quando usamos as cores do sistema do iOS, elas se ajustam automaticamente às configurações relacionadas a cores, como a Increase Contrast. Porém, se você optar por usar cores customizadas, ofereça variações para o modo de alto contraste, garantindo que seu app vai oferecer uma boa experiencia visual para todas as pessoas que ativarem a configuração.
É possível alterar a Tint Color dos elementos, ou oferecer assets alternativos para o modo de alto contraste. Para importar assets alternativos e garantir o suporte a essa configuração, vá na pasta de assets, clique no asset que quer, e no menu do lado direito marque a caixa High Contrast. Depois é só adicionar uma versão de contraste mais alto, e o asset será atualizado automaticamente quando o Increase Contrast estiver ligado.
Uma dica é usar calculadoras de contraste de cor, para medir o nível de contraste entre duas cores que está usando no seu app. Um contraste de 4.5:1 geralmente é o limite aceitável, não sendo uma boa opção para alternativas de alto contraste. Teste mudar os valores das cores que está usando e aumentar o nível de contraste, tornando os elementos visíveis e legíveis para todos.
Você pode encontrar essa configuração em Ajustes > Acessibilidade > Tela e Tamanho do Texto > Aumentar Contraste
5. Smart Invert Colors
Um tempo atrás, bem antes do dark mode, a Apple lançou uma feature de inverter as cores do celular, que funcionava principalmente para tornar a visualização mais agradável para pessoas que tinham sensibilidade aos fundos claros. Essa função invertia todas as cores, incluindo fotos, ilustrações e outros elementos visuais — o que prejudicava parte da experiência de alguns apps para os usuários que utilizavam a feature.
No iOS 11, a Apple lançou uma nova versão dessa feature, chamada Smart Invert Colors (ou Inversão Inteligente, em português), que por muitos é conhecida como uma versão provisória do dark mode que usamos hoje. A diferença principal entre a inversão inteligente e a clássica é que a configuração mais nova não inverte todas as cores do dispositivo, preservando as cores originais dos ícones de apps, imagens, arquivos de mídia, apps que possuem um modo escuro implementado, e alguns outros gráficos.
É importante considerar que algumas pessoas preferem usar o celular nesse modo. Se você tem elementos na sua interface que precisam estar na cor original para oferecer a experiência certa — como fotos, vídeos, etc -, garanta que você está sinalizando que determinadas Views não devem ter as suas cores invertidas.
No iPhone, você pode encontrar essa configuração em Ajustes > Acessibilidade > Tela e Tamanho do Texto > Inversão Inteligente
Legibilidade de Textos
6. Large Text e Dynamic Type
Textos com fontes menores podem ser bons para apresentar mais conteúdo na tela, por ter espaço disponível para mostrar mais palavras. Enquanto isso, textos com fontes grandes podem tornar a visualização e legibilidade de textos mais fácil. Algumas pessoas preferem textos com fontes maiores ou menores que o padrão, e usam as configurações do telefone para mudar o tamanho das fontes de apps, ativando o Dynamic Type e o Large Text.
Para o seu app se adequar a esses tamanhos dinâmicos, o ideal é se planejar com antecedência e criar uma interface que se adeque aos diferentes tamanhos de fonte, sem comprometer a experiência do produto. Os símbolos também devem aumentar com o texto e, como vimos antes, o SF Symbols oferece vários ícones que se adequam automaticamente às labels do seu app — incluindo o suporte ao Dynamic Type.
Para identificar a mudança no tamanho das fontes e atualizar o layout de acordo com essas atualizações, você pode usar o código abaixo:
Uma coisa legal é que você pode usar um operador de comparação para conferir se a fonte é maior ou menor que o tamanho padrão do sistema. Assim, é possível setar diferentes configurações para diferentes casos, adaptando a interface ao espaço disponível.
No iPhone, você pode encontrar essa configuração em Ajustes > Acessibilidade > Tela e Tamanho do Texto > Texto Maior
7. Bold Text
É possível ligar uma configuração chamada Bold Text (ou Texto em Negrito, em português), que aumenta o peso das fontes de textos, aumentando a legibilidade das palavras na interface sem prejudicar a hierarquia.
A fonte do sistema é adaptada automaticamente quando esse modo está ativo. Porém, essa atualização automática não funciona tão bem com fontes de terceiros, sendo necessário fornecer manualmente uma versão alternativa para o modo negrito. É possível identificar com o código abaixo se a configuração foi ativada nos Ajustes:
No iPhone, você pode encontrar essa configuração em Ajustes > Acessibilidade > Tela e Tamanho do Texto > Texto em Negrito
Preferências do Display
8. Reduce Motion
Uma coisa que muitos de nós adoramos são as animações. Elas podem ser agradáveis, confortáveis, bonitas, convidativas e agregar bastante na experiência de uso. Mas é extremamente importante lembrar que algumas pessoas tem sensibilidade a animações. Para essas pessoas, existe uma configuração chamada Reduce Motion (ou Reduzir Movimento, em português), que suaviza ou diminui a quantidade de animações nos apps.
É importante respeitar os usuários que ligam essa configuração. Por isso, o ideal é que voce confira com o código abaixo se essa configuração está ativa e ajuste todos os elementos animados do seu app — animações de interface, videos e gifs que comecem automaticamente, transições, etc.
No iPhone, você pode encontrar essa configuração em Ajustes > Acessibilidade > Movimento > Reduzir Movimento
9. Prefer Cross-Fade Transitions
Ainda falando sobre animações, precisamos falar sobre a configuração Prefer Cross-Fade Transitions (ou Preferir Cross-Fade, em português).
Em Navigation Controllers, ao ir de um View Controller para outro, existe uma animação padrão de deslize, em que uma tela desliza sobre a outra, cobrindo a anterior. Essa animação padrão pode ser substituída automaticamente por uma animação cross-fade, caso o usuário tenha ativado a configuração Prefer Cross-Fade Transitions nos Ajustes.
Caso voce esteja utilizando uma animação nativa, ela será substituída automaticamente. Portanto, se você tiver implementado animações customizadas, é preciso adicionar uma versão alternativa manualmente. Com o iOS 14, é possível detectar se essa configuração está ativa com o código abaixo:
No iPhone, você pode encontrar essa configuração em Ajustes > Acessibilidade > Movimento > Reduzir Movimento > Preferir Cross-Fade
10. Reduce Transparency
Algumas pessoas podem ter problemas para enxergar alguns elementos e ler textos em fundos com efeito de transparência, podendo causar até tontura em alguns usuários. Com a configuração Reduce Transparency (ou Reduzir Transparência, em português), os efeitos de transparência são transformados em fundos opacos com uma cor sólida, ajudando usuários a lerem textos em views que originalmente possuem fundos com esse efeito “borrado”.
Use os efeitos de blur do sistema sempre que puder. Assim, seus fundos serão automaticamente adaptados para uma versão mais acessível para todas as pessoas que ativarem essa configuração nos Ajustes. Se você nao tiver usando o efeito padrão do sistema, use o código abaixo para detectar se a configuração está ativa:
No iPhone, você pode encontrar essa configuração em Ajustes > Acessibilidade > Tela e Tamanho do Texto > Reduzir Transparência
Agora é com você!
Pegue seus dispositivos, teste todos os recursos de acessibilidade disponíveis e veja como os apps que você criou estão se comportando. Veja quais recursos você ainda pode trabalhar mais um pouco, para garantir que as pessoas possam ter a melhor experiência possível com o seu app. Muitos recursos podem parecer pequenos detalhes para você, mas ajudam muita gente. É um trabalho extra, mas vai valer muito a pena!
Seguindo as dicas desse artigo e implementando o suporte às features que conversamos aqui, você vai poder oferecer uma interface que se adapte à necessidade de cada um, preservando a experiência do seu produto e oferendo alternativas inclusivas para todos. Tenha sempre em mente que, para a maioria dos recursos, há maneiras bem fáceis de implementar alternativas acessíveis — isso quando o próprio sistema já não faz o trabalho sozinho.
Uma dica valiosa é pensar nesses recursos desde o começo, e prototipar a interface levando em consideração todas as alternativas que serão implementadas — unir design e código torna o desenvolvimento dessas features ainda mais fácil.
Links úteis:
- Human Interface Guidelines sobre acessibilidade: https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/introduction/
- Leitura legal sobre os recursos de acessibilidade (de vários tipos) da Apple para cada dispositivo — sugiro visitar as abas de cada dispositivo e não deixar de ver os vídeos na aba de histórias: https://www.apple.com/br/accessibility/
- GitHub Gist com todos os códigos desse artigo : https://gist.github.com/renataporto/6f8085cfa6d147957e97186c68e7bbb9
