Questão de Engenharia de Software — W3C, WCAG e WAI — FCC 2025

Desenvolvimento Web: Responsividade, Acessibilidade e Interatividade

Gabarito: letra B. A estratégia correta combina CSS3 para media queries e animações responsivas, HTML5 para estrutura semântica acessível e jQuery para carregamento assíncrono e manipulação de menus dinâmicos — exatamente o que a alternativa B descreve. Essa é a divisão de responsabilidades consagrada no desenvolvimento web: CSS cuida da apresentação e adaptação visual, HTML da estrutura e semântica (base da acessibilidade), e JavaScript/jQuery do comportamento dinâmico e da comunicação assíncrona com o servidor.

Para entender por que essa é a resposta, é preciso dominar o papel de cada tecnologia. O HTML5 é a linguagem de marcação que define a estrutura do conteúdo — e, com seus elementos semânticos (<header>, <nav>, <main>, <article>, <footer>), fornece a base para a acessibilidade, pois leitores de tela e outras tecnologias assistivas dependem dessa semântica para interpretar a página. O CSS3 é a folha de estilo responsável pela apresentação visual; as media queries são o mecanismo que permite adaptar o layout a diferentes tamanhos de tela (responsividade), e as animações/transições CSS enriquecem a experiência sem sobrecarregar o JavaScript. O jQuery (uma biblioteca JavaScript) é a ferramenta clássica para manipular o DOM — criar menus dinâmicos, alternar classes, animar elementos — e para realizar requisições assíncronas (AJAX), carregando conteúdo sem recarregar a página. Já o JSF (JavaServer Faces) é um framework de interface de usuário para aplicações Java EE, voltado para a construção de componentes de interface no servidor — não é a ferramenta adequada para responsividade, animações ou manipulação dinâmica no cliente.

A acessibilidade (WCAG 2.1) é alcançada principalmente pela combinação de HTML semântico (estrutura correta, atributos ARIA quando necessário, textos alternativos) e CSS que não comprometa a legibilidade (contraste, tamanho de fonte, foco visível). O jQuery, ao manipular o DOM, deve preservar a acessibilidade (por exemplo, gerenciando o foco e anunciando mudanças de conteúdo). A responsividade, por sua vez, é essencialmente uma questão de CSS: media queries, unidades relativas (%, em, rem, vw/vh), Flexbox e Grid. O carregamento assíncrono é função do JavaScript (AJAX/fetch), que o jQuery simplifica com $.ajax().

A pegadinha desta questão está em atribuir a tecnologias erradas funções que não lhes cabem: usar JSF para layout responsivo, jQuery para ajustar tamanhos de tela, ou HTML5 para criar menus interativos. A banca testa se o candidato conhece a separação de responsabilidades entre as camadas da web. Guarde o trio: HTML = estrutura/semântica, CSS = apresentação/responsividade, JavaScript/jQuery = comportamento/interatividade/assíncrono. É exatamente esse critério que separa as alternativas.

Alternativa A — ❌ Incorreta

Atribui ao JSF a função de ajustar automaticamente o layout responsivo — o que é papel do CSS (media queries). Além disso, diz que o CSS3 deve ser usado "sem media queries", o que inviabiliza a responsividade. O HTML5 até pode contribuir para validação acessível (atributos como required, type), mas a alternativa erra ao negar as media queries e ao colocar o JSF como responsável pelo layout.

Alternativa B — ✅ Correta ⟵ GABARITO

Esta alternativa espelha exatamente a divisão correta de responsabilidades: CSS3 para media queries e animações responsivas (adaptação a diferentes telas), HTML5 para estruturar elementos semânticos acessíveis (base da acessibilidade WCAG) e jQuery para carregar conteúdo assíncrono e manipular menus dinâmicos (interatividade e AJAX). Cada tecnologia é usada para o que é mais adequada.

Alternativa C — ❌ Incorreta

Diz que jQuery e CSS3 devem carregar dinamicamente todo o conteúdo e criar menus interativos, deixando o HTML5 apenas para estruturação básica. O erro está em atribuir ao CSS3 a função de carregar conteúdo dinamicamente — isso é função do JavaScript/jQuery (AJAX). O CSS não carrega conteúdo; ele apenas estiliza. Além disso, o HTML5 não é "apenas estruturação básica": sua semântica é essencial para a acessibilidade.

Alternativa D — ❌ Incorreta

Atribui ao JSF a criação de menus dinâmicos (função do JavaScript/jQuery) e ao jQuery o ajuste automático do layout com base no tamanho da tela (função do CSS com media queries). Inverte completamente os papéis: JSF é framework de servidor, não de interatividade no cliente; jQuery não é ferramenta de responsividade.

Alternativa E — ❌ Incorreta

Atribui ao HTML5 a criação de menus interativos (função do JavaScript/jQuery), ao CSS3 o ajuste dinâmico dos tamanhos de tela (que é feito com media queries, mas o CSS não "ajusta dinamicamente" no sentido de lógica — é declarativo) e ao JSF a manipulação de eventos e carregamento assíncrono (função do JavaScript/jQuery). A alternativa mistura as responsabilidades de forma incorreta.

Gabarito: letra B