<!-- 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! */
}

<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 ? '▼' : '▲';
});