A importância da acessibilidade na web está em proporcionar oportunidades iguais a todos, tendo em vista o crescente valor do conteúdo disponibilizado no ambiente online para educação, negócios, governo, comércio e lazer. Quando não e considerado o acesso de pessoas com deficiência, estamos tirando o direito de uma pessoa de navegar, interagir ou consumir produtos e serviços na rede. Vale ressaltar ainda que as questões de acessibilidade vão muito além de pessoas com deficiência.
Atualmente o mundo caminha para o envelhecimento da população mundial, dificuldades na visão e motoras que são causadas pela chegada da idade, se tornam mais presentes no cotidiano das pessoas. Muitos idosos buscam a comodidade dos mecanismos de acessibilidade, porém as ferramentas não são adaptadas o suficiente.
Um dos fatores mais importantes para o contínuo problema da inacessibilidade na web é a falta de conhecimento por designers e desenvolvedores e pela divulgação insuficiente de técnicas de implementação de acessibilidade.
A falta de conhecimento dos desenvolvedores em relação à acessibilidade se inicia na universidade. Como parte do currículo da graduação em Computação, os estudantes aprendem o desenvolvimento de aplicações ricas para web, mas pouco se tem dado atenção para a incorporação de boas práticas de acessibilidade.
HTML e Acessibilidade
Há vários motivos para deixar o HTML acessível, primeiramente, e mais importante, serve para que todos consigam entender e navegar por nossa página. Vale ressaltar, que, existe um decreto federal de 2004 n° 5.296 que obriga sites no Brasil a serem acessíveis. Temos também A Lei Brasileira de Inclusão da Pessoa com Deficiência que foi considerada um grande avanço em relação aos direitos da pessoa com deficiência. Lei Brasileira de Inclusão da Pessoa com Deficiência.
HTML - assim como sua linguagem de estilo complementar, CSS - é flexível. Se você deseja construir um determinado tipo de página, provavelmente existem várias maneiras de escrevê-la com HTML e estilizá-la com CSS. No entanto, nem todos os elementos HTML são iguais quando se trata de acessibilidade.
Ao escrever páginas da Web, a melhor maneira de torná-las acessíveis é usar o HTML semântico. O HTML semântico é o código HTML que diz o que faz - em outras palavras, a própria tag transmite o propósito do elemento. Elementos semanticamente ricos incluem as tags,<button>,<form>, <header>, <footer>, <nav> e os títulos <h1>, <h2>, etc.
Como podemos ter um HTML acessível?
1. Imagens
No HTML, as imagens devem possuir o atributo alt com um texto alternativo que descreva seu conteúdo. Não é necessário iniciar o texto com “Imagem/Figura/Gráfico de …”, pois o leitor de tela fará isso de qualquer maneira.
Se a tag <img> tiver apenas o atributo src, o leitor lerá o nome do arquivo, o que pode ser bem confuso e pouco específico. Sem dúvida, também é importante usar nomes significativos para esses arquivos.
Outra forma de associar um texto complementar a uma imagem é inserí-lo em uma tag de parágrafo com um id, que será referido no atributo aria-labelledby da imagem. Isso é bastante útil se você quiser usar o mesmo texto como rótulo para várias imagens, ou ainda para gráficos e infográficos, com uma descrição mais detalhada.
Caso as imagens sejam apenas decorativas, é recomendado incluí-las na página como background-image através de CSS.
Vale sinalizar que todos os elementos visuais ou multimídia, como ícones, vídeos e áudios, precisam de um elemento textual que os descrevam. Podemos fazer isso com o atributo aria-label.
2.Estrutura textual
Utilize tags adequadas para títulos, subtítulos, parágrafos e listas no seu conteúdo textual. O leitor de telas vai identificar cada elemento para o usuário, permitindo ainda navegar de título em título (o que é bastante útil para portais de notícias, por exemplo).
Evite pular níveis de títulos ( <h1> a <h6> ), para que o leitor de telas possa navegar de maneira hierárquica entre os cabeçalhos. Ou seja, se o usuário está navegando entre títulos <h1>, a qualquer momento ele poderá varrer os cabeçalhos <h2> filhos de um <h1>. O ideial e a tag <h1> ser usada apenas um vez por página.
Outro ponto, é que um site bem estruturado com seus títulos, são melhores ranqueados pelos mecanismos de busca, e ajudam com a navegação pelos leitores de tela.
3.Landmarks
Landmarks são pontos de referência utilizados por leitores de tela para saltos no conteúdo. Devem ser usados para marcar blocos importantes, como menu de navegação, conteúdo principal, campos de busca, entre outros, permitindo que o usuário chegue diretamente a esses elementos.
Em HTML existem alguns elementos semânticos que podem ser usados para definir diferentes partes de uma página web: <header>, <nav>, <main>, <aside>, <section>, <footer>.
Ao usar tags semânticas, você pode melhorar drasticamente a experiência de navegação em seu site para usuários de tecnologia assistiva.
4.Idioma da página
Logo no início do HTML, defina a linguagem que você está usando (<html lang="pt-br">). Além de ser bom para SEO e ferramentas de tradução, a definição do idioma no documento ajuda tecnologias assistivas a definirem o perfil de voz e conjunto de caracteres.
É possível ainda alterar a linguagem em elementos específicos, quando necessário, utilizando o atributo lang.
5. Tags de interação
Controles de User Interface (UI) são os elementos com os quais o usuário interage, como botões, links e formulários. Navegadores permitem que esses controles sejam acessados pelo teclado. Eles devem ser usados adequadamente, pois são elementos com padrões de acessibilidade nativos que facilitam a navegação.
Outra dica importante é não confundir link com botão. Enquanto o botão é utilizado para interações, como envio de formulários, o link deve ser usado para navegação (interna ou externa). Lembrando que links que direcionam para fora do site devem ser identificados dessa forma.
6. Estrutura de formulários
Usar a estrutura correta ao criar um formulário HTML o ajudará a garantir que o formulário seja utilizável e acessível.
<form>: é a tag que envolve os campos de um formulário.<input>: são os campos para preenchimento, podendo ser de vários tipos como, text, submit, radio, checkbox, number entre outros.<textarea>: essa tag é utilizada para que o usuário escreva textos maiores, utilizada normalmente para comentários de um post, ou até mesmo da página.<select>: é usado para criação de uma lista de itens predefinidas pelo desenvolvedor, como um menu de seleção.<button>: o uso mais comum é usado a enviar os dados preenchidos.
Ainda falando de formulários, quando pensamos na parte da acessibilidade, é importante o uso de outras tags complementares, que deixam nosso HTML mais semântico e acessível.
<label>: tag semântica para definir um nome para algum input.<fieldset>: usada para a separar as informações dos formulários em grupos. Por exemplo, dados pessoais e de endereço.<legend>: nela podemos, semanticamente, dar um rótulo para um,<fieldset>, por exemplo.<optgroup>: essa tag trabalha em conjunto com a tag<select>, é onde criamos grupos de opções.
7. Atributos ARIA
Em algum momento mais cedo desse post, eu mencionei sobre os atributos ARIA, irei explicar brevemente aqui, o que são os atributos ARIA, mas esse assunto merece um post especial, visto que esse assunto e bastante vasto.
ARIA significa, Aplicações para a Internet Ricas em Acessibilidade. Esse atributo pode ser usado em qualquer tag dentro do site. Ele ajuda quando se é necessário passar mais informações do que realmente um elemento faz na nossa página. Podemos dizer que o WAI-ARIA e uma extensão do HTML, o mesmo foi criado para melhorar a acessibilidade e interoperabilidade dos conteúdos web e aplicações.
A incorporação do WAI-ARIA é uma maneira de um autor fornecer semânticas apropriadas para widgets customizados para tornar esses widgets acessíveis, utilizáveis e interoperáveis com tecnologias assistivas.
Existem inúmeras variações para esse atributo. Para utilizá-lo, escreve-se da seguinte maneira, primeiro seu nome e depois o que queremos descrever separado por um - (hífen), aria-.... Vamos ver alguns exemplos.
aria-required: nele indicamos para leitores de tela, informar para o usuário a necessidade de preenchimento do campo.aria-haspopup: informa ao usuário que um botão, abrirá uma janela de pop-up.aria-checked: esse atributo informa que o input,checkboxouradio buttonjá está marcado.aria-disabled: ele avisa ao usuário que o campo está desabilitado.aria-multiline: normalmente usado junto da tag textarea, ele pode receber o valor de true ou false, indicando se o campo pode, ou não, ter mais de uma linha para escrever.aria-label: informa que esse campo é o rótulo de algum outro elemento, ou seja, ele associa um elemento ao outro.aria-labelledby: ao contraio do aria-label, esse atributo, indica que um elemento esta sendo rotulado pelo elemento indicado dentro do aria-labelledby=" ".
Além dos exemplos citados a cima, existem outros muitos atributos ARIA que não só podemos, como decerto, devemos utilizar. Na documentação oficial do W3C, tem uma lista de todos os atributos disponíveis e suas definições
8.Algumas dicas adicionais
Não transmita informações somente através de cores (em tabelas, por exemplo);
Links sublinhados são úteis para usuários com dificuldade para discernir contraste;
Textos de links devem ser descritivos (e não apenas “clique aqui”);
A rolagem infinita pode ser problemática para navegação por teclado;
Teste sua página sem CSS, para avaliar a estrutura e verificar se o conteúdo continua fazendo sentido;
Teste a navegação por teclado e o leitor de telas em seu site;
Conclusão
Bom pessoal, esse foi meu primeiro post (primeiro de muitos) falando sobre acessibilidade na web. Acessibilidade na web é um tema que venho estudando bastante (inclusive, meu tcc esta sendo desenvolvido nessa área) e um dos grandes problemas para o contínuo problema da inacessibilidade na web é a falta de conhecimento dos desenvolvedores sobre as técnicas de implementação de acessibilidade. Por isso é extremamente importante a gente falar sobre esse assunto.
Por fim, é importante pensar no quão bem nossa página ficará ranqueada ao se utilizar um HTML acessível e semântico. Entretanto, o que realmente importante, é que consigamos dar aos usuários de nossa página uma ótima experiência, seja uma pessoa com deficiência ou não.
Top comments (2)
Excelente texto, Gabriel! Sempre muito bom ver gente preocupada com Acessibilidade na Web! Como complemento ao seu post, deixo aqui duas dicas:
role="button"para fazer com que leitores de tela leiam o link como botão. Existem muitas outras propriedades compatíveis com o atributorole.img, é possível "esconder" essa imagem de leitores de tela deixando oaltvazio (alt="") e incluindo o atributoaria-hidden="true". Abraço e continue firme na escrita!Muito obrigado pela contribuição, Angela!