Get best of the week

Como realizamos testes de acessibilidade na Alfa Digital

Os produtos digitais devem ser não apenas bonitos, convenientes e lucrativos, mas também acessíveis a pessoas com deficiência. Isso é mais importante do que parece à primeira vista. Às vezes, isso deve ser transmitido aos negócios, aos proprietários dos produtos e aos colegas diretos. Mas isso acaba trazendo seu produto para um novo nível. Estamos com um desenvolvedor iOS sêniorfamilkoconte sobre a nossa experiência.

O Alfa-Bank faz parte de um grupo de trabalho especial criado pelo Banco Central com o objetivo de melhorar a qualidade dos produtos financeiros para grupos com deficiência visual. Uma metodologia especial de trabalho e avaliações já foi desenvolvida, à qual todos os bancos aderem.

E foi assim que testamos.

imagem

Usuários e cenários


Antes de tudo, convidamos pessoas com deficiência visual (de diferentes grupos) para testar.

O primeiro grupo de deficiências visuais são pessoas totalmente cegas, que são forçadas a usar dispositivos e softwares especiais (leitores de tela, VoiceOver).

O segundo e o terceiro grupos são deficientes visuais, que, dependendo da doença, usam esses dispositivos ou gerenciam com sucesso sem eles.

Sim, é importante observar que, quando você realiza qualquer teste, cujo resultado será a conclusão ou mesmo o processamento de todo o aplicativo ou de suas funções individuais, não será prejudicial transmitir sua necessidade aos negócios. Porque também custa, tempo, esforço. Aqui se conta uma história que, por um lado, essas ações para pessoas com deficiência visual são de responsabilidade social da empresa, por outro lado, como mostram as estatísticas, até 30% da população do país pode ter dificuldades temporárias com a visão em diferentes situações, e isso já figura impressionante.

Portanto, nos reunimos e nos sentamos para testar com eles os quatro cenários mais populares para o uso do Alpha Mobile. Aqui estão eles:

  • autorização de aplicação
  • verificação de saldo
  • visualizar suas contas (histórico, status)
  • recarga de conta de celular

É claro que, dependendo de uma pessoa em particular, os cenários podem ser diferentes - alguém costuma pagar pelos serviços de moradia e comunitários usando um código QR, alguém transfere dinheiro para parentes, mas os quatro mais comuns são esses.

Métodos e ferramentas de teste


Existe um GOST R 52872-2012 especial , "Requisitos de acessibilidade para deficientes visuais", que descreve todos os padrões em detalhes suficientes. É isso que usamos, atribuindo a cada erro encontrado um rótulo correspondente. No total, todos os problemas encontrados foram divididos em três categorias.

Problema de design. Por exemplo, na entrada do banco móvel, esta é a janela habitual para todos inserirem o código PIN, você não tem foco no campo de entrada e a pessoa não diz em voz alta quantas tentativas ele tem para inserir o PIN.

imagem

Foi assim conosco. Parece um problema mais ou menos, mas isso é uma coisa crítica. Se uma pessoa não consegue ouvir se inseriu o alfinete corretamente ou não, quantas tentativas ainda restam, pode muito bem exceder esse número de tentativas. Isso significa que a entrada do Alfa Mobile será temporariamente bloqueada com todos os inconvenientes resultantes.

Problema de qualidade do código. É quando nem todos os elementos que você pronuncia corretamente. Por exemplo, em alguns lugares, as setas de navegação podem ser ditas como "Fim da tabela" e partes semelhantes do sistema.

imagem

O problema do contraste. Por exemplo, aqui, mesmo com visão normal, é difícil ler o texto. Você deve se livrar disso e levar isso em conta imediatamente.

imagem
"
Havia quatro etapas principais em nosso trabalho:

  • Reuniu um grupo de testadores (7 pessoas) e regrediu o aplicativo
  • Separados dos ramos de desenvolvimento, analisaram problemas e elementos
  • Eles anotaram em um prato, priorizaram
  • Crítico começou a editar

Os testes realmente ajudam a abordagem da Apple na criação de produtos. Em primeiro lugar, é realmente conveniente testar tudo diretamente no dispositivo, os cupertinos adaptaram tudo de bom.

Em segundo lugar, existe o Xcode com seu inspetor de acessibilidade, este utilitário mostra uma visualização específica de botões e elementos quando você passa o mouse na tela, pode ler rapidamente tudo e entender se será dublado corretamente. Na verdade, no nosso caso, esse era o principal problema - botões de assinatura do VoiceOver.


Encontramos defeitos avaliando a funcionalidade e a conveniência de um aplicativo móvel usado por pessoas com problemas de visão. A avaliação é realizada testando a passagem de todos os cenários básicos do usuário.

Os cenários mais básicos do usuário disponíveis para o cliente e as menos barreiras e dificuldades identificadas durante a passagem do script, maior a classificação.

O nível de disponibilidade do script é determinado pelo problema mais crítico.

  • crítico recebe um cenário no qual é detectado um problema crítico de disponibilidade que não permite que a tarefa seja concluída.
  • minor recebe um cenário em que problemas de acessibilidade de criticidade média são detectados quando os usuários enfrentam dificuldades significativas na conclusão da tarefa.
  • low recebe um cenário em que problemas de disponibilidade de baixa criticidade são detectados quando os usuários enfrentam alguma dificuldade em concluir uma tarefa.

Como evitar defeitos de acessibilidade?


Primeiro, use o protocolo UI Accessibility Element.

Então você precisa melhorar o Voice Over (uma função especial do Makoshi que ajuda um usuário com deficiência visual a trabalhar com comandos de voz e teclado):

  • Botões de sinal.
  • Adicione valores.
  • Deixe uma dica.
  • Controles de grupo.
  • Corrija as inscrições erradas.
  • Indique o tipo de controle: botão, inscrição, link, etc.
  • Estenda botões ou itens se eles forem muito estreitos (mínimo 44: 44)

Aqui está o que mais recomendamos:

1. Botões - .accessibilityLabel

Cada botão deve receber um nome curto e ressonante. O VoiceOver fará hedge, se você esquecer, ele tentará ler o texto ou o nome do ícone no botão.

O que você precisa assinar:

  • Botões com um ícone, mas sem texto;
  • Imagens. Se possível, é melhor assinar o que é mostrado na figura.
  • Um botão e uma imagem sem rótulo exprimem o nome do ícone, como em Ativos

imagem


2. Valores - .accessibilityValue

Além do nome, você pode escrever um valor. Por exemplo, ao inserir a quantia em dinheiro com textField, você precisa assinar o nome da conta ou final digital e também indicar o número de rublos.

imagem

3. Dicas - .accessibilityHint

Se quisermos esclarecer melhor a ação, podemos escrever uma dica em .accessibilityHint. Mas você não deve confiar muito em avisos: explicações constantes o incomodam, para que alguns usuários os desativem pelas configurações do telefone.

O botão é exibido como "Para outro banco", para explicação, você pode deixar uma dica, que tipo de transferência, com que rapidez e assim por diante.


4. Controles de grupo - .accessibility

Por padrão, cada elemento é falado separadamente. Isso é inconveniente: as zonas de pressão são reduzidas, você pode não perceber algo, portanto é necessário generalizar.

Agora a célula possui vários campos: cartão, dinheiro e nome, 3 controles por célula. É necessário generalizar que havia 1 célula e um nome, para que fique mais próximo do significado.


Como corrigi-lo?

  1. Torne o controle acessível da célula inteira. Por padrão, todas as visualizações são apenas contêineres para outros elementos; o VoiceOver os ignora. Para marcar a visualização como um elemento final, você deve definir a célula comoAccessibilityElement = true.
  2. Dê um nome à célula. Você não pode mais se concentrar no rótulo, portanto, você deve especificar manualmente o texto. accessibilityLabel = specialOffer.title

Você pode simplificar:

  1. Torne o controle acessível da célula inteira. Defina a célula isAccessibilityElement = true
  2. Em accessibilityLabel, escreva o mais importante: o nome do cartão e da conta. Separado por vírgula, o VoiceOver leva em consideração a pontuação.
  3. Em accessibilityValue, especifique informações adicionais; no nosso caso, é isso que conta, quanto dinheiro.
  4. Indique que a célula pode ser pressionada, ou seja, isso é essencialmente um botão. accessibilityTraits = .button


Total


Os corretores USABILITYLAB nos deram o primeiro lugar em termos de disponibilidade de aplicativos. Isso não significa que somos tão legais e fechamos todos os problemas em geral, tornando-se um aplicativo ideal, não. Mas estamos trabalhando nisso, levando em consideração todas as sutilezas e características de trabalhar com pessoas que têm problemas de visão.

Também é muito legal que essa história tenha nos ajudado a atrair essas pessoas - elas geralmente nos enviam feedback e vários entrevistados agora ajudam a testar a Alfa Mobile continuamente.

Trabalhamos mais.

More articles:


All Articles