Você vai ler sobre:
O que é acessibilidade na Web?
Umas das primeiras coisas que se deve pensar quando se fala de acessibilidade é a empatia, que é a capacidade de sentir o que o outro sentiria caso estivesse na mesma situação vivenciada por ele, ou seja no mundo da web serie você vivenciar a experiência do seu usuário ao acessar seu site através de navegação por teclado ou leitores de tela.
Uma das principais ferramentas para implementação da acessibilidade na web é o HTML que significa Hiper Text Markup language, traduzindo para o português, linguagem de marcação de hipertexto. No início de 2008 foi inicializada os estudos sobre o HTML5 que previa uma revolução comparada com suas versões anteriores, pois deixou de lado a necessidade de muitos plugins e o uso de outras tecnologias responsáveis por auxiliar na implantação de funcionalidades.
Com o HTML5 veio uma coisa chamada semântica, um elemento semântico é aquele que descreve sua função facilitando sua interpretação, antes da HTML5 era comum realizar a marcação usando <div> que junto como outros elementos como <span>, que são elementos sem semântica, onde era necessário o uso de atributos para identificar o papel de determinado trecho do código.
Não semântico: <div>Clique aqui</div>
Semântica: <button>Clique aqui</button>
Como visto anteriormente a tag <div> é um elemento que não apresenta semântica, com o HTML5 veio a possibilidade de ter uma melhor semântica através de tags como <nav>, <footer> e <articles> que possibilita uma melhor navegação pois a tag representa uma seção de uma página ou aponta para outra.
<nav>
<ul>
<li><a href="#">Página inicial</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
Como disponibilizar um conteúdo acessível?
É muito comum o uso de placeholder na criação de formulários, essa prática acaba deixando o conteúdo inacessível para quem faz a navegação através de leitores de tela, nesses casos é necessário o uso da tag < label> que deixa o conteúdo visível e ainda facilita pois deixa o código com maior legibilidade.
Exemplo simples de label:
<label>Click me <input type="text" id="User" name="Name" /></label>
Exemplo usando o atributo “for”:
<label for="User">Click me</label><input type="text" id="User" name="Name" />
Através da semântica que o HTML5 fornece é possível disponibilizar um conteúdo de forma mais sólida, seja pela navegação por leitores de tela ou para os mecanismos de busca que indexam a estrutura e conteúdo das páginas web; vale ressaltar a importância de usar as tags de forma adequada a suas funções, um exemplo de uso inadequado seria usar uma tag de cabeçalho apenas para aumenta o tamanho de um texto ou deixá-lo em negrito.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Por muito tempo a acessibilidade era sinônimo do atributo Alt, através dele é disponibilizado um texto de forma alternativa para pessoas que usam leitores de tela ou em casos onde a falta de conexão não permite a visualização da imagem. Exemplo:
<img src="img_lumis.png" alt="imagem do logo da lumis">
Outra recomendação importante é uso Lang atributo dentro do <HTML>, para auxiliar os mecanismos de busca a identificar o idioma.
<!DOCTYPE html>
<html lang="pt-br">
<body>
...
</body>
</html>
Além do uso de uma linguagem clara, principalmente em textos de link, eles devem explicar de forma clara e objetiva quais informações o usuário irá obter ao clicar no link.
Bom exemplo: Saiba mais sobre a Lumis; Leia sobre as vagas da Lumis.
Exemplo ruim: Clique aqui; Mais informações.
Uma ferramenta importante é o uso do title que é um atributo que dá informações extras sobre determinados elementos, apesar da sua flexibilidade de uso em elementos do HTML, deve ser usado com cautela.
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p title="Free Web tutorials">W3Schools.com</p> você mesmo
Com o avanço da tecnologia os sites e aplicações webs usam controles de interface cada vez mais avançados e desenvolvidos com Ajax, HTML e principalmente do JavaScript que tem dominado a web, entretanto todo esse avanço acaba prejudicando os deficientes visuais que não conseguem consumir conteúdo dinâmico. Atualmente uma das principais ferramentas de acessibilidade que veio com a HTML5 se chama ARIA do acrónimo Accessible Rich Internet Applications, que uma ferramenta que serve para preencher a lacuna de acessibilidade para usuários de leitores de tela e que fazem a navegação via teclado, mesmo assim Aria deve ser usada de forma moderada e em conjunto com outras boas práticas, e se puder use valores e atributos nativos da HTML e não altera a semântica, só em casos realmente necessários.
Atualmente boa parte das bibliotecas de scripts tem suporte para ARIA, e assim como a HTML que passou por melhorias ao longo dos anos, ARIA vem evoluindo e hoje é suportado por grande parte dos navegadores.
Dentre os componentes mais usados, três deles tem uma grande relevância para quem está iniciando seus conhecimentos em ARIA, roles por exemplo, pode substituir determinadas funções padrão dos elementos da HTML.
<form role="search">
Para a adição de uma semântica adicional se faz uso do Properties, assim o leitor de tela tem mais informações sobre o que está ocorrendo na página.
<button aria-haspopup="true">.
Já o State é usado para mudar o estado do elemento dependendo do tipo de interação.
<input aria-invalid="true">.
Vale lembrar que a ARIA não altera a aparência da do navegador, apenas traz mais recursos de acessibilidade para que o usuário faça consumo do conteúdo.
Sobre o autor
