HTML Navigation Accessibility

HTML Kopieren

<body>
    <!-- Skip-Link: Ganz am Anfang! -->
    <a href="#main-content" class="skip-link">Zum Inhalt springen</a>

    <header>
        <nav>
            <!-- Hier ist die lange Navigation... -->
        </nav>
    </header>

    <main id="main-content">
        <!-- Hauptinhalt - hier springt der Link hin -->
    </main>
</body>

CSS Kopieren

/* Skip-Link: Versteckt, bis fokussiert */
.skip-link {
    position: absolute;
    top: -100px;              /* Außerhalb des Viewports */
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-blue);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    font-weight: 600;
    z-index: 9999;            /* Über allem anderen */
    transition: top 0.3s ease;
}

/* Bei Fokus (Tab-Taste): Sichtbar machen */
.skip-link:focus {
    top: 0;
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

CSS Kopieren

/* ✅ Eigener Focus-Style */
a:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Oder mit box-shadow für rundere Ecken */
button:focus {
    outline: none;  /* Nur OK wenn Ersatz vorhanden! */
    box-shadow: 0 0 0 3px var(--accent-blue);
}

/* Focus nur bei Tastatur, nicht bei Mausklick */
a:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

HTML Kopieren

<!-- Hauptnavigation -->
<nav aria-label="Hauptnavigation">
    <ul>...</ul>
</nav>

<!-- Footer-Navigation -->
<nav aria-label="Footer-Links">
    <ul>...</ul>
</nav>

<!-- Breadcrumbs -->
<nav aria-label="Breadcrumb">
    <ol>...</ol>
</nav>

HTML Kopieren

<nav aria-label="Hauptnavigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/" aria-current="page">Über uns</a></li>
        <li><a href="/contact/">Kontakt</a></li>
    </ul>
</nav>

CSS Kopieren

/* Aktuelle Seite hervorheben */
nav a[aria-current="page"] {
    background: var(--accent-blue);
    color: white;
    font-weight: 600;
}

HTML Kopieren

<li class="dropdown">
    <!-- Button statt Link für Dropdown-Trigger! -->
    <button 
        aria-expanded="false"
        aria-haspopup="true"
        aria-controls="dropdown-themen">
        Themen ▼
    </button>
    
    <ul id="dropdown-themen" role="menu">
        <li role="menuitem"><a href="/html/">HTML</a></li>
        <li role="menuitem"><a href="/css/">CSS</a></li>
        <li role="menuitem"><a href="/js/">JavaScript</a></li>
    </ul>
</li>

JavaScript Kopieren

// Keyboard-Support für Dropdown-Buttons
document.querySelectorAll('.dropdown button').forEach(button => {
    button.addEventListener('keydown', function(e) {
        const dropdown = this.nextElementSibling;
        const isOpen = dropdown.classList.contains('open');
        
        switch(e.key) {
            case 'Enter':
            case ' ':  // Leertaste
                e.preventDefault();
                toggleDropdown(this, dropdown);
                break;
                
            case 'Escape':
                if (isOpen) {
                    closeDropdown(this, dropdown);
                    this.focus();  // Focus zurück auf Button
                }
                break;
                
            case 'ArrowDown':
                e.preventDefault();
                if (isOpen) {
                    // Zum ersten Link im Dropdown
                    dropdown.querySelector('a')?.focus();
                } else {
                    openDropdown(this, dropdown);
                }
                break;
        }
    });
});

// Navigation innerhalb des Dropdowns
document.querySelectorAll('.dropdown-menu a').forEach(link => {
    link.addEventListener('keydown', function(e) {
        const items = [...this.closest('ul').querySelectorAll('a')];
        const index = items.indexOf(this);
        const button = this.closest('.dropdown').querySelector('button');
        const dropdown = this.closest('ul');
        
        switch(e.key) {
            case 'ArrowDown':
                e.preventDefault();
                // Zum nächsten Item (oder zurück zum ersten)
                const nextIndex = (index + 1) % items.length;
                items[nextIndex].focus();
                break;
                
            case 'ArrowUp':
                e.preventDefault();
                // Zum vorherigen Item (oder zum letzten)
                const prevIndex = (index - 1 + items.length) % items.length;
                items[prevIndex].focus();
                break;
                
            case 'Escape':
                closeDropdown(button, dropdown);
                button.focus();
                break;
                
            case 'Tab':
                // Bei Tab: Dropdown schließen
                closeDropdown(button, dropdown);
                break;
        }
    });
});

// Hilfsfunktionen
function openDropdown(button, menu) {
    menu.classList.add('open');
    button.setAttribute('aria-expanded', 'true');
}

function closeDropdown(button, menu) {
    menu.classList.remove('open');
    button.setAttribute('aria-expanded', 'false');
}

function toggleDropdown(button, menu) {
    const isOpen = menu.classList.contains('open');
    if (isOpen) {
        closeDropdown(button, menu);
    } else {
        openDropdown(button, menu);
    }
}