1. O que é uma Pseudo-classe?

Enquanto um seletor comum (como .botao) mira o elemento em seu estado estático padrão, uma pseudo-classe visa o elemento em uma circunstância temporal ou comportamental transitória.

2. O Ciclo de Vida dos Links e a Regra LVHA (LoVe HAte)

Ao estilizar links de navegação, a ordem em que você escreve as regras no arquivo CSS não é opcional — ela é ditada pela cascata de especificidade do navegador. Se você inverter a ordem, um estado pode anular o outro silenciosamente.

Para nunca errar, memorize o mnemônico mundial da web: LoVe HAte (Link, Visited, Hover, Active):

/* 1. L (Link): Estado virgem (não visitado) */
a:link {
  color: #38bdf8;
  text-decoration: none;
}
 
/* 2. V (Visited): Link já clicado pelo usuário anteriormente */
a:visited {
  color: #a855f7;
}
 
/* 3. H (Hover): O ponteiro do mouse repousa sobre o link */
a:hover {
  color: #60a5fa;
  text-decoration: underline;
}
 
/* 4. A (Active): O exato instante em que o clique está pressionado */
a:active {
  color: #ef4444;
}

3. O Duelo de Acessibilidade: :focus vs. :focus-visible

Durante décadas, designers gráficos e desenvolvedores cometeram o maior crime contra a acessibilidade na web: aplicar outline: none; ou outline: 0; para eliminar a borda azul nativa do navegador que aparecia quando um botão era clicado com o mouse.

O efeito colateral foi devastador: milhões de pessoas com deficiência motora que navegam exclusivamente pela tecla Tab ficaram cegas, sem saber onde o cursor estava na tela!

A Salvação: A Pseudo-classe :focus-visible

A W3C resolveu esse conflito histórico criando a pseudo-classe :focus-visible:

• Se o usuário clicar no botão com o mouse ou tocar na tela do celular: nenhum anel de foco é exibido (design limpo!).
• Se o usuário navegar usando a tecla Tab do teclado ou um leitor de tela: o navegador ativa :focus-visible e exibe um anel de foco destacado!

/* Padrão de Alta Acessibilidade e Design Impecável */
button:focus-visible,
a:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 4px; /* Afasta o anel das bordas arredondadas com elegância */
}

4. O Efeito Cascata do :focus-within

A pseudo-classe :focus-within possui um comportamento genial: ela seleciona um elemento contêiner pai se qualquer elemento filho dentro dele receber foco!

É a técnica perfeita para acender a borda de um cartão de formulário ou escurecer o fundo quando o usuário clica em qualquer campo de texto interno:

/* O cartão inteiro ganha uma borda azul e sombra quando o usuário foca no input */
.cartao-login:focus-within {
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
}

5. Estados Interativos de Formulários

O CSS moderno permite validar e reagir a campos de formulário sem precisar de uma única linha de JavaScript:

6. Laboratório Prático: Formulário Reativo e Foco Acessível

No código interativo abaixo, experimente navegar usando a tecla Tab para ver o anel do :focus-visible com outline-offset, observe o cartão reagindo com :focus-within e teste digitar um e-mail para ver a validação em tempo real com :valid:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Pseudo-classes CSS</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 40px;
      margin: 0;
    }
 
    /* 1. O PAI REAGE COM :focus-within */
    .formulario-card {
      max-width: 420px;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 14px;
      padding: 24px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
 
    .formulario-card:focus-within {
      border-color: #38bdf8;
      box-shadow: 0 8px 30px rgba(56, 189, 248, 0.15);
    }
 
    .campo-grupo {
      margin-bottom: 20px;
    }
 
    label {
      display: block;
      font-size: 0.85rem;
      color: #94a3b8;
      margin-bottom: 8px;
      font-weight: 600;
    }
 
    /* 2. ESTADOS DO INPUT (:valid e :invalid) */
    .input-texto {
      width: 100%;
      background: #0f172a;
      border: 1px solid #334155;
      border-radius: 8px;
      padding: 12px 14px;
      color: #f8fafc;
      font-size: 1rem;
      box-sizing: border-box;
      outline: none;
      transition: border-color 0.2s ease;
    }
 
    .input-texto:focus {
      border-color: #38bdf8;
    }
 
    .input-texto:not(:placeholder-shown):valid {
      border-color: #10b981; /* Borda verde quando válido! */
    }
 
    .input-texto:not(:placeholder-shown):invalid {
      border-color: #ef4444; /* Borda vermelha se formato inválido! */
    }
 
    /* 3. BOTÃO COM :hover, :active E :focus-visible */
    .btn-enviar {
      width: 100%;
      background: #2563eb;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 14px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.1s ease;
    }
 
    .btn-enviar:hover {
      background: #1d4ed8;
    }
 
    .btn-enviar:active {
      transform: scale(0.98); /* Feedback tátil ao clicar */
    }
 
    /* ACESSIBILIDADE POR TECLADO (TAB) */
    .btn-enviar:focus-visible {
      outline: 2px solid #38bdf8;
      outline-offset: 4px;
    }
  </style>
</head>
<body>
  <div class="formulario-card">
    <h3 style="margin-top:0; color:#f1f5f9;">Acesso ao Portal</h3>
    <p style="color:#64748b; font-size:0.85rem; margin-bottom:20px;">
      Navegue usando o <kbd>Tab</kbd> do teclado para ver o <code>:focus-visible</code> em ação!
    </p>
 
    <div class="campo-grupo">
      <label for="email">E-mail Corporativo</label>
      <input type="email" id="email" class="input-texto" placeholder="seu@email.com" required>
    </div>
 
    <button type="button" class="btn-enviar">Entrar no Ambiente →</button>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e teste clicar no formulário para comprovar o :focus-within no contêiner e a validação de e-mail dinâmica sem JavaScript:

⚡ Abrir no Playground IDE →

7. Resumo e Próximos Passos

• Pseudo-classes (com :) estilizam elementos com base no seu estado dinâmico ou comportamental.
• A ordem dos links deve seguir estritamente o mnemônico LVHA: :link, :visited, :hover e :active.
• Nunca use outline: none sem fornecer um substituto de alta visibilidade!
• :focus-visible exibe anéis de foco exclusivamente na navegação por teclado (Tab) e leitores de tela, mantendo cliques de mouse limpos.
• :focus-within estiliza o elemento pai quando qualquer nó filho recebe foco.
• :valid e :invalid permitem criar feedbacks visuais imediatos em formulários HTML5.

O post Pseudo-classes no CSS: hover, focus e visible | Web Academy apareceu primeiro em Web-Zoneware.

1. A Mecânica de Ocultação: Render Tree, Layout e Acessibilidade

Para compreender como o CSS oculta nós, precisamos olhar para as entranhas do motor de renderização do navegador (Blink, Gecko, WebKit). A pipeline de exibição divide o documento em estruturas distintas:

• DOM Tree (Árvore DOM): A representação pura dos nós HTML na memória. Nenhum comando de CSS remove nós da DOM Tree (apenas scripts JavaScript com remove() fazem isso).
• Render Tree (Árvore de Renderização): A fusão da árvore DOM com as regras de CSS computadas. Elementos que não produzem caixas visuais nem afetam a geometria são sumariamente eliminados desta árvore.
• Layout / Reflow (Cálculo Geométrico): O cálculo das coordenadas cartesianas (X, Y) e das dimensões exatas de cada retângulo na tela.
• Accessibility Tree (Árvore de Acessibilidade): A estrutura lida por leitores de tela (NVDA, VoiceOver, JAWS) e tecnologias assistivas.

2. display: none — O Desaparecimento Total do Fluxo

Quando aplicamos display: none a um elemento, o navegador o desativa completamente da Render Tree. O elemento continua existindo no código HTML e na memória JavaScript (DOM), mas para o motor de layout e pintura, ele simplesmente não existe:

.painel-desativado {
  display: none;
}

Principais Consequências de display: none:

• Liberação Espacial Absoluta: O elemento não ocupa nenhuma largura, altura, margem ou borda. Os elementos vizinhos se reorganizam imediatamente para ocupar o espaço que antes pertencia a ele, provocando um processo de reflow (recálculo geométrico geral).
• Bloqueio de Herança aos Filhos: Se uma <div> pai tem display: none, nenhum nó descendente poderá ser exibido, mesmo que você declare display: block !important no elemento filho. A caixa raiz do ramo foi destruída da árvore de renderização.
• Invisibilidade para Leitores de Tela: Elementos com display: none são sumariamente removidos da Árvore de Acessibilidade. Deficientes visuais não conseguem navegar nem ouvir o conteúdo desse nó.
• Impossibilidade de Transições Suaves: A propriedade display não é interpolável numericamete. Você não pode animar suavemente de display: none para display: block com transition comum (a menos que use recursos experimentais recentes do CSS Display Level 4 como transition-behavior: allow-discrete e @starting-style).

3. visibility: hidden — A Cortina de Invisibilidade Geométrica

Diferente de display: none, a propriedade visibility: hidden não expulsa o elemento da etapa de Layout. Ela apenas instrui o motor gráfico a não pintar os pixels da caixa na tela:

.espaco-reservado {
  visibility: hidden;
}

Comportamentos Únicos de visibility: hidden:

• Preservação Rígida do Espaço: O elemento continua ocupando exatamente sua largura, altura, padding e margens no fluxo do documento. Cria-se um “buraco invisível” na página, e os elementos irmãos permanecem exatamente onde estavam, sem sofrer reflow geométrico.
• Isenção de Cliques e Foco: Embora ocupe espaço na tela, o elemento invisível não intercepta cliques de mouse nem recebe foco via teclado (a tecla Tab pula essa caixa).
• A Grande Exceção: Filhos Podem Reaparecer! Ao contrário de display, a propriedade visibility é herdada por padrão, mas pode ser sobrescrita em qualquer filho. Se um pai for visibility: hidden e um elemento filho tiver visibility: visible, o filho reaparece flutuando perfeitamente no meio do vazio deixado pelo pai!

/* O pai fica invisível mas reserva 300px na tela */
.menu-pai {
  visibility: hidden;
  width: 300px;
  height: 200px;
  background-color: #0f172a;
}
 
/* O filho reaparece normalmente no meio da área vazia */
.menu-pai .item-ativo {
  visibility: visible;
  background-color: #10b981;
  color: #ffffff;
}

4. opacity: 0 vs. O Perigo dos Fantasmas Clicáveis

Definir opacity: 0 torna a caixa 100% transparente. No entanto, aos olhos do navegador, o elemento continua ativo e interativo:

.botao-fantasma {
  opacity: 0;
  /* PERIGO: continua ocupando espaço e recebendo cliques acidentais! */
}

Para desativar a interação em elementos tornados transparentes com opacity: 0 (muito comuns em modais e dropdowns com transição suave), você deve associar pointer-events: none:

/* Modal fechado com transição de opacidade segura */
.modal-overlay {
  opacity: 0;
  pointer-events: none; /* Desativa cliques do mouse */
  transition: opacity 0.3s ease;
}
 
/* Modal aberto */
.modal-overlay.is-active {
  opacity: 1;
  pointer-events: auto; /* Reativa os cliques */
}

5. O Dilema da Acessibilidade: O que os Leitores de Tela Enxergam?

Para criar interfaces inclusivas em conformidade com as diretrizes internacionais WCAG 2.2, precisamos saber exatamente como as tecnologias assistivas reagem a cada método de ocultação:

6. A Técnica Moderna .visually-hidden (Screen Readers Only)

Muitas vezes, precisamos de um elemento invisível aos olhos de quem enxerga a tela, mas essencial para usuários cegos navegando via áudio. Exemplos clássicos incluem:

• O texto descritivo dentro de um botão que só tem um ícone de lupa (ex.: <button><svg>...</svg><span class="visually-hidden">Pesquisar no site</span></button>).
• Links de salto para o conteúdo principal (Skip to Content).
• Rótulos de cabeçalho ocultos para estruturar seções que no design usam apenas separadores visuais.

Técnicas antigas como text-indent: -9999px ou posicionamento left: -10000px causam problemas graves de performance, renderização fora de tela e falhas em dispositivos táteis. O padrão ouro adotado mundialmente (Bootstrap, Tailwind, WordPress Core) é o padrão clip-path / rect:

/* Classe utilitária universal de acessibilidade */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

Essa combinação mágica reduz o elemento a uma caixa imperceptível de 1 pixel por 1 pixel, recorta sua renderização visual a zero, retira-o do fluxo para não deformar a grade da página e mantém o conteúdo 100% vivo e intacto dentro da Accessibility Tree.

7. Laboratório Prático: Comparando none, hidden e opacity

Veja no exemplo interativo abaixo como as três abordagens se comportam em um conjunto de caixas alinhadas. Observe atentamente o que acontece com os vizinhos quando uma caixa do meio é ocultada com cada método:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Ocultação CSS</title>
  <style>
    body {
      font-family: 'Segoe UI', system-ui, sans-serif;
      background: #0b0f19;
      color: #f1f5f9;
      padding: 30px;
    }
 
    .container {
      display: flex;
      gap: 16px;
      background: #1e293b;
      padding: 24px;
      border-radius: 12px;
      border: 1px solid #334155;
      margin-bottom: 24px;
    }
 
    .card {
      width: 120px;
      height: 100px;
      background: #2563eb;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      border-radius: 8px;
      text-align: center;
      transition: opacity 0.4s ease;
    }
 
    /* 1. Desaparece e o Card 3 encosta no Card 1 (Reflow total) */
    .modo-none {
      display: none;
    }
 
    /* 2. Fica invisível, mas deixa um espaço vazio de 120px entre os Cards 1 e 3 */
    .modo-hidden {
      visibility: hidden;
    }
 
    /* 3. Fica transparente, continua ocupando 120px e pode ser clicado! */
    .modo-opacity {
      opacity: 0;
    }
  </style>
</head>
<body>
  <h2>Demonstração Visual de Ocultação</h2>
 
  <div class="container">
    <div class="card">Card 1</div>
    <!-- Mude a classe abaixo para .modo-none, .modo-hidden ou .modo-opacity -->
    <div class="card modo-hidden">Card 2 (Oculto)</div>
    <div class="card">Card 3</div>
  </div>
</body>
</html>

Experimente alternar a classe do Card 2 no editor de código do nosso laboratório online para ver a mecânica de renderização em tempo real:

⚡ Abrir no Playground IDE →

8. Resumo da Lição e Guia Rápido de Escolha

• Use display: none quando quiser remover um componente do fluxo e reorganizar a página (ex.: abas de navegação fechadas, acordeões colapsados, itens filtrados em uma busca).
• Use visibility: hidden quando precisar que a página mantenha rigorosamente a estrutura espacial sem tremor de layout (ex.: placeholders de carregamento, animações de revelação geométrica, menus suspensos onde os filhos precisam reaparecer).
• Use opacity: 0 + pointer-events: none quando for criar transições e animações suaves de fade-in / fade-out (ex.: modais, popups, tooltips flutuantes).
• Use .visually-hidden sempre que um elemento for destinado exclusivamente a leitores de tela para prover acessibilidade e navegação sem poluir visualmente a interface gráfica.

O post Ocultando Elementos no CSS: none vs hidden | Web Academy apareceu primeiro em Web-Zoneware.

1. As Diretrizes da WCAG e os 4 Princípios do POUR

O padrão mundial de conformidade é regido pelas WCAG (Web Content Accessibility Guidelines), mantidas pelo W3C. A especificação divide todos os requisitos de acessibilidade em quatro princípios essenciais:

2. A Primeira Regra do WAI-ARIA

O WAI-ARIA (Accessible Rich Internet Applications) é uma especificação técnica que adiciona atributos especiais ao HTML para descrever o estado e a função de componentes interativos complexos (como abas, modais e accordions).

No entanto, a própria documentação oficial do W3C estipula a Primeira Regra de Ouro do ARIA:

3. Catálogo dos Atributos ARIA Mais Importantes

Quando elementos nativos não forem suficientes para descrever estados dinâmicos via JavaScript, utilize estes atributos complementares:

4. Navegação por Teclado e o Skip Link

Usuários com limitações motoras ou pessoas cegas navegam exclusivamente utilizando a tecla Tab (para avançar), Shift + Tab (para retroceder) e Enter/Espaço (para acionar).

O Papel do Atributo tabindex:

• tabindex="0": Insere um elemento na ordem sequencial natural de navegação por teclado.
• tabindex="-1": Remove o elemento da ordem do Tab, mas permite que ele receba foco programático via JavaScript (elemento.focus()).
• ⚠️ Valores Positivos (tabindex="1", tabindex="2"): SÃO PROIBIDOS! Eles quebram a ordem de leitura lógica e criam uma experiência confusa e desconexa.

Implementando o Link de Salto (Skip Link):

Em sites com menus extensos com dezenas de links, ter que pressionar Tab 30 vezes em todas as páginas para chegar ao texto é exaustivo. O Skip Link é o primeiro elemento do HTML: ele fica invisível na tela e só surge quando recebe o foco do teclado:

<!-- Primeiro elemento do <body> -->
<a href="#conteudo-principal" class="skip-link">Saltar para o Conteúdo Principal →</a>
 
<header>
    <nav>
        <!-- Dezenas de links de navegação... -->
    </nav>
</header>
 
<main id="conteudo-principal" tabindex="-1">
    <!-- Conteúdo útil da página começa aqui -->
</main>

/* Skip Link com foco visível */
.skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    background-color: #38bdf8;
    color: #0f172a;
    padding: 12px 20px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    z-index: 9999;
    transition: top 0.2s ease;
}
 
.skip-link:focus {
    top: 10px; /* Aparece no topo da página quando o usuário aperta Tab! */
}

5. Código Prático Completo: Componente de Menu e Formulário Acessíveis

Abaixo reunimos a implementação de um botão retrátil com estados ARIA e um campo de formulário com instrução vinculada:

<div class="wzw-a11y-demo">
    <h3>♿ Demonstração de Padrões Acessíveis</h3>
 
    <!-- 1. Botão Retrátil com aria-expanded -->
    <button id="btnMenu" class="btn-accessible" aria-expanded="false" aria-controls="painelFaq">
        <span>Como funciona a certificação da Web Academy?</span>
        <span id="iconeSeta" aria-hidden="true">▼</span>
    </button>
 
    <div id="painelFaq" class="faq-content" hidden>
        <p>Ao concluir as 50 lições e o projeto prático final, você receberá um certificado digital autenticado com carga horária completa.</p>
    </div>
 
    <!-- 2. Formulário com aria-describedby e foco visível -->
    <div class="form-block">
        <label for="senhaAcesso">Senha de Acesso:</label>
        <input 
            type="password" 
            id="senhaAcesso" 
            name="senha" 
            aria-describedby="dicaSenha" 
            required>
        <small id="dicaSenha" class="hint-text">Mínimo de 8 caracteres contendo ao menos uma letra maiúscula e um número.</small>
    </div>
</div>

.wzw-a11y-demo {
    max-width: 580px;
    padding: 24px;
    background-color: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    color: #f8fafc;
}
 
.btn-accessible {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background-color: #1e293b;
    color: #f8fafc;
    border: 1px solid #334155;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
 
/* Indicador de Foco Acessível (NUNCA faça outline: none sem substituto!) */
.btn-accessible:focus-visible,
input:focus-visible {
    outline: 3px solid #38bdf8;
    outline-offset: 3px;
}
 
.faq-content {
    padding: 16px;
    background-color: #0b1120;
    border: 1px solid #1e293b;
    border-top: none;
    border-radius: 0 0 6px 6px;
    font-size: 0.95rem;
    color: #cbd5e1;
}
 
.form-block {
    margin-top: 24px;
}
 
.form-block label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}
 
.form-block input {
    width: 100%;
    padding: 10px 14px;
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #fff;
}
 
.hint-text {
    display: block;
    margin-top: 6px;
    color: #94a3b8;
    font-size: 0.85rem;
}

const btnFaq = document.getElementById('btnMenu');
const painel = document.getElementById('painelFaq');
const seta = document.getElementById('iconeSeta');
 
btnFaq.addEventListener('click', () => {
    const estaExpandido = btnFaq.getAttribute('aria-expanded') === 'true';
    
    // Inverte o estado acessível
    btnFaq.setAttribute('aria-expanded', !estaExpandido);
    painel.hidden = estaExpandido;
    seta.textContent = estaExpandido ? '▼' : '▲';
});

6. Ferramentas Relacionadas & Próximos Passos

Valide a conformidade do seu código com as ferramentas e lições complementares:

• Central do Desenvolvedor Web: Valide marcações HTML, contrastes cromáticos e sintaxe semântica.
• Hub Master de Imagens: Assegure textos alternativos concisos e compressão visual adequada.
• Lição 44: Recursos Multimídia & Embeds: Revise conteúdos incorporados e fallbacks.
• Lição 46: DOCTYPES Válidos & Especificações: Compreenda como a declaração correta de DOCTYPE garante a renderização moderna em modo padrão.

7. Referências Técnicas & Especificações Oficiais

• W3C Web Accessibility Initiative: WCAG 2.2 Guidelines Overview
• W3C WAI-ARIA Authoring Practices Guide (APG) Patterns
• MDN Web Docs: HTML – A Good Basis for Accessibility

O post Acessibilidade Web & WCAG no HTML: Guia | Web Academy apareceu primeiro em Web-Zoneware.