e Matemática, Desenvolvedora Back-end na Sensedia, Voluntária e Host do Canal do YouTube da NodeBR, ex-aluna do [des]programe, {reprograma} e DigitalHouse>. Professora de Programação, além de Participante e Palestrante em diversas comunidades de TI. Quem sou? @mocraveirodev
possível saber o que está escrito, uma vez que as palavras estão borradas. No entanto, há dicas visuais que nos auxiliam a entender quais informações estão disponíveis e onde elas estão.
mundo vivem com algum tipo de deficiência. Fonte: Nações Unidas Pelo menos 45 milhões de pessoas têm algum tipo de deficiência no Brasil. Fonte: IBGE/2019
63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.
uma boa experiência é através do WCAG, uma documentação criada pelo WAI (Web Accessibility Initiative) para conteúdos na web. Este documento é estruturado da seguinte forma:
específicos que devem ser atingidos e, para cada critério de sucesso, estão disponíveis técnicas específicas, com exemplos de como o objetivo do critério pode ser atingido e testado. Cada critério de sucesso é indicado por um nível de conformidade, que pode ser A, AA ou AAA: Nível A: barreiras mais significativas de acessibilidade. Não garante um site altamente acessível; Nível AA: estar em conformidade com todos os critérios de sucesso de nível AA garante um site bastante acessível. Nível AAA: o nível de conformidade triplo A é bastante meticuloso, ou seja, visa garantir um nível otimizado de acessibilidade. A maioria dos critérios de sucesso de nível AAA referem-se a situações bastante específicas, normalmente objetivando refinar os critérios de sucesso de nível AA. Muitos sites não possuem conteúdo que se aplica aos critérios de sucesso de nível AAA. Documentação WCGA
importante tomar cuidado e entender qual deve ser a experiência do usuário quando for implementar ou atualizar um componente. Dessa forma, você consegue sempre utilizar os elementos corretos, permitindo que os leitores de tela possam fazer uma leitura correta e permitindo ao usuário uma experiência mais completa.
e, por isso, é muito importante utilizar corretamente as tags, roles e atributos aria. De acordo com a recomendação da documentação do WCAG e do WAI-ARIA.
usuário têm de ser apresentados aos usuários em formas que eles possam perceber. Os componentes de interface de usuário e a navegação têm de ser operáveis. Princípios Recomendações 1.1 Fornecer alternativas textuais para qualquer conteúdo não textual 1.2 Fornecer alternativas para multimídia 1.3 Criar conteúdo que possa ser apresentado de modos diferentes sem perder informação ou estrutura 1.4 Tornar mais fácil aos usuários a visualização e audição de conteúdos, incluindo as separações das camadas da frente e de fundo 2.1 Fazer com que todas as funcionalidades estejam disponíveis no teclado 2.2 Prover tempo suficiente para os usuários lerem e usarem o conteúdo 2.3 Não projetar conteúdo de uma forma conhecida por causar ataques epiléticos 2.4 Prover formas de ajudar os usuários a navegar, localizar conteúdos e determinar onde se encontram Documentação WCGA
usuário têm de ser compreensíveis. O conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do usuário, incluindo recursos de tecnologia assistiva. Princípios Recomendações 3.1 Tornar o conteúdo de texto legível e compreensível 3.2 Fazer com que as páginas da Web apareçam e funcionem de modo previsível 3.3 Ajudar os usuários a evitar e corrigir erros 4.1 Maximizar a compatibilidade entre os atuais e futuros agentes do usuário, incluindo os recursos de tecnologia assistiva Documentação WCGA
elementos que não possuem sentido semântico. Portanto, os leitores de tela não leem esses elementos. Para que sejam lidos, deve-se adicionar tabindex=”0”. Mas espere! Não é pra sair adicionando tabindex=”0” em todo lugar! Quando for criar um novo componente, atente-se ao uso correto das tags semânticas, são elas: <a> <button> <nav> <embed> <label> <select> <main> <h1>, <h2>, … , <h6> <textarea> <input> <ul> <li> <p> <video> <audio> <figure> <section> <header> <footer> <time> <article> <aside> <em>
foram abertos e fechadas corretamente; • Se os elementos estão em suas hierarquias corretas de acordo com as especificações; • se não há IDs duplicados; • Use um linter.
de tela leem esses elementos da mesma forma, para escondê-los na página e para os leitores, utilize o display:none; • Caso o elemento esteja visível no página, mas você entende que ele não deve ser lido pelo leitor de telas, utilize aria-hidden=’true’ no html do elemento; • Evite utilizar o outline:none para o estado de foco dos elementos, essa propriedade é muito importante para as pessoas que utilizam o site através da navegação do teclado, dessa forma elas conseguem saber em que posição estão no site; • Evite alterar a ordem dos elementos; • Evite incluir conteúdo com CSS.
deve ser acessível; • Os scripts não podem impedir a navegação por leitores de tela nem por teclado; • Os scripts devem funcionar independente do tipo de dispositivo utilizado.
desenvolvimento do seu site e que ajuda na validação das regras de acessibilidade é o Axe Tools, ele é uma extensão do chrome e além de fazer a varredura da página sugere quais alterações devem ser feitas, quando necessário. Link para adicionar a extensão
desenvolvedores recomendações para melhorias como, por exemplo, o desempenho, o SEO, a segurança, as práticas recomendadas e a acessibilidade de um site. Link para adicionar a extensão
acordo com as diretrizes da WCAG nas versões 2.0 e 2.1, do World Wide Web Consortium (W3C). A ferramenta verifica o contraste nos níveis AA e AAA. Você pode inserir o código da cor ou o seletor de cores disponível no site. Link para Contrast Checker Link para WebAIM
softwares de tecnologia assistiva que fornecem informações através de síntese de voz sobre os elementos exibidos na tela. Jaws Dosvox VoiceOver TalkBack
mocraveirodev
thehaigo
eddie
nrslib
skydoves
kiwasaki
waka292
javiergs
moshi1121
s_shimotori
masuda220
marcduiker
brettharned
garrettdimon
chriscoyier
jeffersonlam
soudai
tammyeverts
marktimemedia
cromwellryan
philhawksworth
lauravandoore
rasmusluckow
