Quer saber como auditamos nosso Design System for Accessibility?

Feb 28 2023
Na Birdie, um dos nossos valores é “Nós nos importamos”. Nós nos preocupamos com nossa sociedade, com as pessoas com quem trabalhamos e para quem trabalhamos, com o planeta e com as maneiras pelas quais podemos impactar positivamente milhões de outras vidas.
Foto de Neil Thomas no Unsplash

Na Birdie, um dos nossos valores é “Nós nos importamos”. Nós nos preocupamos com nossa sociedade, com as pessoas com quem trabalhamos e para quem trabalhamos, com o planeta e com as maneiras pelas quais podemos impactar positivamente milhões de outras vidas. Com cuidado em nosso núcleo, era bastante natural ver um grupo de evangelistas de acessibilidade em Birdie tentando colocar a acessibilidade em primeiro lugar na agenda.

Nosso objetivo para 2023 é tornar nosso produto acessível, começando pelo nosso Design System. Por que começamos com o Design System? É a única fonte de verdade para nossa IU. Ele agrupa os elementos de implementação relacionados, define sua finalidade e esclarece sua entrega. Do ponto de vista da acessibilidade, o Design System apresenta uma oportunidade única de incluir acessibilidade em nossos componentes. Ele nos permite escalar a acessibilidade: tornamos um componente do Design System acessível uma vez e ele se aplica a todos os lugares onde o componente é usado.

Como realizamos a auditoria?

Auditamos o Sistema de Design em relação aos critérios de sucesso WCAG 2.1 Nível AA:

  • WCAG significa Web Content Accessibility Guidelines, um conjunto de recomendações para tornar o conteúdo da web mais acessível. As WCAG são consideradas o padrão internacional para acessibilidade na web.
  • WCAG 2.1 é a versão mais atual do WCAG.
  • O nível AA é o nível de conformidade usado na maioria das regras e regulamentos de acessibilidade em todo o mundo, incluindo o Americans with Disabilities Act (ADA) e o European Accessibility Act.
Nosso sistema de design no Storybook

Auditoria extensiva, tanto automatizada quanto manual

Decidimos realizar a auditoria internamente utilizando as ferramentas de acessibilidade disponíveis online, até porque dispúnhamos internamente dos conhecimentos e competências necessários. Utilizamos o axe DevTools by Deque que é uma ferramenta de teste de acessibilidade automatizada e guiada, disponível como extensão do Chrome ou extensão do Firefox. Ele aparece como um painel nas ferramentas do desenvolvedor. Você pode testar uma página inteira ou apenas parte de uma página, e todos os problemas detectados são classificados por gravidade e vêm com trechos de código para facilitar a depuração.

Auditoria do nosso componente de etiqueta pelo axe DevTools

Embora as ferramentas de teste automatizadas possam fornecer uma vantagem sólida, a auditoria de acessibilidade é complexa e sempre requer muitos testes manuais. Para cada componente, realizamos uma série de diferentes testes manuais:

  • Leitores de tela: use leitores de tela para garantir que a sequência de leitura esteja correta, ou seja. palavras e parágrafos são apresentados em uma ordem que não altera o significado do conteúdo.
  • Navegação pelo teclado: teste a navegação dos componentes apenas com o teclado, certificando-se de que o conteúdo exposto por meio do ponteiro/hover também seja operável pelo teclado e que a interação e a navegação do teclado nunca fiquem presas em um componente.
  • Redimensionamento de texto: verifique se, quando redimensionado para 200% (i) o texto é ajustado adequadamente, (ii) as barras de rolagem estão presentes e (iii) o conteúdo fora da tela pode ser exibido.
  • Reespaçamento do texto: procure conteúdo ou funcionalidade perdida como resultado do aumento do espaçamento do texto.
  • Níveis de cabeçalho: inspecione a estrutura de cabeçalho dos componentes para verificar se os cabeçalhos comunicam adequadamente a organização do conteúdo.
  • Gerenciamento de foco: para elementos interativos, mova o foco de um elemento para outro e verifique se (i) os elementos recebem o foco em uma ordem lógica, (ii) nenhum elemento é pulado na ordem de foco natural e (iii) quando o elemento em foco desaparece, o usuário volta para onde estava antes de focar no elemento.
  • Características visuais: quando a cor é usada para transmitir informações ou distinguir um elemento visual, certifique-se de que haja uma sugestão visual diferente que não dependa da cor e que transmita a mesma informação.
  • Alternativas de texto para imagens: verifique se alternativas de texto são fornecidas para qualquer conteúdo não textual, para que possa ser alterado para outras formas de tecnologia assistiva de que os usuários precisam, como braille ou fala.

Como tornar o resto do produto acessível?

Depois que os componentes individuais do Design System tiverem acessibilidade integrada, definiremos uma jornada do usuário principal e a tornaremos acessível também. Infelizmente, ter um Design System acessível não significa que os fluxos de usuário no nível da página serão acessíveis, portanto, ainda haverá uma quantidade razoável de esforço. Como Matt May, chefe de design inclusivo da Adobe, disse corretamente: “Se existisse um tijolo acessível, você ainda poderia construir uma casa totalmente inacessível, e isso tem a ver com a forma como as coisas funcionam”.

Nosso objetivo final é que, em cada equipe de entrega, a acessibilidade seja integrada ao ciclo do produto. Isso afetará cada função:

  • Os gerentes de produto incentivarão os designers e desenvolvedores a adotar hábitos que levem a resultados mais acessíveis, discutindo os requisitos de acessibilidade de forma mais explícita no refinamento para direcionar o pensamento em todo o esquadrão. Eles garantirão que as decisões iniciais na definição de recursos suportem um resultado acessível.
  • Os designers considerarão a acessibilidade e as diferentes maneiras pelas quais os usuários interagem com os aplicativos na pesquisa de design. Eles envolverão pessoas com deficiência em testes de usuário.
  • Os engenheiros usarão ferramentas como linters de acessibilidade que sinalizam erros de acessibilidade enquanto você codifica. Em última análise, eles incluirão verificações de acessibilidade em seu pipeline de CI para evitar que a solicitação pull seja mesclada se forem encontrados erros de acessibilidade.

Estamos contratando para uma variedade de funções dentro da engenharia. Venha conferir aqui:

https://www.birdie.care/join-us#jobs-live