Questão de Engenharia de Software — Acessibilidade em Sistemas — FGV 2025

Acessibilidade Web: ARIA (Accessible Rich Internet Applications)

Gabarito: letra C. O conjunto de atributos ARIA tem como papel principal fornecer metadados e semântica adicional a elementos dinâmicos e customizados de interface, permitindo que tecnologias assistivas (como leitores de tela) compreendam e operem componentes que não possuem semântica nativa do HTML — exatamente o caso de tabs e menus dropdown construídos com <div> e <span>.

ARIA (Accessible Rich Internet Applications) é uma especificação do W3C que define atributos HTML capazes de adicionar informações semânticas a elementos que, por natureza, não as possuem. Enquanto tags semânticas como <nav>, <button> e <header> já comunicam seu papel ao navegador e às tecnologias assistivas, elementos genéricos como <div> e <span> não carregam nenhum significado — para um leitor de tela, um <div> é apenas um bloco vazio. É aí que o ARIA entra: ele "traduz" o comportamento e a estrutura de componentes customizados para a árvore de acessibilidade, preenchendo lacunas que a marcação semântica não cobre.

O ARIA atua em três frentes principais: papéis (roles), que definem o tipo de componente (por exemplo, role="tab", role="menu", role="dialog"); propriedades, que descrevem características (como aria-label, que nomeia um elemento, ou aria-expanded, que indica se um menu está aberto); e estados, que refletem condições dinâmicas (como aria-selected, que indica qual aba está ativa). Esses atributos são interpretados pelo navegador e expostos na árvore de acessibilidade, que é o que os leitores de tela utilizam para navegar e anunciar o conteúdo.

Um exemplo prático: imagine um menu dropdown implementado com <div> e <span>. Sem ARIA, o leitor de tela não sabe que aquilo é um menu, nem quantas opções existem, nem se está aberto ou fechado. Com role="menu", role="menuitem", aria-haspopup="true" e aria-expanded="false", o usuário de tecnologia assistiva recebe as mesmas informações que um usuário visual — o componente se torna operável e compreensível.

É importante destacar que o ARIA não altera a aparência nem o comportamento do elemento — ele apenas adiciona metadados para a camada de acessibilidade. Por isso, a alternativa correta fala em "fornecer metadados e semântica adicional", e não em modificar layout, validar backend, bloquear ataques ou otimizar performance. Essas outras funções pertencem a outras tecnologias e práticas, como veremos na análise de cada alternativa.

A pegadinha desta questão está em confundir ARIA com outras preocupações do desenvolvimento web: responsividade, segurança, performance e conformidade com diretrizes. O candidato que não domina o conceito de ARIA tende a escolher uma alternativa que soa plausível, mas que não corresponde à função real do atributo. Guarde a essência: ARIA é semântica para acessibilidade — nada além disso.

Alternativa A — ❌ Incorreta

Adaptar o layout a diferentes tamanhos de tela é função de design responsivo, implementado com CSS (media queries, flexbox, grid) e meta viewport. O ARIA não tem nenhuma relação com a apresentação visual ou com a adaptação a dispositivos — ele atua exclusivamente na camada semântica para tecnologias assistivas.

Alternativa B — ❌ Incorreta

O ARIA não valida conformidade com WCAG 2.1. O WCAG (Web Content Accessibility Guidelines) é um conjunto de diretrizes de acessibilidade, e a conformidade é verificada por meio de testes e auditorias, não por atributos ARIA. O ARIA é uma ferramenta que ajuda a alcançar a conformidade, mas não é um validador de backend nem de diretrizes.

Alternativa C — ✅ Correta ⟵ GABARITO

Esta é a definição precisa de ARIA: fornecer metadados e semântica adicional a elementos dinâmicos e customizados, permitindo que tecnologias assistivas compreendam e operem componentes como tabs e menus dropdown construídos com <div> e <span>. Os atributos ARIA (roles, propriedades e estados) preenchem a lacuna deixada pela ausência de semântica nativa, tornando a interface acessível.

Alternativa D — ❌ Incorreta

Bloquear ataques de injeção de script XSS é função de medidas de segurança no desenvolvimento, como sanitização de entrada, escape de saída e políticas de Content Security Policy (CSP). O ARIA não possui nenhum atributo de segurança — ele é exclusivamente voltado à acessibilidade.

Alternativa E — ❌ Incorreta

Otimizar a velocidade de carregamento da página é objetivo de performance web, alcançado com técnicas como minificação de código, compressão de imagens, lazy loading e redução do DOM. O ARIA, na verdade, adiciona atributos ao DOM, o que pode até aumentar levemente o tamanho do documento — mas seu propósito não é performance, e sim acessibilidade.

Gabarito: letra C