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/