e-MAG: Acessibilidade e separação de links adjacentes
Gabarito: letra D. A recomendação do e-MAG sobre separar links adjacentes por mais do que simples espaços é atendida pela alternativa D, que utiliza uma lista não ordenada (<ul>) com itens de lista (<li>) — essa estrutura cria uma separação clara e semântica entre os links, permitindo que o leitor de tela os identifique como elementos distintos. As demais alternativas usam estruturas inadequadas (tabelas, parágrafos com espaços, ou HTML inválido) que não garantem essa separação.
O e-MAG (Modelo de Acessibilidade em Governo Eletrônico) é um conjunto de recomendações do Governo Federal brasileiro para tornar os sítios e serviços eletrônicos acessíveis a todas as pessoas, incluindo aquelas com deficiências. Uma das preocupações centrais do e-MAG é a navegação por leitores de tela, que leem o conteúdo de forma linear e sequencial. Quando links adjacentes são separados apenas por espaços em branco, o leitor de tela pode interpretá-los como um único link ou como uma sequência confusa de textos, dificultando a compreensão e a navegação.
A solução recomendada é usar elementos HTML que criem uma separação estrutural e semântica entre os links. A lista não ordenada (<ul>) com itens (<li>) é a forma mais adequada, pois cada item da lista é um elemento distinto, e o leitor de tela anuncia a presença de uma lista e de seus itens, permitindo que o usuário navegue entre eles de forma clara. Outras estruturas, como tabelas (<table>), podem ser usadas, mas não são semanticamente apropriadas para listas de navegação, e parágrafos (<p>) com espaços não criam uma separação estrutural real.
A alternativa D é a única que utiliza a estrutura de lista não ordenada com itens de lista, atendendo diretamente à recomendação do e-MAG. As demais alternativas apresentam problemas: a alternativa A usa uma tabela de forma incorreta (com <th> e <tr> sem <td>), a alternativa B usa apenas espaços dentro de um parágrafo, a alternativa C usa uma tabela com células (<td>) que não é semanticamente adequada para uma lista de navegação, e a alternativa E usa um elemento <select> com HTML inválido (colocando <a> dentro de <option>).
A pegadinha desta questão está em reconhecer que a separação visual por espaços não é suficiente para acessibilidade — é necessária uma separação estrutural e semântica. O candidato pode ser tentado a escolher a alternativa B, que parece visualmente correta, mas não atende à recomendação do e-MAG. A alternativa D é a única que usa a estrutura correta.
Alternativa A — ❌ Incorreta
A alternativa A usa uma tabela (<table>) de forma incorreta: o elemento <th> é usado para o cabeçalho "menu", mas os links estão dentro de <tr> sem <td>, o que é HTML inválido. Além disso, a tabela não é semanticamente apropriada para uma lista de navegação, e os links não são separados estruturalmente de forma clara para o leitor de tela.
Alternativa B — ❌ Incorreta
A alternativa B usa um parágrafo (<p>) com links separados apenas por espaços em branco. Isso não atende à recomendação do e-MAG, pois o leitor de tela pode não distinguir claramente os links adjacentes. A separação visual por espaços não é suficiente para acessibilidade.
Alternativa C — ❌ Incorreta
A alternativa C usa uma tabela (<table>) com células (<td>) para separar os links. Embora a estrutura seja válida, a tabela não é semanticamente apropriada para uma lista de navegação, e o leitor de tela pode anunciar os links de forma confusa, sem a clara separação que uma lista (<ul>) proporciona.
Alternativa D — ✅ Correta ⟵ GABARITO
A alternativa D usa uma lista não ordenada (<ul>) com itens de lista (<li>), cada um contendo um link. Essa estrutura cria uma separação semântica clara entre os links, permitindo que o leitor de tela os identifique como elementos distintos e navegue entre eles de forma eficiente. É exatamente o que a recomendação do e-MAG pede.
Alternativa E — ❌ Incorreta
A alternativa E usa um elemento <select> (lista suspensa) com HTML inválido: coloca elementos <a> dentro de <option>, o que não é permitido. Além disso, uma lista suspensa não é apropriada para uma lista de navegação principal, e a estrutura não atende à recomendação de separação de links adjacentes.
Gabarito: letra D