Muitas pessoas usam o desenvolvimento orientado a componentes com guias de estilo de padrões, bibliotecas de componentes ou sistemas de design completos no processo de fluxo de trabalho de desenvolvimento. Mesmo que você não tenha usado essas ferramentas formalmente, é provável que use um processo semelhante para dividir um design grande de um site, app ou outro produto digital em partes gerenciáveis.
Assim como na construção de uma estrutura física, é importante criar uma peça de cada vez. Primeiro, a base, a estrutura, as paredes, as janelas, o telhado e tudo mais. As ferramentas de desenvolvimento orientado a componentes permitem fazer isso para sites, apps e outros produtos digitais.
Algumas vantagens do desenvolvimento orientado a componentes incluem a divisão em partes gerenciáveis, o que reduz o tempo de desenvolvimento com esses componentes reutilizáveis. Ele permite que designers, desenvolvedores de front-end e back-end e QA trabalhem simultaneamente. E os clientes, designers, PMs e outros gostam porque podem visualizar o processo de build e usar um guia de estilo dinâmico como referência depois que o site é lançado.
No entanto, quando analisamos padrões, componentes e sistemas de design com foco na acessibilidade, algumas perguntas surgem. Como saber quais padrões são melhores quando se trata de acessibilidade? Você deve usar um padrão ou biblioteca estabelecida ou criar novas? Como saber se esses padrões vão ajudar seus usuários?
Com a variedade de opções disponíveis, você pode ficar confuso sobre padrões, componentes e sistemas de design. O objetivo deste módulo é fornecer informações gerais sobre como avaliar padrões, componentes e sistemas de design para acessibilidade e oferecer um ponto de partida para ajudar você a fazer escolhas mais acessíveis.
Pensar criticamente
Escolher um padrão, componente ou sistema de design acessível não é uma ciência exata, mas exige tempo e pensamento crítico. Na verdade, não existe um "padrão perfeito", mas pode haver muitas opções que funcionam. É preciso aprender a escolher a melhor opção para sua situação específica.
Nos módulos de teste subsequentes, você vai ler mais sobre as técnicas e os métodos de avaliação de padrões, componentes e sistemas de design para acessibilidade. Antes disso, você precisa fazer algumas perguntas fundamentais, como:
- Já existe um padrão, componente ou sistema de design acessível estabelecido?
- Quais navegadores e tecnologia adaptativa (TA) eu ofereço suporte?
- Há limitações de código ou framework? Há outras integrações, fatores ou necessidades do usuário que eu preciso considerar?
Dependendo do ambiente de desenvolvimento e das necessidades do usuário, você pode ter outras perguntas. Considere essas perguntas como ponto de partida na avaliação de acessibilidade.
Recursos estabelecidos
Antes de criar algo novo, faça a devida diligência e analise o que já existe em termos de padrões, componentes e sistemas de design acessíveis. Com um pouco de pesquisa, você pode encontrar uma ou várias soluções que atendam às suas necessidades.
Alguns ótimos recursos para padrões, componentes e sistemas de design acessíveis incluem:
- Componentes acessíveis (link em inglês)
- Biblioteca ARIA da Deque University (link em inglês)
- Sistema de design do Gov.UK (link em inglês)
- Componentes inclusivos (link em inglês)
- MagentaA11y (link em inglês)
- Sistema de design da Web dos EUA (USWDS), criado para o governo federal dos Estados Unidos
- Lista de padrões acessíveis da Smashing Magazine (link em inglês)
Para frameworks JavaScript, os recursos a seguir são bastante acessíveis por padrão ou personalizáveis para acessibilidade:
- Quando o CSS não é suficiente: requisitos de JavaScript para componentes acessíveis (link em inglês)
- React (link em inglês)
- Angular: biblioteca de materiais (link em inglês)
- Vue: Vuetensils (link em inglês)
No entanto, e isso não pode ser enfatizado o suficiente, você nunca deve apenas copiar/colar o código e presumir que ele vai se ajustar ao seu ambiente e atender automaticamente às necessidades do usuário. Isso é verdade para todos os padrões, componentes e sistemas de design, mesmo que sejam rotulados como totalmente acessíveis.
Todos os recursos devem ser considerados um ponto de partida. Não deixe de testar tudo!
Suporte a navegadores e tecnologias adaptativas (TA)
Depois de pesquisar alguns padrões básicos, componentes ou um sistema de design completo que possa funcionar para seu ambiente de desenvolvimento, você pode passar para o suporte a tecnologia adaptativa. Um dos principais tipos de TA em que você vai querer se concentrar ao avaliar padrões, componentes e sistemas de design são os leitores de tela.
Os leitores de tela foram criados com navegadores específicos em mente e funcionam melhor quando pareados com eles. Vamos abordar esse tópico com muito mais detalhes no módulo sobre testes de TA, mas, para fins de avaliação de padrões, é útil entender que essas combinações existem para que você saiba o que precisa em termos de suporte.
| Leitor de tela | SO | Compatibilidade com navegadores | Custo |
|---|---|---|---|
| Job Access with Speech (JAWS, na sigla em inglês) | Windows | Chrome, Firefox, Edge | Requer licença (existe uma versão sem custo financeiro de 40 minutos) |
| Non-Visual Desktop Access (NVDA, na sigla em inglês) | Windows | Chrome e Firefox | Sem custo financeiro (requer download) |
| Narrator | Windows | Edge | Sem custo financeiro (integrado a máquinas Windows) |
| VoiceOver | macOS | Safari | Sem custo financeiro (integrado a máquinas macOS) |
| Orca | Linux | Firefox | Sem custo financeiro (integrado a distribuições baseadas em Gnome) |
| TalkBack | Android | Chrome e Firefox | Sem custo financeiro (integrado a determinadas versões do SO Android) |
| VoiceOver | iOS | Safari | Sem custo financeiro (integrado a dispositivos iOS) |
O suporte a navegadores é geralmente complicado, e as coisas ficam ainda mais difíceis quando você adiciona dispositivos de TA e especificações ARIA à mistura.
Mas nem tudo são más notícias. Felizmente, ótimos recursos, como a acessibilidade do HTML5, o suporte à acessibilidadee a lista de verificação de desenvolvimento acessível de controle personalizado da WCAG nos ajudam a entender melhor o suporte atual a navegadores e dispositivos de TA e até mesmo quando usar o ARIA.
Esses recursos descrevem os diferentes subelementos de padrão HTML e ARIA disponíveis, incluindo testes da comunidade de código aberto. Você também pode conferir alguns exemplos de padrões para navegadores de computadores, navegadores para dispositivos móveis e dispositivos de TA. Assim, esses recursos podem ajudar você a tomar uma decisão mais acessível em relação a padrões, componentes e sistemas de design que você queira usar.
Outras considerações
Depois de escolher alguns padrões ou componentes básicos acessíveis e considerar o suporte a navegadores e dispositivos de TA, você pode passar para perguntas contextuais mais específicas sobre o padrão, o componente, o sistema de design e o ambiente de desenvolvimento.
Por exemplo, se você estiver trabalhando em um sistema de gerenciamento de conteúdo (CMS) ou tiver um código legado, pode haver algumas limitações para os padrões que você pode usar. Após a análise, várias opções de padrão podem ser reduzidas rapidamente a uma ou duas.
Muitos frameworks JavaScript permitem que os desenvolvedores usem quase todos os padrões que escolherem. Nesses casos, você pode ter menos restrições e escolher a opção de padrão mais acessível.
Há outras considerações a serem consideradas ao escolher um padrão, componente ou sistema de design, como:
- Desempenho
- Segurança
- Otimização de mecanismos de pesquisa
- Suporte à tradução de idiomas
- Integrações de terceiros
Esses fatores, sem dúvida, vão influenciar sua escolha de padrão, mas você também precisa considerar as pessoas que criam o conteúdo e o código. O padrão escolhido precisa ser robusto o suficiente para lidar com possíveis limitações em relação ao conteúdo gerado pelo editor ou pelo usuário, além de ser criado de uma forma que possa ser usado por desenvolvedores de todos os níveis de conhecimento de acessibilidade.