Acessibilidade

Cada vez mais a Apple vem trabalhando em tecnologias para deixar seus produtos acessíveis a todos. Infelizmente poucos desenvolvedores incluem esses recursos em seus apps.

Queremos mudar esse cenário! Após esse tutorial você vai ver o quão simples é implementar o básico de acessibilidade no seu aplicativo, e com isso incluir milhares de novos usuários.

Por que?

De acordo com a Organização Mundial da Saúde temos mais de um bilhão de pessoas com deficiência no mundo – 1 em cada 7 – portanto provavelmente você já tem usuários que agradeceriam se seu aplicativo tivesse acessibilidade e outros que ainda não conseguem usá-lo.

As APIs de acessibilidade estão presentes em todas as plataformas da Apple, vamos exemplificar aqui com o iOS por ser o maior foco de desenvolvimento atualmente.


Dynamic Type

Introduzido no iOS7 o Dynamic Type – ou Texto Maior – é um sistema que permite aos usuários ajustar dinamicamente o tamanho do texto. Por padrão possui sete configurações de tamanho e mais cinco quando ativada a opção de acessibilidade.

Ajustes > Geral > Acessibilidade > Texto Maior

Para implementar o Dynamic Type precisamos ajustar a fonte do texto para um dos estilos de texto e habilitar a propriedade adjustsFontForContentSizeCategory. No Xcode 9 tudo isso pode ser feito pelo storyboard:

Ou via código:

label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

Temos os seguintes estilos para a visualização padrão e aumentada (Fonte Tamanho):

Fontes Customizadas

Caso seu aplicativo utilize uma fonte customizada não se preocupe, no iOS 11 ficou fácil de aplicar o Dynamic Type a qualquer fonte usando o UIFontMetrics. Podemos escalar nossas fontes customizadas de acordo com a métrica default, que representa o estilo .body.

label.font = UIFontMetrics.default.scaledFont(for: fonteCustomizada)

Recomendamos definir as fontes de acordo com os estilos, assim as variações serão proporcionais. Lembre-se que mesmo que seja utilizada a mesma fonte para todos os textos, os tamanhos e atributos podem variar, por isso devemos definir os estilos separadamente e deixar o UIFontMetrics acertar a proporção.

labelTitulo.font = UIFontMetrics(forTextStyle: .title1).scaledFont(for: fonteCustomizadaTitulo)
labelConteudo.font = UIFontMetrics(forTextStyle: .body).scaledFont(for: fonteCustomizadaConteudo)

VoiceOver

Agora que já ajustamos o tamanho de nossos textos dinamicamente, vamos implementar o VoiceOver. Essa funcionalidade lê os itens da tela em voz alta.

O processo é bem simples, seu funcionamento consiste em fazer os elementos responderem a três perguntas: Qual função? Qual título? Qual valor? Essas perguntas equivalem às propriedades accessibilityTraits, accessibilityLabel e accessibilityValue respectivamente.

Imagine que a tela que deixaremos acessível tem dois botões e uma label. Um botão zera o valor da label e o outro incrementa seu valor:

Começamos adicionando algumas propriedades pelo storyboard:

Repare que além das três propriedades que comentamos anteriormente, o Xcode exibe outras duas, totalizando os cinco atributos do UIAccessibilityElement. Com isso temos:

  • isAccessibilityElement: se o elemento deve ser marcado como acessível – por padrão todos os controles do UIKit são;
  • accessibilityLabel: nome do elemento de forma sucinta, preferencialmente localizado;
  • accessibilityTraits: aspecto do comportamento, estado ou uso do elemento. Múltiplos aspectos podem ser combinados;
  • accessibilityHint: descrição resumida do resultado da ação ou conteúdo do elemento – preferencialmente localizada;
  • accessibilityValue: valor atual do elemento, um slider pode ter valor “42%” por exemplo;

Para completar nosso exemplo, precisamos atribuir um valor na label quando carregar a tela e toda vez que o valor do contador for alterado, vamos ao código:

labelDisplay.accessibilityValue = "Valor atual: (contador.valor)"

Com isso, ao rodar o aplicativo no iPhone e ligar o VoiceOver, vemos que os elementos são selecionados sequencialmente e tem seus nomes falados em voz alta. Ao testar nesse modo podemos reparar que seria muito mais vantajoso se os botões também tivessem seus valores atribuídos junto com a label. Portanto ao atualizar o valor do contador temos agora:

let valor = "Valor atual: (contador.valor)"
labelDisplay.accessibilityValue = valor
buttonZerar.accessibilityValue  = valor
buttonContar.accessibilityValue = valor

Inspetor de Acessibilidade

Como você já deve saber, nada substitui o teste no aparelho, porém as vezes podemos ganhar tempo usando simuladores ou inspetores. O Xcode tem uma ferramenta inspecionar a acessibilidade do seu aplicativo – o Accessibility Inspector. Nele é possível testar opções como tamanhos do Dynamic Type, cores invertidas, etc. sem precisar alterar os valores no Ajustes. Também é possível realizar uma auditoria onde são encontrados problemas comuns, e inclusive soluções são sugeridas.


E agora?

Esperamos que essa pequena introdução o incentive a incluir acessibilidade nos seus projetos, além de ganhar usuários você estará contribuindo para um mundo cada vez mais acessível. Reserve alguns minutos para assistir a melhor palestra da #WWDC17Conveniência para você é Independência para mim do Todd Stabelfeldt.

Outras palestras importantes são: Design para Todos, Novidades em Acessibilidade e Auditando a Acessibilidade de seus apps. Não deixe de conferir a documentação oficial e experimentar o Accessibility Inspector em seus aplicativos.

Até a próxima >}