Acessibilidade da vitrine

Jan 12 2023
O Dilema de Acessibilidade Os critérios de sucesso para acessibilidade na web sob WCAG 2.1 (Diretrizes de Acessibilidade de Conteúdo da Web) podem ser esmagadores se vistos apenas da perspectiva do livro didático.
Uma ilustração artística mostra uma colagem de imagens. Uma mulher usando um cachecol amarelo e uma jaqueta preta com um logotipo de acessibilidade na Web em marca d'água. Um usuário cego sobre um fundo de teclado. Uma mão com um molde de bandagem. Um cifrão conecta todas as 3 imagens.

O dilema da acessibilidade

Os critérios de sucesso para acessibilidade na Web sob WCAG 2.1 (Diretrizes de Acessibilidade de Conteúdo da Web) podem ser esmagadores se vistos apenas da perspectiva do livro didático. Na minha experiência, desenvolvedores e gerentes têm reações de desconforto quase unânimes a projetos de acessibilidade na Web. Tais como: temos que ler “tudo isso”, é apenas “tão chato”, “basta executar o validador” … grilos e tumbleweeds para resumir.

Como desenvolvedor e aprendiz de Acessibilidade na Web, percebi que, depois de superar a “dor excruciante” de ler os critérios, é possível abordá-los de diferentes ângulos. Do ponto de vista da experiência do usuário , por exemplo, e também por camadas. Lentamente, mas realmente, apenas testando. Algo que os desenvolvedores fazem o tempo todo. Agora, isso geralmente me leva às seguintes perguntas e respostas:

Mas, o que precisamos “testar” exatamente?

O que fazemos inconscientemente na maioria das vezes: a jornada do usuário .

Como fazemos isso?

Ao simpatizar conscientemente com as deficiências que nossos usuários podem ter, em outras palavras, simular ou emular.

Não basta testar meu site com um validador?

Não é. Os validadores são de grande ajuda ao analisar sites grandes para alguns critérios. Como 20% deles apenas. No entanto, tenho visto validadores passando por sites com louvor apenas para perceber que, na verdade, não são acessíveis na prática.

Analogia concreta, por favor?

Acreditar que só porque você obedece a alguns critérios torna seu site “acessível” até certo ponto. Seria como pensar que o seu prédio de escritórios é “acessível” porque tem um botão muito grande para abrir a porta automaticamente na entrada principal… mas só depois de passar por um estacionamento de cascalho e subir uma escada. Então, para começar, como o usuário chega à porta?

Acessibilidade da vitrine

Muitos setores estão sujeitos à conformidade de acessibilidade na Web atualmente, para alguns - como o governo - é obrigatório. O varejo on -line tornou-se alvo de um número crescente de ações judiciais , também os usuários com deficiência têm expectativas claras , portanto, uma necessidade crescente de Storefront Accessibility está aumentando. Às vezes, fazendo a diferença entre uma abordagem “lead-to-cash” para um resultado “lead-to-lawsuit”.

Instalações

Vamos ilustrar o processo com um exemplo, mas primeiro estabelecer algumas premissas:

  1. O principal objetivo de uma vitrine é permitir que os usuários façam o checkout dos produtos.
  2. Os elementos da interface devem facilitar o processo de checkout do usuário, incluindo usuários com deficiência.
  3. Os desenvolvedores e testadores de garantia de qualidade geralmente fazem testes fingindo que um usuário pode ir com sucesso do ponto A para B ou Z na interface. As mesmas pessoas também devem testar se os usuários com deficiência são capazes de chegar aos mesmos pontos.
  4. Ir com sucesso do ponto A para B ou Z em um teste, enquanto emula uma Persona com deficiência, resultará em uma série de critérios de acessibilidade cumpridos com sucesso.

Antes de entrar no que é uma Persona , vamos esclarecer a empatia . Parece algo fácil de fazer, já ouvimos muitas vezes: “colocar-se no lugar do outro”, o quão difícil pode ser? Bem, acontece que as pessoas têm diferentes níveis de empatia e geralmente são influenciadas por suas próprias experiências de vida... então não é tão fácil assim.

Simpatia NÃO é empatia

Além disso, diferentes percepções do que significa empatia complicam as coisas, já ouvi muitas definições espontâneas: é ter um grande coração, ser todo sentimental com alguma coisa, ser um filantropo, ou ler as emoções “nas entrelinhas”… sim, acho que sim poderia muito bem ser tudo isso dependendo do contexto da conversa, mas ainda assim, todos os mencionados acima estão mais próximos da simpatia do que da empatia. Agora, quando se fala em Acessibilidade Web , felizmente a empatia é uma questão muito pragmática. Por exemplo, uma vitrine online pode ser acessada ou não. Em outras palavras, “meio acessível” não funciona se uma jornada crítica não for bem-sucedida. Como não faria para uma loja de tijolo e argamassa. Os compradores com deficiência podem ou não entrar e fazer compras.

Independentemente de como alguém “sente” sobre o fato, nossas boas intenções, pensamentos e emoções despejados em pensar sobre os usuários que não podem usar a loja não a tornarão mais acessível. Isso é simpatia. É legal. É motivação. Isso ajuda. Isso aumenta a consciência. Mas não torna os sites acessíveis.

Minha história usual para “induzir” as pessoas à empatia é a seguinte, vamos primeiro adicionar um ambiente descontraído e fingir que estamos em um restaurante ou bar, cercados por familiares, amigos ou transeuntes ocasionais, geralmente o contexto em que conto esta história:

Imagine que você (um usuário sem deficiência) está comprando online um produto simples, como digamos... teclado .

Resistência à Empatia

Claro que sempre há resistência a esse exercício de empatia, e é normal, somos colocados fora da nossa zona de conforto. Então eu ouço coisas como: “e se eu estiver usando um laptop que tenha um mousepad embutido”… vamos concordar que não é esse o ponto. Pode parecer bobagem ter que simpatizar com algo tão banal quanto ter um mouse, mas é relevante para todo o processo.

Devo apontar um fator geracional nessas audiências casuais de minhas histórias; lembre-se de que os usuários que possuíam um computador em meados dos anos 80 podem se lembrar de como se mover na tela com um teclado, naquela época os mouses de bola estavam apenas começando a ser introduzidos e foi somente no final dos anos 90 que os mouses ópticos se tornaram disponível comercialmente, mas os usuários que nasceram nessas décadas podem ser pegos desprevenidos imaginando um cenário apenas com teclado. Como eu disse, não é tão fácil ter empatia.

De qualquer forma, assim que o exemplo for assimilado e as pessoas começarem a lançar teorias e lembrar ou descobrir como se movimentar na tela usando apenas o teclado , então teremos uma ideia, um plano, um roteiro — uma jornada — de como finalizar o checkout .

Ok, uma vez assimilada esta jornada do teclado, vamos adicionar complexidade : vamos fingir que você comprou este item muitas vezes (obtenha lenços amarelos para todos) e agora você sabe o processo de cor, sabe "tão bom" que você pode fazê-lo sem um mouse, tão bom que dá para fazer “de olhos fechados”… sério? … vamos tentar isso: navegação pelo teclado + olhos fechados .

Pessoas com Deficiência

Antes de fechar os olhos , vamos definir o que é uma Persona ; No contexto do User Experience (UX) Design, “ personas ” são usuários arquetípicos cujos objetivos e características representam as necessidades e limitações de um grupo maior de usuários. Sim, colocar rostos para os usuários ajuda no processo de empatia, pesquisando no Google “personas para acessibilidade” podemos encontrar muitas personas prontamente disponíveis para usar, mas sim, mais leitura … grilos e tumbleweeds novamente.

Dito isto, para acompanhar a narrativa casual simplificada no bar, e como este artigo está começando a ficar longo (perdendo o ponto de não ter que ler muito), vamos simplificar demais em um parágrafo curto algumas pessoas que podem ser facilmente emulado por usuários sem deficiências. Entra Jane & John , vindo de um artigo anterior , eles me ajudaram antes ao definir as perspectivas e expectativas da base de acessibilidade.

  • Jane: a usuária destra, que recentemente quebrou a mão direita, tem que usar a navegação apenas pelo teclado, depende de sua visão para saber onde ela está na tela e para chegar ao próximo elemento em uma interface de usuário.
  • John: usuário cego, usa navegação apenas pelo teclado, depende de uma vocalização do leitor de tela para saber onde ele está e para chegar ao próximo elemento em uma interface do usuário.

Há muitas maneiras pelas quais um usuário pode navegar em uma vitrine, mas sempre há caminhos mais comuns, aqueles em que a vitrine realmente gera dinheiro são as jornadas críticas do usuário . A navegação apenas por teclado não é exceção a isso, então vamos concordar com uma jornada média super simples com base no produto de uma história no Storefront Accessibility, um lenço amarelo para mulheres .

Jornada Crítica do Usuário

Caso de uso de teste: Jane está querendo comprar um cachecol amarelo para si mesma. Por outro lado, John quer comprar o mesmo cachecol para a namorada dela. Para esclarecer melhor, Jane e John não são parentes, não se conhecem.

Para ambos, Jane & John , a jornada crítica para comprar um lenço amarelo para mulheres será mais ou menos assim:

Vá para o campo Pesquisar > digite “Cachecol amarelo para mulheres” > Vá para o primeiro produto (fingindo ser o lenço amarelo) > Inicie o processo de finalização da compra.

Emular ou Simular?

Estamos chegando lá, obrigado por ler até aqui. A diferença entre simulação e emulação é sutil. Como ambos incluem a palavra “imitação”, vamos nos ater a esse conceito. Para o exemplo a seguir, usaremos software de emulação, então vamos chamá-lo de emulação, mas saiba que definitivamente quero dizer imitação.

Agora, a imitação é a chave para a empatia, e precisamos fazer isso o mais próximo possível de como Jane & John navegará até aquele lenço amarelo em uma loja. Sabemos que ambos usarão a navegação apenas por teclado, o que nos deixa com as seguintes teclas para concluir a compra.

Interações de teclado

  • ABA
  • SHIFT+TAB
  • ESPAÇO
  • DIGITAR
  • Teclas de seta.

Ok, é aqui que eu desafio o público do bar e você, leitor — brincadeira —, convido você a escolher uma, ou várias, vitrines online que existem na web. Mas o mais importante, aquele em que você pode encontrar um lenço amarelo para mulheres e tentar ir o mais longe possível no processo de checkout, imitando Jane & John . Dito isso, você não precisa “realmente” comprar o cachecol todas as vezes, não se não quiser.

Imitando Jane

Siga a jornada crítica do usuário usando apenas as teclas do teclado que Jane usaria.

Imitando John

Ative a extensão ChromeVox e — finalmente! — feche os olhos e siga a jornada crítica do usuário ouvindo o que a vocalização lhe diz e usando apenas as teclas do teclado que John usaria.

Problemas comuns

Ao comparar sua experiência de emulação em diferentes tipos de acessibilidade de vitrine, você pode se deparar com problemas como: ser incapaz de tabular para o próximo elemento lógico na página aterrissando em elementos aleatórios, incapaz de tabular de qualquer ponto adiante (armadilha do teclado) , incapaz de ouvir uma descrição significativa do produto, como sua cor ou seu preço. Infelizmente, isso é muito comum e um indicador da falta de acessibilidade na Web em um determinado site.

Cumprimento do critério

Esclarecimento de termos: critérios é plural; critério é singular.

Agora, se você conseguiu concluir com êxito o processo de checkout emulando Jane & John , essa vitrine atendeu aos seguintes critérios WCAG 2.0 .

Tabela mostrando 16 critérios para a emulação bem-sucedida de Jane e John (teclado, sem interceptação de teclado, ignorar blocos, ordem de foco, navegação consistente, foco visível, conteúdo não textual, informações e relacionamentos, título da página, objetivo do link, idiomas da página, Em foco, identificação de erros, análise, títulos e rótulos, prevenção de erros). Os primeiros 6 critérios são para Jane e John, e os 10 restantes são apenas para John.

Observe como a maioria dos critérios são de Nível A com apenas alguns de Nível AA. Na minha opinião, esses são os critérios mais importantes a serem cumpridos “para começar”. Eles estabelecem a base para construir uma experiência de usuário mais rica sobre eles. Por exemplo, adicionar mais critérios de nível AA ou conectar outras tecnologias assistivas, como telas em braile. Vamos considerá-los a parte difícil, ou independente de critérios “mais simples”, como os relativos ao uso de cores, tamanho do texto, vídeo e áudio.

Bem, é aqui que termina a história do bar. Se você conseguiu ou não terminar a emulação como Jane & John . Mesmo que você tenha experimentado um pouco, merece um brinde. Como você já deve ter percebido, ao fechar os olhos , você começou a “ver” onde estão os problemas com o Storefront Accessibility. Então, um brinde a isso! com o que você está bebendo.

Para concluir

  1. Podemos validar a Storefront Accessibility “andando a pé” com empatia.
  2. Ao planejar, desenvolver e testar uma vitrine online, qualquer esforço no processo para remover bugs relacionados aos 16 critérios mencionados acima facilitará o checkout para usuários com deficiência.
  3. Um desenvolvedor da Web deve garantir que uma jornada crítica acessível do usuário realmente funcione antes de entregá-la ao testador de controle de qualidade.
  4. A melhor ferramenta de validação é a empatia.
  5. Às vezes, fechando os olhos, podemos “ver” onde está o problema.
  6. Os compradores com deficiência devem poder comprar online da mesma forma que fazem em lojas físicas.
  7. Ninguém está isento de deficiência ao longo da vida, na melhor das hipóteses: todos nós envelhecemos.
  8. A Acessibilidade na Web deve ser vista como uma oportunidade de negócios em qualquer estratégia lead-to-cash antes de se tornar um cenário lead-to-law .