Pular para o conteúdo principal

Questão de Arquitetura de Software — E-mag (modelo de acessibilidade de governo eletrônico) — FGV 2024

Arquitetura de SoftwareE-mag (modelo de acessibilidade de governo eletrônico)
Código
fg098515
Banca
FGV
Órgão
TJ-MS
Ano
2024
Nível
Superior
Cargo
Técnico de Nível Superior - Analista de Sistemas Computacionais - Analista de Sistemas
O e-MAG (Modelo de Acessibilidade em Governo Eletrônico) recomenda que links adjacentes sejam separados por mais do que simples espaços para que não fiquem confusos, em especial para usuários que utilizam leitor de tela.O trecho de código que gera um resultado aderente à recomendação supracitada, de modo a ser lido corretamente por um leitor de tela, é:
  1. A<table><th>menu</th><tr><a href="https://www.m1.com/pt-br/menu1">menu1</a></tr><tr><a href="https://www.m2.com/pt-br/menu2">menu2</a></tr><tr><a href="https://www.m3.com/pt-br/menu3">menu3</a></tr></table>
  2. B<p id="menu"><a href="https://www.m1.com/pt-br/menu1">Menu 1</a><a href="https://www.m2.com/pt-br/menu2">Menu 2</a><a href="https://www.m3.com/pt-br/menu3">Menu 3</a></p>
  3. C<tr id="menu"><td><a href="https://www.m1.com/pt-br/menu1">Menu1</a></td><td><a href="https://www.m2.com/pt-br/menu2">Menu2</a></td><td><a href="https://www.m3.com/pt-br/menu3">Menu3</a></td></tr>
  4. D<div class="menu"><ul><li><a href="https://www.m1.com/pt-br/menu1">Menu1</a></li><li><a href="https://www.m2.com/pt-br/menu2">Menu2</a></li><li><a href="https://www.m3.com/pt-br/menu3">Menu3</a></li></ul></div>
  5. E<label for="menu">menu</label><select id="menu"><option value=<a href="https://www.m1.com/ptbr/menu1">Menu 1</a></option><option value=<a href="https://www.m2.com/ptbr/menu2">Menu 2</a></option><option value=<a href="https://www.m3.com/ptbr/menu3">Menu 3</a></option></select>
Revelar gabarito e comentário

GabaritoD — <div class="menu"> <ul> <li><a href="https://www.m1.com/pt-br/menu1">Menu 1</a></li> <li><a href="https://www.m2.com/pt-br/menu2">Menu 2</a></li> <li><a href="https://www.m3.com/pt-br/menu3">Menu 3</a></li> </ul> </div>

Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.

e-MAG: Separação de Links Adjacentes

Gabarito: letra D. A alternativa D utiliza uma lista não ordenada (<ul>) com itens (<li>) para cada link, o que é semanticamente correto e garante que os links sejam percebidos como itens separados por leitores de tela, atendendo à recomendação do e-MAG de evitar que links adjacentes fiquem confusos quando separados apenas por espaços simples.

A banca testa o conhecimento prático de acessibilidade em HTML, especificamente a recomendação do e-MAG de que links adjacentes devem ser claramente separados para leitores de tela. A forma recomendada é utilizar listas, que fornecem estrutura e anunciam a quantidade de itens.

Alternativa A — ❌ Incorreta

O código é inválido: <a> está diretamente dentro de <tr>, sem o elemento <td> obrigatório. Além disso, usar tabelas para navegação não é semântico e pode confundir leitores de tela.

Alternativa B — ❌ Incorreta

Os links estão dentro de um parágrafo (<p>), separados apenas por espaços e quebras de linha. Isso não atende à recomendação de “mais do que simples espaços”, pois leitores de tela podem ler os links como uma sequência contínua sem pausas.

Alternativa C — ❌ Incorreta

Embora use células de tabela (<td>), a estrutura de tabela não é a mais adequada para listas de navegação. O <tr> com id="menu" não é semântico para um menu; listas são preferíveis. Além disso, o texto dos links contém quebras de linha ("Menu\n1") que podem ser interpretadas de forma não ideal.

Alternativa D — ✅ Correta ⟵ GABARITO

Utiliza uma lista não ordenada (<ul>) dentro de um <div> semântico. Cada link fica em um <li> separado, garantindo que leitores de tela anunciem cada item individualmente, com pausas entre eles. Essa é a prática recomendada pelo e-MAG e pelas diretrizes de acessibilidade (WCAG).

Alternativa E — ❌ Incorreta

O código é inválido: <option> não pode conter elementos âncora (<a>). Além disso, usar um <select> para navegação não é semântico e não atende aos requisitos de acessibilidade.

Gabarito: letra D

Link permanente: /questoes/fg098515