Wer Webseiten barrierefrei nach BFSG bzw. WCAG machen will oder muss, setzt immer auf dem gleichen HTML5 Grundgerüst auf.
👉🏼 Diese Basis möchten wir in diesem Beitrag öffentlich teilen, zumal wir kein aktuelles Muster gefunden haben. Du darfst das Basis-Template mit Fokus Barrierefreiheit gerne verwenden.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aussagekräftiger Seitentitel</title>
</head>
<body itemtype="https://schema.org/WebPage" itemscope>
<nav aria-label="Seitenbereiche" id="skipnav">
<ul>
<li><a class="screen-reader" title="direkt zum Inhalt springen" href="#main">zum Inhalt</a></li>
<li><a class="screen-reader" title="direkt zum Menü springen" href="#nav">zum Menü</a></li>
<li><a class="screen-reader" title="direkt zum Fußbereich springen" href="#foo">zum Fußbereich</a></li>
</ul>
</nav>
<header itemtype="https://schema.org/WPHeader" itemscope>
<img src="logo.svg" alt="logo"> <nav id="nav" aria-label="Hauptnavigation">
<ul>
<li><a aria-current="page" href="/">Startseite</a></li>
<li><a href="leistungen.html">Leistungen</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
</header>
<main id="main">
<article aria-labelledby="main-h1-id">
<h1 id="main-h1-id">Hauptüberschrift</h1>
<p>Inhalt.</p>
<h2>Zwischenüberschrift</h2>
<p>Inhalt.</p>
<aside aria-labelledby="aside-id">
<h3 id="aside-id">Zusätzlicher Bereich</h3>
<p>Inhalt.</p>
</aside>
</article>
</main>
<footer id="foo" itemtype="https://schema.org/WPFooter" itemscope>
<footer id="foo" itemtype="https://schema.org/WPFooter" itemscope>
<p>Fußbereichsinhalt.</p>
</footer>
</body>
</html>
Es ist ein Basis-Template mit typischen Elementen jeder Webseite.
Die korrekte Sprachangabe ist wichtig, insbesondere für Screenreader. Dieses globale lang Attribut (Universalattribut) für die Sprachcodierung erlaubt bestimmte definierte Werte (RFC 5646). Bei einsprachigen Dokumenten soll diese im root-Element (html) definiert werden.
Die Syntax ist definiert und beinhaltet primär die Sprache, die durch Subtags verbunden mit - ergänzt werden kann.
Der Inhalt muss entsprechend vergrößerbar sein und eben bei Zoom 100 % quasi starten.
Die Auszeichnung mit Schema.org ist nicht zwingend für die Barrierefreiheit, gehört für uns aber zu einem sinnvollen Template und ist daher in diesem Muster einer HTML-Seite mit header, main und footer enthalten.
Diese Sprunglinks zu Beginn sind formal nicht immer erforderlich, aber hilfreich und relativ einfach zu implementieren.
Für die Barrierefreiheit müssen sich wiederholende Abschnitte mit Menüs überspringbar sein (skip links, Success Criterion 2.4.1 Bypass Blocks).
Daher haben wir diese Sprunglinks direkt zu Beginn integriert. Über die CSS-Klasse screen-reader kann man diese optisch zugänglich ausblenden und bei :focus bzw. :focus-visible (nicht bei Link-Klick sichtbar) anzeigen.
/* Elemente optisch ausblenden */
.screen-reader {
position: absolute;
top: 0;
left: 0;
transform: translateY(-100%);
}
/* Bei Tastatur-Fokus visuell zeigen */
.screen-reader:focus-visible {
transform: translateY(0%);
}
Weiter ist darauf zu achten, dass der Tastatur-Fokus immer sichtbar mit ausreichend Farbkontrast dargestellt wird. Man könnte mit currentColor arbeiten oder plump mit:
*:focus-visible {
outline: 2px solid white;
box-shadow: 0 0 0 4px black;
}Accessible Rich Internet Applications (ARIA) ist eine Sammlung von Rollen und Attributen für bessere Zugänglichkeit von Webinhalten. Insbesondere blinde Menschen, die auf Vorleseprogramme angewiesen sind, können von der technischen Spezifikation ARIA--Accessible Rich Internet Application profitieren.
Diese sind jedoch nur zusätzlich und korrekt anzubringen, häufig überflüssig/ doppelt oder fehlend. Daher muss man sich genauer mit deren Anwendung befassen und auch mal einen Screenreader testen.
Alternative Textinhalte für visuelle Medien wie Bilder und Videos sind essenziell. Daher muss auch ein sinnvoller alt-Text für nicht nur dekorative Elemente enthalten sein. Logo wäre hier etwas dünn, besser wäre eine detaillierte Beschreibung, wessen Logo wie dargestellt ist. Das ist in diesem neutralen Muster begrenzt möglich.
Es ist wichtig, semantisch die jeweils passenden Elemente zu benutzen. Auch wer hier fit ist, sollte mal einen Blick auf die aktuellen Elemente und deren Definition bzw. Einsatzzweck werfen. Ich bin sicher, es sind gefühlt neue Elemente dabei. Denn obiger Code könnte in samp innerhalb pre ausgezeichnet sein.
Eine logisch korrekte Überschrifthierarchie ist ebenso elementar. Für die formale Barrierefreiheit muss übrigens die erste Überschrift keine h1 sein. Wichtig ist, dass optisch alle Überschriften auch technisch Überschriften sind.
Da mehr als ein Weg zur Suche bzw. Navigation erforderlich ist, kommt eine Wegweiser-Navigation, auch Breadcrumb genannt, häufig zum Einsatz. Dieser Navigationspfad ist zudem recht benutzerfreundlich.
<nav aria-label="Breadcrumb">
<ol>
<li><a href="...">Startseite</a></li>
<li><a href="...">Unterseite</a></li>
<li><a href="..." aria-current="page">Aktuelle Seite</a></li>
</ol>
</nav>
Ein barrierefreies Suchformular ist im Grunde nicht so schwer, aber in nahezu jedem Fall zu verbessern. Ein einfaches Beispiel.
<form role="search" method="get" action="...">
<label for="search-field">
<span class="screen-reader-text">Suchfunktion:</span>
<input type="search" id="search-field" placeholder="Suchbegriff" value="" name="s" aria-label="Suchfeld:">
</label>
<button class="search-submit"><span class="gp-icon icon-search"><svg viewBox="0 0 512 512" focusable="false" aria-label="Suche absenden" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path></svg></span></button>
</form>
Sollte Dir etwas aufgefallen sein, Du hast einen Fehler gefunden oder wünscht Dir Ergänzungen, freue ich mich auf einen Kommentar oder Deine Nachricht.
Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an YouTube übermittelt werden und Sie die Datenschutzerklärung akzeptieren.
Kommentare zu Barrierefreies HTML5 Muster-Template (Vorlage, Boilerplate)