Oi pessoal, nesta edição do PET Redação vamos compreender a importância da acessibilidade em páginas web, tão quanto dar algumas dicas de como atingir isso usando a tecnologia HTML.
Primeiro, precisa-se entender a extensão do termo acessibilidade, uma vez que ele não demonstra-se totalmente explorado. Dessa maneira, entende-se como acessível todo serviço, produto, página que atenda tanto às necessidades de pessoas com dificuldade motoras (Paraplegia, Hemiplegia,Tetraplegia), sensoriais(pessoas idosas, cegas, surdas, daltônicas) e cognitivas quanto as que não possuem. Assim, pode-se concluir que para o ramo da web a acessibilidade demonstra-se unir programação, design e tecnologia a fim de permitir que todos os usuários obtenham o mesmo nível de experiência, em relação ao entendimento, à aprendizagem, à navegação e à interação na página.
Ademais, pode-se pontuar que a acessibilidade é um direito e um dever regidos por lei. Em 2004 o decreto federal n° 5.296 prevê que todos os portais e sites governamentais deveriam atender aos padrões de acessibilidade digital, e após isso, em 2011 a Lei de Acesso à Informação Nº 12.527 abrange os padrões de todos os sites da web.
Explicado isso, espera-se que páginas acessíveis possuam imagens, vídeos com audiodescrição,possibilidade de aumentar a fonte do texto, vídeos com legendas, boa organização da página para aplicativos leitores de tela, navegabilidade possível apenas por teclado, entre outros.
Vamos as dicas no html:
- criar uma boa e consistente estrutura de títulos, parágrafos, listas, etc.
Visto que essa prática irá melhorar a experiência de um usuários por meio de um leitor de tela
- Usar os elementos HTML para o que eles foram designados.
Nada de criar “divs” e transformá-los em botões pelo css.
- Não utilizar tabelas como cabeçalhos ou rodapés, prefira usar a tag <nav>
- Usar links com uma descrição clara
Exemplo:
Errado:
<p>As baleias são criaturas realmente incríveis. Para saber mais sobre baleias, <a href=”whales.html”>clique aqui</a>.</p>
Correto:
<p>As baleias são criaturas realmente incríveis. <a href=”whales.html”>Saiba mais sobre baleias</a>.</p>
- usar o atributo alt na tag img
Por meio do alt consegue-se fazer descrições sobre a imagem e o leitor de tela captará isso. Além disso para adicionar um contexto a imagem pode-se utilizar o atributo title
Exemplo:
<img src=”dinosaur.png”
alt=”Um tiranossauro Rex vermelho: Um dinossauro de duas patas em pé como um humano, com braços pequenos e uma cabeça grande com muitos dentes afiados.”
title=”O dinossauro vermelho da Mozilla.”>
- Adicionar legenda por meio de texto vídeos sem legenda.
- Adicionar audiodescrição em vídeos.
E também, as diretrizes a serem seguidas em uma página acessível estão descritas pelo Web Accessibility Initiative (sigla: WAI), e atualmente está na versão Web Content Accessibility Guidelines 2 (sigla: WCAG 2).
Se você quiser ler mais sobre o assunto:
Lei de Acesso à Informação:http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2011/lei/l12527.htm
Dicas html: https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/HTML
https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML
informações adicionais de acessibilidade: https://www.iberdrola.com/inovacao/o-que-e-acessibilidade-na-web
Diretrizes do WCAG 2: https://www.w3.org/WAI/standards-guidelines/wcag/
