ALLY: Lista de verificação de acessibilidade de interface do usuário para designers

✅ Projetar produtos digitais acessíveis a todos é crucial. Ao tornar nossos designs acessíveis, estamos criando um mundo mais inclusivo. Aqui estão dicas e ações a serem lembradas ao projetar para acessibilidade:

Tecnologia assistiva:

A tecnologia assistiva são dispositivos como aparelhos auditivos, ferramentas de ampliação e leitores de tela que ajudam a aprimorar, manter ou melhorar as habilidades funcionais de pessoas com deficiência.

Leitores de tela:

Software de acessibilidade de leitores de tela, como TalkBack do Google no Android, VoiceOver da Apple no iOS e JAWS da Freedom Scientific no desktop. Os leitores de tela leem em voz alta o texto e os elementos na tela (como botões), incluindo texto alternativo visível e não visível.

Texto e tipografia:

• A apresentação visual de texto e imagens de texto tem uma taxa de contraste suficiente de pelo menos 4,5:1 (Nível AA)
• Use fontes fáceis de ler e evite fontes decorativas ou cursivas.
• Evite usar letras maiúsculas , pois dificulta a leitura do texto para pessoas com dislexia.
• Use tamanho de fonte apropriado e espaçamento entre linhas para melhorar a legibilidade.
• Evite usar a cor sozinha para transmitir significado.

• Não confie na cor como o único método de transmitir informações.
• Certifique-se de que haja contraste suficiente entre as cores do texto e do plano de fundo. Aqui está uma ferramenta útil:https://webaim.org/resources/contrastchecker/
• Teste seu design usando simuladores de daltonismo para garantir que seja acessível a pessoas com daltonismo.

• Certifique-se de que a navegação seja fácil de usar e intuitiva. Você deve ter uma ordem de foco (mais sobre isso aqui ) onde os componentes focalizáveis ​​(controles, campos de entrada, botões, links) recebem o foco em uma ordem que garante significado e operacionalidade.
• Por exemplo, quando o usuário clica na barra de pesquisa — ele entra em um foco (estado). O campo de entrada recebe o que eles digitam no teclado e exibe os caracteres que você digita. Você deve habilitar a mesma interação para usuários de teclado.
• Use rótulos claros e descritivos para todos os links e botões.
• Forneça atalhos de teclado e suporte para leitores de tela.
• Use texto alternativo descritivo para todas as imagens e conteúdo não textual.

• Use rótulos claros e concisos para todos os campos do formulário.
• Use tipos de entrada apropriados para campos de formulário (por exemplo, e-mail, telefone, etc.).
• Use mensagens de erro apropriadas e forneça feedback claro sobre o envio do formulário usando cor, espessura da fonte ou sublinhado de texto.
• Certifique-se de que o formulário seja facilmente navegável e possa ser preenchido usando a navegação somente pelo teclado.
• O foco do design indica que possuem áreas contrastantes com uma taxa de contraste mínima de 3:1. Isso é chamado de área de contraste (veja abaixo).

• Forneça transcrições ou legendas para todo o conteúdo de áudio e vídeo.
• Certifique-se de que os controles de áudio e vídeo sejam acessíveis e fáceis de usar.
• Forneça formatos alternativos para conteúdo multimídia (por exemplo, descrição de áudio para conteúdo de vídeo).
• Para Devs: use aria-labels e Alt tags para imagens e multimídia para descrever o que são. Dependendo da semântica, isso garantirá que os leitores de tela não os ignorem.
• O texto Alt traduz uma IU visual em uma IU baseada em texto. O texto alternativo é um rótulo curto (até 125 caracteres) no código que descreve uma imagem para usuários que não podem vê-los.

• Certifique-se de que o design seja otimizado para dispositivos móveis.
• Use um design responsivo para garantir que o layout se adapte a diferentes tamanhos de tela.
• Certifique-se de que os alvos de toque sejam grandes o suficiente para serem facilmente ativados. A área deve ter pelo menos 44x44 pixels e 48x48dp para Android. Mais detalhes aqui

Projetar com acessibilidade em mente não é uma tarefa fácil. Comece com empatia - considere os casos extremos e reconheça os diferentes recursos para usar seu produto. Esta lista de verificação não é uma lista exaustiva de padrões de acessibilidade, mas um ponto de partida, portanto, verifique os links abaixo.

Ao seguir esta lista de verificação de acessibilidade, você pode tornar seus projetos mais inclusivos e acessíveis a uma ampla gama de usuários, incluindo aqueles com deficiências. Isso pode melhorar a experiência do usuário para todos os usuários e ajudar a criar um ambiente digital mais inclusivo e acessível.

Leitura adicional e recursos:

https://m2.material.io/design/usability/accessibility.html

https://design.gitlab.com/accessibility/keyboard-only

https://web.dev/focus/

https://www.sarasoueidan.com/blog/focus-indicators/