Uma das coisas que eu realmente espero que os alunos façam é validar seu código.
Você pode validá-lo para sintaxe,
mas também pode validá-lo para acessibilidade.
Então, hoje eu vou mostrar a vocês como eu uso a ferramenta WAVE para testar diferentes sites.
Eu entrei e verifiquei para encontrar alguns dos 10 principais sites visitados para 2018,
e eu encontrei Google,
Wikipedia, Reddit, Yahoo e, Amazon.
Então, vamos apenas fazer uma pequena investigação sobre o
quão bem cada um desses sites aborda a acessibilidade.
Há duas maneiras de testar.
Um deles é realmente ir para o site Wave, que é wave.webaim.org.
A partir deste site, você pode realmente copiar e colar o endereço de qualquer página que você deseja testar,
e esta é uma ótima maneira de fazê-lo.
Pessoalmente, o que eu fiz foi ir em frente e adicionei a extensão de onda à minha página.
Então, se você olhar bem aqui,
é possível se você possui seu computador baixar
uma extensão que se parece exatamente com esta aqui,
este pequeno W, e isso torna minha vida um pouco mais fácil,
porque ele me deixa realmente apenas clicar neste botão em vez de ir para o site do Wave.
Então, vamos em frente e verificar alguns desses sites.
Vou começar com o Google.
Estou no Google, vou clicar no “Wave validator”,
e ele vai passar e verificar se há erros que possam ver,
e neste caso, temos dois erros.
Em ambos os casos, os erros são que temos links vazios.
Em algum lugar desta página,
há links que realmente não se vinculam a nada.
Agora, eu estou tentando encontrá-los e você não pode vê-los aqui,
mas isso é porque o Wave verifica todas as variações diferentes de sua página.
Assim, embora possa ficar bem na área de trabalho,
nem sempre fica bem em digamos, no
seu telefone ou num tablet móvel.
O Google foi muito bem.
Vamos em frente e confira a Wikipédia.
Aqui na Wikipédia, vou acenar.
Às vezes, leva um segundo,
eu sempre esqueço e preciso ser muito paciente,
porque se você clicar nele e clicar nele de novo muito rápido,
é assim que você liga e desliga.
Então, eu cliquei na onda,
vou esperar mais alguns segundos,
e você pode ver que mais uma vez, a Wikipédia,
como o Google, fez um bom trabalho de abordar a acessibilidade.
Eles têm um botão vazio e o que eles chamam de etiquetas de formulário ausentes.
O que isso significa é que aqui em baixo,
há um lugar onde eles gostariam que escrevêssemos algo.
Mas alguém com deficiência visual pode
não saber exatamente o que você quer que eu digite?
Então, os dois botões aqui dizem: “Quer saber?
Seria uma boa ideia se você adicionasse um rótulo de formulário,
para que alguém saiba o que está digitando.”
O rótulo do formulário aqui pode ser consulta de pesquisa,
e o rótulo do formulário neste botão azul pode ser atingido em mim para executar a pesquisa.
Ainda assim, três é muito bom.
Então, vamos ao Reddit.
Reddit é um site muito popular,
muitas pessoas o usam para se sentir melhor sobre si mesmos,
porque eles pensam quem faria essa pergunta,
e outras pessoas vão aqui por razões reais para descobrir uma informação.
É um site tão popular.
Espero que seja acessível.
Mas de acordo com Wave na última versão que Reddit teve, vamos dar uma olhada.
Tudo bem, e daqui podemos ver que Reddit tem 73 erros.
Não surpreendentemente, porque há muito conteúdo orientado pelo usuário.
Há muitas pessoas carregando fotos ou digitando coisas,
e eles não sabem sobre acessibilidade.
Eles não sabem sobre coisas como, “Uau,
eu realmente deveria estar adicionando meu texto alternativo a essas imagens diferentes.”
Caso contrário, será difícil para as pessoas acessá-las.
Ou você pode olhar aqui em baixo.
Na verdade, isso é exatamente o que é.
Está faltando texto alternativo aqui.
Opa, falta de texto alternativo aqui e falta de texto alternativo.
Muitos e muitos textos alternativos ausentes.
Outra coisa que Wave realmente tenta fazer com que as pessoas evitem
fazer é ter links vazios.
Essa idéia de links que você não sabe para onde eles estão indo,
e eles também realmente não gostam de links redundantes.
Só torna difícil para as pessoas que estão usando o computador via teclado
ter que clicar tantas vezes para apenas obter a mesma informação uma e outra vez.
Então, infelizmente, Reddit não é ótimo para acessibilidade,
mas realmente bom para o meu exemplo aqui neste vídeo sobre a verificação de suas páginas.
O próximo que eu vou fazer é,
apenas disse Yahoo em geral.
Então, eu escolhi um Yahoo Sports.
Podemos dar uma olhada e ver como esse lado esportivo está indo.
Agora, ao contrário do Reddit, este é um
sistema de software profissional comercial
onde são as pessoas que estão sendo pagas para carregar o conteúdo.
Então, esperamos que haja um pouco mais de acessibilidade aqui.
Então, aqui no Yahoo Sports,
você pode ver que eu tenho 44 erros.
Então, isso é apenas dar uma olhada em quais coisas gerais eles estão perdendo.
Bem, é um texto alternativo, o
que é engraçado se você olhar para ele,
você pode ver que eles estão dizendo, “Ooh,
muitos lugares que você está perdendo texto alternativo,
e isso deve significar aqui que cada uma dessas pequenas partituras não é texto,
é na verdade uma imagem.”
Isso coloca as pessoas em um monte de problemas.
Às vezes, você quer colocar uma imagem na tela e não é realmente decorativa,
está contando uma história completa,
e nesse caso, texto alternativo é tão importante.
Caso contrário, as pessoas com deficiência visual podem
não ser capazes de ver qual é a pontuação para os vários jogos.
Tudo bem, o último que eu vou fazer é Amazon,
e eu acho que vou fazer isso direto da ferramenta WAVE.
Então, eu vou aqui, eu digitei na Amazon.com,
e a Amazon não está indo muito mal.
Você pode ver que eles têm os mesmos problemas que a maioria das pessoas tem.
Sempre se resume a este texto alternativo faltando, bem ali.
Há algumas razões para isso.
Em alguns sites, o público está carregando as fotos,
e eles não sabem sobre mensagens de texto alternativas,
então temos que educá-los sobre isso.
Às vezes, é porque escrevemos programas para atualizar os sites
e, infelizmente, os computadores não são muito bons em
saber quais textos alternativos devem adicionar às imagens.
Infelizmente, também é porque algumas pessoas sabem e eles simplesmente não se importam,
acham que é tão importante.
Então, tanto quanto possível,
quero que adicione pistas sintáticas e semânticas a todo o seu código.
Certifique-se de que as pessoas que estão olhando ou
escutando tenham a maior experiência possível.