🛌🏽 🗾 🍛 Controle de qualidade e seu papel na criação de recursos para pessoas com deficiência 👋🏼 🆕 💛

Neste artigo, quero chamar a atenção para o fato de que o problema da acessibilidade de sites e aplicativos para pessoas com deficiência é mais agudo do que parece. Sob o gato, há uma lista de ferramentas úteis para testar e microauditar vários sites conhecidos.

Primeiro, vamos definir os termos.

HIA - opções limitadas de saúde. Essas pessoas podem ter desvios no desenvolvimento físico e / ou mental de um espectro muito diferente. De acordo com o relatório da OMS (Organização Mundial da Saúde) sobre o HIA 2018:

Mais de 1 bilhão de pessoas, aproximadamente 15% da população mundial, tem algum tipo de deficiência.
De 110 a 190 milhões de adultos têm dificuldades de mobilidade, problemas de visão / audição, etc.
Mais de 12 milhões de pessoas com deficiência vivem na Rússia (a maioria são adultos).

Graças à tecnologia, os usuários com deficiência podem trabalhar, desenvolver e se divertir mais ou menos completamente, encomendar roupas e produtos, em geral, fazer tudo como todos os outros.
Para facilitar o acesso dessas pessoas à Internet, você deve prestar mais atenção à disponibilidade de serviços e produtos digitais.

E aqui está o controle de qualidade e o que podemos fazer

O principal objetivo do controle de qualidade é garantir a qualidade de um serviço ou produto. Quero que o conceito de "qualidade" se encaixe cada vez mais na "acessibilidade". De acordo com o manual que escrevi abaixo, acessibilidade é a implementação de conteúdo na Web, de forma que usuários da maior variedade possível possam trabalhar com ele, incluindo pessoas com deficiência.

A propósito, essas recomendações ajudarão a tornar o site mais acessível para usuários que não possuem determinadas restrições. Como posso argumentar sobre o desenvolvimento de produtos em uma conversa com um cliente?

Muitas pessoas com deficiência estão na Internet todos os dias, e essa revisão permitirá que eles usem o produto sem problemas,
A adaptação ajudará o produto a se destacar entre os concorrentes,
Um produto adaptado pode afetar positivamente o número de usuários e a classificação da empresa como um todo,
, , , . ,
“accessibility id” ( iOS) iOS ,
, .

?

Os critérios detalhados para conformidade do produto são descritos no Guia de Acessibilidade ao Conteúdo da Web (WCAG).

Do principal: existem três níveis de conformidade que dependem da situação específica e do grupo de usuários: o mais baixo , o meio e o mais alto . Os níveis são divididos em quatro princípios principais: perceptibilidade, controlabilidade, compreensibilidade, confiabilidade.

Cada um dos princípios inclui requisitos de conteúdo diferentes, por exemplo, é importante fornecer uma versão em texto de elementos que não sejam de texto, garantir o controle total apenas do teclado ou evitar elementos de design perigosos para a saúde. Uma lista completa dos requisitos de nível pode ser encontrada no mesmo WCAG 2.1.

Na Internet, na maioria das vezes você encontra um painel de configurações de exibição para pessoas com deficiência. A propósito, há algum tipo de história com o painel HIA. Você ainda pode verificar como sua implementação corresponde aos layouts. Mas como entender como uma pessoa com deficiência visual lê essa ou aquela informação já é uma pergunta.

Por exemplo, como você sabe se uma pessoa com deuteranomalia (um estado de visão caracterizado por uma ligeira diminuição na sensibilidade às ondas do espectro verde ) é normal para ver os elementos da página? Para resolver esse problema, a ferramenta NoCoffee é adequada.

Nocoffee- Uma extensão gratuita para navegadores (Chrome, Firefox), um simulador de defeitos visuais. Muito fácil de usar e eficaz. A ferramenta é popular, obteve muitas críticas positivas, mais de 20.000 downloads em diferentes plataformas com uma classificação média alta de 4 em 5.
imagem

Como o NoCoffee funciona

Com o NoCoffee, você pode verificar a exibição de pessoas com todos os tipos de daltonismo: protanoma, protanopia, deuteranomaly, deuteranopia, tritanomaly , tritanopia, acromatopsia, tetracromatia. É possível simular vários defeitos visuais / doenças oculares e outros fatores externos: baixa acuidade visual, cataratas, baixo contraste de pico, nistagmo, defeitos no campo visual.

Tive sorte (ou azar), meu irmão teve deuteranomaly, pedi a ele para descrever as cores que ele vê no site em que apliquei o filtro deuteranomaly. Depois disso, verifiquei nossos resultados e eles foram os mesmos, mais ou menos.

Exemplos de painéis "configurações para HIA"

Fundo de pensão da Rússia

imagem

No portal “Fundo de configurações do HIA”, existem alguns erros de layout. Mas há uma vantagem: ele tem seu próprio player para reproduzir o texto selecionado. Essa é uma alternativa aos leitores de tela. O leitor de tela é um programa para leitura de uma tela de computador ou smartphone, projetado para cegos e deficientes visuais. Ela faz a voz do texto, dos elementos da interface e também fornece feedback de som e vibração.

O site concentra-se no trabalho dos leitores de tela e é muito bem adaptado para o trabalho deles, mas mais sobre isso posteriormente. Banco

VTB O

imagem

Banco VTB implementou um “painel de configurações HIA”; existem alguns problemas com a exibição de elementos ao alterar as configurações deste painel. Mas, em geral, vale a pena prestar homenagem - eu não encontrei essa funcionalidade em outros bancos.

Sociedade Russa de Pessoas com Deficiência

imagem

Porém, no site da Sociedade Russa de Pessoas com Deficiência, o “painel de configurações do HIA” acabou sendo, mas suas capacidades são mínimas e há problemas no layout. Obviamente, eu gostaria que esse recurso fosse mais adaptado para seus usuários.

Bilhete WorldSkills para o futuro

imagem

Trabalhamos no site do projeto Ticket WorldSkills para o futuro. Aqui, implementamos configurações para exibir elementos da página para pessoas com deficiência. Além de alterar a cor dos elementos, também há um design separado (diferente do padrão) para exibir os elementos ao alternar cores.

Além de ajustar os temas de cores, nos painéis HIA geralmente há uma função para aumentar o tamanho do texto, uma função para ativar / desativar as imagens ( isso está em todos os exemplos acima ).

Menos comum é a capacidade de personalizar a exibição do texto: o intervalo entre os caracteres e a fonte com serifa, essas configurações são projetadas para pessoas com dislexia (a dislexia é uma deficiência específica de aprendizagem de origem neurológica, caracterizada por dificuldades no reconhecimento preciso ou fluente das palavras e capacidade insuficiente de leitura e escrita ) . Aliás, isso foi implementado no site da VTB e no Fundo de Pensões da Rússia.

Infelizmente, não existem simuladores de comprometimento neurológico e praticamente a única maneira de verificar a correção da exibição de texto com serifas ou com um intervalo maior entre os caracteres é verificar a funcionalidade de uma pessoa com dislexia.

Voltar ao teste de acessibilidade

Outra boa ferramenta de teste é o machado .

O ax foi projetado para verificar a conformidade de um site ou aplicativo com as diretrizes da WCAG 2. Esta é uma extensão para navegadores, atualmente está instalada mais de 100.000 vezes e possui uma classificação de 4,5.

Como funciona o machado

A ferramenta é fácil de usar. Você deve instalar a extensão no navegador. O gerenciamento é realizado no painel do desenvolvedor - após a instalação, uma nova guia ax é exibida. Quando você muda, vemos vários anúncios, chamadas para "comprar uma versão pro", mas o mais importante é o botão de análise.

Uma análise de uma das páginas do Serviço de Estado revelou 10 não conformidades com os requisitos das WCAG. Podemos supor que o site esteja bem adaptado para pessoas com deficiência:
imagem

porém, ao analisar uma das páginas da FIU, foram encontradas 29 inconsistências. Definitivamente, são necessárias melhorias aqui, especialmente considerando o fato de que as pessoas com deficiência e as pessoas idosas estão usando precisamente o recurso.
imagem

O site da Sociedade Russa de Pessoas com Deficiência possui 69 inconsistências com as recomendações das WCAG.
imagem

O que obtemos depois de analisar o machado:

. : , WCAG 2.
.

Para adaptar o site a pessoas com problemas de habilidades motoras finas e àquelas que não podem usar o mouse, é necessário implementar elementos da página para que o usuário possa alternar entre eles com a tecla Tab.

Um bom exemplo é "Gosulugi":
imagem

A figura mostra como percorrer os elementos da página sequencialmente e na ordem correta, usando a tecla Tab.

O site da Sociedade Russa de Pessoas com Deficiência está mal adaptado para alternar com a tecla Tab.
imagem

Não é exibida a exibição de elementos da página. A transição entre os elementos é realizada de forma gradual e inconsistente. Isso pode complicar bastante a vida do usuário com deficiências.

A operação correta dos leitores de tela é afetada principalmente por: não usar o atributo alt para imagens, tags para cabeçalhos, usar elementos para marcar formulários, dicas de ferramentas e muito mais.

Todos os problemas acima ajudarão a encontrar o machado. Se você eliminar a maioria dos problemas identificados pelo machado ao analisar uma página ou aplicativo da Web, os leitores de tela funcionarão corretamente. Naturalmente, o resultado ideal nunca será, mas a diferença entre os resultados do teste de leitura do texto pelo leitor de tela antes de corrigir os problemas identificados pelo machado e depois disso será enorme.

Materiais úteis

Diretrizes de acessibilidade para conteúdo da Web (WCAG) 2.0 - um documento regulatório com base no qual software é desenvolvido para pessoas com deficiência;

O WebLind é um bom recurso sobre o desenvolvimento de sites para pessoas com deficiência visual;

Diretriz - um recurso para desenvolvedores, gerentes, designers na implementação do site para pessoas com deficiência.

Total

Em geral, o campo de trabalho para melhorar os recursos em termos de acessibilidade é realmente enorme. Espero que em breve haja mais ferramentas, assim como controle de qualidade e desenvolvedores que possam explicar aos negócios a necessidade de tal adaptação. Isso é uma coisa boa para todos: as pessoas com deficiência podem usar totalmente os recursos e os negócios receberão novos usuários.

Como seu site ou aplicativo está acessível? Você usa alguma ferramenta de teste?

Controle de qualidade e seu papel na criação de recursos para pessoas com deficiência