HTML

HTML: BOAS PRÁTICAS EM ACESSIBILIDADE

Uma grande parte do conteúdo presente na internet pode se tornar acessível apenas com a utilização correta dos elementos HTML. Esse artigo mostra em detalhes como o HTML pode ser utilizado para garantir o máximo de acessibilidade.

Pré-Requisitos:

Conceitos básicos de computadores, entendimento básico de HTML

Objetivos:

Ganhar familiaridade com os elementos do HTML que trabalham a favor da acessibilidade e utilizá-los de forma apropriada nos seus documentos da web.

HTML e acessibilidade

Na medida que se aprende mais sobre HTML — lendo sobre recursos, observando exemplos etc.  — é normal se deparar com um assunto: a importância de se utilizar a semântica HTML (as vezes chamada de POSH, ou Plain Old Semantic HTML). Esse assunto significa utilizar corretamente os elementos HTML, cada qual com seu propósito, o máximo que for possível.

Você deve estar se perguntando por que isso é tão importante. Afinal, é possível usar uma combinação de CSS e JavaScript que faz com que qualquer elemento HTML se comporte da forma que você quiser. Por exemplo, um botão para dar play em um vídeo no seu site pode ser criado dessa forma:

HTML

<div>Play vídeo</div>

Mas como você sabe com mais detalhes a seguir, faz muito mais sentido utilizar o elemento correto para essa finalidade:

HTML

<button>Play vídeo</button>

O elemento <button> possui vários estilos já aplicados nele mesmo por padrão (O que você provavelmente vai querer sobrescrever), ele já é embutido com padrões de acessibilidade pelo teclado — botões podem ser navegados através da tecla tab do teclado, e ativados utilizando a tecla Enter/Return.

A semântica do HTML não demora mais para escrever do que a versão não-semântica(ruim) se você a escrever consistentemente desde o começo do seu projeto. Existem também outros benefícios de a utilizar além da acessibilidade:

1.      Mais fácil de ser desenvolvida — como mencionado acima, você consegue algumas funcionalidades por padrão, também torna o código mais fácil de ser lido e entendido.

2.      Melhor nos dispositivos móveis — HTML semântico é mais leve que o código não-semântico (aquele código espaguete) em comparação de tamanho de arquivos, também é mais fácil de ser adaptado ao responsivo.

3.      Bom para o SEO — Mecanismos de busca dão mais importância para palavras-chave que são incluídas em títulos, links etc., do que para palavras-chave incluídas em <div>s não semânticas etc. Então suas páginas serão mais fáceis de serem encontradas pelos seus clientes.

Aos interessados em saber mais sobre esse artigo, pode ser consultado em MDN WEB DOCS em toda a sua íntegra.