Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Acessibilidade na Web #ParaTodosVerem - PHPeste

Acessibilidade na Web #ParaTodosVerem - PHPeste

Talk apresentada no PHPeste 2023 em Fortaleza no dia 07 de Outubro.

Monica Craveiro de Menezes

October 07, 2023
Tweet

More Decks by Monica Craveiro de Menezes

Other Decks in Programming

Transcript

  1. Monica Craveiro de Menezes Meio Carioca Meio Cearense , Bacharel

    em Sistemas de Informação 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
  2. Globalcode – Open4education VOCÊ VAI LER ISSO AQUI PRIMEIRO depois

    vai ler isso aqui. e depois isso aqui E só por último vai ler isso aqui.
  3. Quão importante é o layout, o tamanho das fontes e

    suas cores para que a gente consiga ter um entendimento completo de algo?
  4. O que define um website para você? Claramente, não é

    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.
  5. As dicas visuais são de extrema importância para o usuário.

    Pensando nisso, como podemos melhorar a experiência de usuários com algum tipo de deficiência?
  6. Globalcode – Open4education Por que? Por que a gente tem

    que se preocupar com acessibilidade?
  7. Globalcode – Open4education Mais de 1 bilhão de pessoas no

    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
  8. Lei nº 13.146 de 06 de Julho de 2015 Art.

    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.
  9. Uma das formas de validar se o usuário está tendo

    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:
  10. Para cada recomendação existem critérios de sucesso, que são pontos

    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
  11. A chave é uma semântica HTML bem escrita! É muito

    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.
  12. A árvore de acessibilidade herda os componentes da árvore HTML

    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.
  13. Perceptível Operável A informação e os componentes da interface do

    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
  14. Compreensível Robusto A informação e a operação da interface de

    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
  15. A primeira dica é: os elementos <span> e <div> são

    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>
  16. Linguagem da página Título da página Formas de navegação Pontos

    de referência Contraste Foco Título Tabindex Atributos ARIA Roles A chave é uma semântica HTML bem escrita!
  17. Boas práticas - HTML • Verificar se todas os elementos

    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.
  18. Boas práticas - CSS • Não utilize visibility:hidden! Os leitores

    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.
  19. Boas práticas - Javascript • Todo conteúdo inserido por script

    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.
  20. Axe Tools Um plugin interessante para utilizar na hora do

    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
  21. Lighthouse Esta ferramenta, tem por objetivo testar e devolver aos

    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
  22. Contrast Checker É uma ferramenta de verificação de contrastes de

    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
  23. Heading Maps Mostra a hierarquia de títulos da página, auxiliando

    na visualização do fluxo de navegação. Link para adicionar a extensão
  24. Leitores de Tela Screen Reader NVDA Leitores de tela são

    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
  25. Alguns links para aprofundar o assunto... • https://web.dev/learn/accessibility/ • https://asesweb.governoeletronico.gov.br/

    • https://www.devmedia.com.br/html-semantico-conheca-os -elementos-semanticos-da-html5/38065 • https://mwpt.com.br/acessibilidade-digital/boas-praticas/ • https://www.pedrodias.net/ux/dicas-de-acessibilidade-web • http://www.acessibilidadelegal.com/ • https://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilh a-w3cbr-acessibilidade-web-fasciculo-I.html • https://www.gov.br/governodigital/pt-br/acessibilidade-dig ital/Cartilhaversao1.0.pdf • https://developer.mozilla.org/pt-BR/docs/Web/HTML
  26. Estão preparados para criar sites mais acessíveis? Obrigada! Monica Craveiro

    de Menezes @mocraveirodev https://speakerdeck.com/mocraveirodev