Como você coloca acessibilidade dentro do seu processo de design?

Projete com ela dentro em vez de auditar depois. Cheque contraste de cor enquanto escolhe as cores (4.5:1 para texto corrido, 3:1 para texto grande e componentes de interface segundo o WCAG 2.2 AA), especifique ordem de foco e comportamento de teclado na especificação, anote headings, labels e landmarks para os engenheiros, e inclua tamanho de alvo e preferências de movimento. Fazer retrofit depois da construção sempre custa mais.

Eu tento tornar isso chato e rotineiro em vez de uma auditoria heroica no fim. Quando eu escolho cores eu checo contraste ali mesmo, e nossos tokens carregam o passa ou não passa junto para ninguém ter que pensar nisso depois. Todo fluxo que eu entrego tem uma história de teclado: qual é a ordem de tabulação, para onde o foco vai quando um modal abre e para onde ele volta quando fecha, e como os erros são anunciados. Eu anoto estrutura direto nos frames, então níveis de heading, o que é botão versus link, e o nome acessível para controles só com ícone. Esse último pega muito bug, porque um botão de ícone sem nome acessível é anunciado só como 'botão' mesmo parecendo perfeitamente certo. Eu rodo o axe na versão construída e mantenho o VoiceOver na minha máquina e uso, mal, mas o suficiente para pegar quebra óbvia. E eu incluo tamanho de alvo, pelo menos 24 por 24 pixels CSS segundo o WCAG 2.2, mais alternativas de movimento reduzido para qualquer coisa que anima.