Acessibilidade HTML
Acessibilidade HTML
Sempre escreva código HTML com acessibilidade em mente!
Forneça ao usuário uma boa maneira de navegar e interagir com seu site. Torne seu código HTML o mais semântico possível.
HTML semântico
HTML semântico significa usar elementos HTML corretos para seu propósito correto, tanto quanto possível. Elementos semânticos são elementos com um significado; se você precisar de um botão, use o <button>elemento (e não um
<div>elemento).
Semântica
<button>Report an Error</button>
Não-semântico
<div>Report an Error</div>
O HTML semântico dá contexto aos leitores de tela, que lêem o conteúdo de uma página em voz alta.
Com o exemplo do botão em mente:
- os botões têm um estilo mais adequado por padrão
- um leitor de tela o identifica como um botão
- focalizável
- clicável
Um botão também é acessível para pessoas que dependem de navegação apenas pelo teclado; ele pode ser clicável com o mouse e as teclas, e pode ser tabulado entre eles (usando a tecla tab no teclado).
Exemplos de elementos não semânticos : <div>e <span>- Não informa nada sobre seu conteúdo.
Exemplos de elementos semânticos : <form>, <table>, e <article>- Define claramente seu conteúdo.
Os títulos são importantes
Os títulos são definidos com as tags <h1>to :<h6>
Exemplo
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Os mecanismos de pesquisa usam os títulos para indexar a estrutura e o conteúdo de suas páginas da web.
Os usuários percorrem suas páginas pelos títulos. É importante usar títulos para mostrar a estrutura do documento e as relações entre as diferentes seções.
Os leitores de tela também usam cabeçalhos como uma ferramenta de navegação. Os diferentes tipos de cabeçalho especificam o contorno da página.
<h1>títulos devem ser usados para títulos principais, seguidos por <h2>títulos, depois os menos importantes
<h3>e assim por diante.
Nota: Use títulos HTML apenas para títulos. Não use títulos para deixar o texto GRANDE ou em negrito .
Texto Alternativo
O altatributo fornece um texto alternativo para uma imagem, se o usuário por algum motivo não puder visualizá-la (devido à conexão lenta, um erro no
src
atributo ou se o usuário usar um leitor de tela).
O valor do altatributo deve descrever a imagem:
Exemplo
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
Se um navegador não encontrar uma imagem, ele exibirá o valor do alt
atributo:
Exemplo
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
Declare o idioma
Você deve sempre incluir o lang
atributo dentro da <html>tag, para declarar o idioma da página da Web. Isto destina-se a ajudar os motores de busca e navegadores.
O exemplo a seguir especifica o inglês como o idioma:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Usar linguagem clara
Use sempre uma linguagem clara, de fácil compreensão. Tente também evitar caracteres que não possam ser lidos claramente por um leitor de tela. Por exemplo:
- Mantenha as frases o mais curtas possível
- Evite traços. Em vez de escrever de 1 a 3, escreva de 1 a 3
- Evite abreviações. Em vez de escrever fevereiro, escreva fevereiro
- Evite gírias
Crie um bom texto de link
Um texto de link deve explicar claramente quais informações o leitor obterá clicando nesse link.
Exemplos de links bons e ruins:
Boa
Ruim
Nota: Esta página é uma introdução à acessibilidade na web. Visite nosso Tutorial de Acessibilidade para obter mais detalhes.