Portal do Governo Brasileiro

Curso eMAG / Desenvolvedor

gov.br eMAG

Início do Conteúdo

Práticas Web acessíveis Marcação


Início do Sub-menu

Fim do Sub-menu


Início do tópico

Padrões Web e uso semântico do HTML

Quando falamos em Web acessível, é preciso ter em mente que o mais importante para a acessibilidade é o código HTML - HyperText Markup Language. O leitor de tela e outros recursos de Tecnologia Assistiva interpretam o código HTML, seus elementos e semântica. Por isso, o primeiro passo para garantir acessibilidade ao conteúdo Web é utilizar código semanticamente correto, ou seja, cada elemento para o seu propósito, seguindo-se os Padrões Web ou Web Standards do W3C - World Wide Web.

Os Padrões de Desenvolvimento Web ou Web Standards são um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo consórcio W3C, com a finalidade de atingir uma padronização e a criação de uma "Web universal". No site do W3C (link para um novo site) é disponibilizada uma divisão por assunto dos Padrões Web. Aqui, vamos enfocar os Padrões Web para desenvolvimento de sites e, nesse contexto, o desenvolvedor precisa ficar atento aos seguintes conceitos:

  • Conceito de Camadas: Representa o uso adequado das tecnologias, ou seja, cada tecnologia deve ser utilizada com o propósito único ao qual foi criada. Por exemplo, o HTML é utilizado apenas para a criação de conteúdo, enquanto a apresentação visual é criada através do CSS. Já o comportamento é definido pelas linguagens de script. Conteúdo – HTML, Apresentação – CSS, Comportamento – JavaScript

  • Conceito Tableless: As tabelas devem ser usadas apenas para dados tabulares e não para fins de layout. Esse conceito surgiu devido ao uso excessivo de tabelas para apresentação visual do site. O uso de tabelas para a estruturação da página prejudica a apresentação da página em determinadas resoluções de tela, deixa a página mais pesada, tem como consequência um código de difícil manutenção, além de causar problemas de acessibilidade. Quadro mostrando a utilização de comendos CSS para layout de uma página.

  • Conceito de semântica: Representa o uso correto das tags HTML, pois cada tag possui um objetivo específico e para tal deve ser utilizado. Página no Portal Brasil apresentando código semanticamente correto

Após a criação do site seguindo-se esses conceitos, o desenvolvedor deve validar todas as páginas do site no validador do W3C (link para um novo site). Essa validação encontrará os erros de concordância entre o código criado e as recomendações e fornecerá ao desenvolvedor a forma de corrigi-lo.

Voltar ao sub-menu


Início do tópico

Áreas e informação

É importante estabelecer uma organização lógica por blocos de conteúdo em um site, tornando-o fácil de navegar e compreender. As divisões de blocos de conteúdo mais comuns são "topo", "conteúdo", "menu" e "rodapé". Nas páginas internas deve-se manter uma mesma divisão para que o usuário se familiarize mais rapidamente com a estrutura do site, que deverá ser padronizada. É importante destacar, entretanto, que a página inicial pode ter uma divisão diferenciada, pois normalmente ela contém mais elementos. A divisão em blocos de conteúdo representa a base para a utilização dos atalhos, permitindo que o usuário tenha rápido acesso à área desejada.

Voltar ao sub-menu

Início do tópico

Leitura e tabulação

Deve-se criar o código HTML com uma sequência lógica de leitura para percorrer links, controles de formulários e objetos. Essa sequência é determinada pela ordem que se encontra no código HTML.

É recomendável disponibilizar o bloco do conteúdo principal da página antes do bloco de menu. Isso facilita o acesso por quem navega por teclado, permitindo um acesso mais ágil, sem a necessidade de navegar por todos os itens de menu antes de chegar ao conteúdo. Apesar de atalhos (como links e teclas) auxiliarem nesse sentido, alguns usuários não sabem e podem ser de difícil utilização para pessoas com deficiência motora. Algumas das formas não funcionam em interfaces mais simples, como o WebVox do DOSVOX. Lembrando que ao utilizar CSS, visualmente, os blocos de menu e conteúdo podem ser dispostos em qualquer local da página.

OBS: Em alguns casos, pode-se forçar a navegação via atributo tabindex. No entanto, se houver a necessidade de utilizar o tabindex, o mesmo deverá ser utilizado com a semântica correta e deverá ser verificado manualmente se o fluxo fornecido é realmente o desejado. O uso do tabindex pode resultar em uma ordem e tabulação inconsistente.

Quando pensamos em facilitar a leitura, especialmente para quem utiliza leitor de tela, é importante separar corretamente os links que estão em uma sequência (links adjacentes). Os mesmos devem ser separados por mais do que simples espaços, para que não fiquem confusos durante a leitura. Para isso, é recomendado o uso de listas , onde cada elemento dentro da lista é um link. As listas podem ser estilizadas visualmente com CSS para que os itens sejam mostrados da maneira desejada, como um ao lado do outro.

Caso os links estejam no meio de um parágrafo de conteúdo texto, pode-se utilizar vírgulas, parênteses, colchetes, pipe, entre outros, para fazer a separação.

Exemplo incorreto:

						
	<p id="menu">
	<a href="#menu">Pular o menu</a><br />
	<a href="home.html">Home</a><br />
	<a href="pesquisa.html">Pesquisa</a><br />
	<a href="mapasite.html">Mapa do Site</a>
	</p>
	<!-- Conteudo do Site -->
						
					

Exemplo correto:

						
	<ul id="menu">
	<li> <a href="home.html">Home</a></li>
	<li> <a href="pesquisa.html">Pesquisa</a></li>
	<li> <a href="mapasite.html">Mapa do Site</a></li>
	</ul>
	<!-- Conteudo do Site -->
						
					
Voltar ao sub-menu

Início do tópico

Níveis de título

Os cabeçalhos (títulos) em HTML são representados pelas tags <h1> até <h6> . Assim, as tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que aquele elemento trata-se de um cabeçalho (h vem do inglês "heading", que significa cabeçalho). O h1 deve ser o título principal da página, ou seja, deverá existir apenas um elemento h1 em cada página. A seguir, devem ser utilizados os níveis subsequentes de título, de maneira hierárquica, sem pular um ou mais níveis. A apresentação visual dos títulos poderá ser modificada através das folhas de estilo.

Para compreender melhor a utilização dos níveis de título, imagine o seu conteúdo como sendo um livro. O título do livro seria o h1, os capítulos seriam elementos h2, os sub-capítulos são representados por elementos h3 e assim por diante. Dessa forma, o título principal de um site seria o h1, o que nos leva a ter apenas um h1 em cada página. O título do conteúdo principal passa a ser o h2, as seções internas do conteúdo seriam o h3 e assim por diante.

Mas por que é tão importante utilizar corretamente os títulos em um site? Para quem enxerga, basta diferenciar os títulos visualmente, pelo tamanho, tipo ou cor da fonte. No entanto, para quem não pode ver, essa diferenciação visual perde seu propósito. Pessoas que navegam pelos sites utilizando um leitor de tela são informadas por esse software sobre o tipo de elemento pelo qual estão passando. Por exemplo, quando o usuário passar por um título dentro do conteúdo que foi inserido como um h2, o leitor de tela irá ler algo do tipo "cabeçalho de nível 2, texto do cabeçalho". Assim, o usuário, mesmo sem enxergar, saberá que se trata de um título e conhecerá a hierarquia do conteúdo da página. Além disso, os leitores de tela permitem que os usuários naveguem rapidamente através dos títulos, pressionando a tecla "H". Assim, poderão pular de título em título, compreendendo a hierarquia da página e chegando rapidamente ao conteúdo desejado.

Exemplo:

Exemplo de uma página contendo títulos e textos hierarquicamente correto
						
	<h1> Acessibilidade na Web </h1>
	<h2> Introdução à Acessibilidade na Web </h2>
	<p> ...texto...<p>
	<h3>Barreiras enfrentadas por pessoas com deficiência</h3>
	<p> ...texto...<p>
	<h3>Recursos de Tecnologia Assistiva</h3>
	<p> ...texto...<p>
	<h2>Garantindo a Acessibilidade na Web</h2>
	<p> ...texto...<p>
	<h3>Recomendações de acessibilidade</h3>
	<p> ...texto...<p>
	<h3>Avaliando a acessibilidade de um site</h3>
	<p> ...texto...<p>
						
					
Voltar ao sub-menu

Início do tópico

Âncoras

As âncoras podem ser denominadas como “links para uma mesma página”, possibilitando aos usuários navegarem por pontos específicos em uma página. As âncoras devem estar adequadamente descritas de acordo com sua função, e quando utilizadas devem ancorar o foco ao ponto indicado. Esse formato de link é geralmente empregado em casos em que o conteúdo apresentado é bastante extenso, sendo as âncoras inseridas de modo a formarem um sumário para remeter a partes específicas do conteúdo (capítulos, seções, etc.). Após cada seção ou capítulo é essencial oferecer uma âncora para retornar ao sumário.

Exemplo de sumário com âncoras para as partes do conteúdo:

Exemplo de sumário com âncoras para as partes do conteúdo

Ao clicarmos no link "Introdução", o foco do teclado é remetido para o início desta seção. Repare no exemplo a seguir o link "Voltar ao sumário", presente no final da seção.

Página demostrando apenas a seção Introdução com o link voltar ao sumário no final da seção

Exemplo de âncora para a seção "Agradecimentos":

Repare que o destino da âncora é representado pelo sinal de # (cerquilha ou sustenido) seguido do id da seção de destino:

						
							
	<li><a href="#agradecimentos" title="#">Agradecimentos</a></li>  
	<h2 id="agradecimentos">Agradecimentos</h2>  
						
						
					

Exemplo de âncora para voltar ao sumário:

						
							
	<p class="voltar"><a href="#sumario">Voltar ao sumário</a></p>  
	<div id="sumario"> 
						
						
					

Início do tópico

Atalhos

Remetem a pontos estratégicos nas páginas, permitindo que o usuário navegue com maior agilidade, uma vez que poderá ir diretamente a pontos específicos das páginas. Os atalhos devem funcionar em todas as páginas do site, sendo indispensável disponibilizar dicas dos mesmos no topo das páginas. Além disso, os atalhos devem estar adequadamente descritos, informando o local para o qual remetem. Devem existir atalhos para, no mínimo, ir ao início do conteúdo, ao início do menu e ao campo de busca. É importante que as dicas dos atalhos sejam apenas números, já que a tecla de ativação (Alt, Shift + Alt, etc.) varia conforme o navegador.

Exemplo de atalhos para conteúdo, menu e caixa de busca:

Atalhos de teclado para Conteúdo[1], Menu[2] e Pesquisar[3]
						
							
	<ul id="atalhos">  
		<li><a href="#iniciodoconteudo">Conteúdo [1]</a></li>  
		<li><a href="#iniciodomenu">Menu [2]</a></li>  
		<li><a href="#palavra" id="teste">Pesquisar [3]</a></li>  
	</ul> 
						
						
					

Conteúdo da página:

						
							
	<div id="conteudo">         
		<a href="#iniciodoconteudo" id="iniciodoconteudo" accesskey="1" class="oculto">Início do conteúdo</a>  
		<!-- conteúdo -->  
	</div>
						
						
					

Links Indicadores

Links associados aos atalhos de teclado, que agilizam a navegação, e auxiliam os usuários de leitores de tela a compreender e organizar o conteúdo visual de forma lógica, pois definem blocos nas páginas. Os mais comuns e recomendados são "Início de Menu", "Fim de Menu", "Início de Conteúdo" e "Fim de Conteúdo", podendo também, se possível, inserir links indicadores de início e fim de formulários e início e fim de tabelas. Os links indicadores poderão estar ocultos na página, ou seja, não aparecerão visualmente, mas serão lidos pelos leitores de tela, facilitando muito a navegação e compreensão do site pelo usuário com deficiência visual.

Exemplo de link indicador de final de conteúdo:

						
							
	<a href="#finaldoconteudo" class="oculto">Final do conteúdo</a>
						
						
					
Voltar ao sub-menu

Fim do Conteúdo