Introdução:
A acessibilidade é um tema importante na área de desenvolvimento web e mobile.
A web deve ser acessível a todas as pessoas, independentemente de sua deficiência física ou cognitiva. Nesse sentido, o HTML tem um papel importante, pois é a linguagem de marcação usada para criar a estrutura básica de uma página web.
Aqui discutiremos as 8 principais técnicas e boas práticas para tornar o HTML mais acessível.
1- Uso de cabeçalhos e hierarquia de títulos:
Os cabeçalhos são elementos HTML usados para indicar a estrutura e hierarquia do conteúdo de uma página.
Eles são importantes porque ajudam os usuários com deficiência visual a navegar pela página e compreender seu conteúdo.
Ao usar os cabeçalhos, é importante seguir uma hierarquia de títulos lógica, em que o título principal seja um elemento de nível mais alto (como h1), e os títulos secundários sejam elementos de níveis mais baixos (como h2, h3, etc.). Isso ajuda os usuários a entender a organização da página e a encontrar facilmente as informações que procuram.
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Titulo1</h1>
<h2>Titulo 2</h2>
<h3>Titulo 3</h3>
<h4>Titulo 4</h4>
<h5>Titulo 5</h5>
<h6>Titulo 6</h6>
</body>
</html>
2- Texto alternativo em imagens:
As imagens são importantes para transmitir informações e melhorar o design de uma página. No entanto, os usuários com deficiência visual não podem ver imagens.
Para tornar as imagens acessíveis, é necessário fornecer um texto alternativo (alt) descritivo, que descreva o conteúdo e a função da imagem. O texto alternativo é lido pelos leitores de tela, permitindo que os usuários com deficiência visual entendam o que está na imagem.
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<img
src="https://marketplace.canva.com/EAE3r8IAM_k/1/0/1600w/canva-quando-me-olho-no-espelho---meme-zZuz94COFsI.jpg"
alt="imagem de um macaco sorrindo com o texto; quando me olho no espelho sinto que estou arrasando."
title="imagem de um macaco sorrindo com o texto"
/>
</body>
</html>
3- Atributos de linguagem e direção de texto:
A língua e a direção do texto são informações importantes para usuários que falam diferentes idiomas e usam diferentes sistemas de escrita. Por isso, é importante usar os atributos de linguagem e direção de texto no HTML.
O atributo "lang" é usado para especificar o idioma principal da página, enquanto o atributo "dir" é usado para especificar a direção do texto (da esquerda para a direita ou da direita para a esquerda). Isso ajuda os usuários a compreender o conteúdo da página, independentemente do idioma ou sistema de escrita usado.
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body dir="ltr">
<p>jhony</p>
</body>
</html>
4- Uso de tabelas:
As tabelas são usadas para exibir dados tabulares em uma página. No entanto, elas podem ser difíceis de entender para usuários com deficiência visual ou cognitiva, se não forem marcadas corretamente.
Para tornar as tabelas acessíveis, é importante usar os elementos "th" para os cabeçalhos de coluna e "caption" para fornecer uma descrição do conteúdo da tabela.
Além disso, as tabelas devem ser criadas de forma que possam ser lidas em uma ordem lógica, para que os usuários possam compreender a relação entre as informações apresentadas.
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<table>
<caption>Empresas e informações das mesmas</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>
</html>
5- Controles de formulários:
Os formulários são usados para coletar informações dos usuários.
Para tornar os formulários acessíveis, é importante usar rótulos descritivos para cada campo de entrada, para que os usuários saibam qual informação é esperada.
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="">
<div style="display:grid;">
<label for="description">
Descrição
</label>
<input
type="text"
id="description"
placeholder="Escreva aqui a descrição"
/>
</div>
</form>
</body>
</html>
6- Use marcadores de lista:
Utilizar marcadores de lista para agrupar itens relacionados é uma prática importante para tornar o conteúdo mais fácil de entender e navegar. Utilize os elementos ul e ol para criar listas e inclua descrições claras para cada item.
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
7- Use cores de forma eficiente:
Utilizar cores de forma eficiente é essencial para garantir a acessibilidade para pessoas com daltonismo ou outras deficiências visuais. Evite o uso de cores como a única forma de diferenciar elementos e considere utilizar padrões, texturas ou símbolos para indicar diferenças em vez de apenas cores.
8- Teste a acessibilidade da página:
Por fim, é importante testar a acessibilidade da página para garantir que ela possa ser utilizada por pessoas com diferentes tipos de deficiência. Existem várias ferramentas disponíveis online que podem ajudar a testar a acessibilidade do seu site, incluindo o Accessibility Insights da Microsoft e o WAVE da WebAIM.
Resumindo, a acessibilidade no HTML é uma preocupação importante para garantir que todas as pessoas possam acessar e utilizar o conteúdo das páginas web. Ao seguir as práticas recomendadas acima, você pode tornar seu código HTML mais acessível e garantir que ele possa ser utilizado por uma ampla variedade de pessoas.
Top comments (0)