Hej Gerhard1,
Also habe ich das richtig verstanden, dass du nur wenige Seiten hast. Die erste Ebene der Navigation entspricht daher einer Seite, die Unterpunkte gehen auf bestimmte Stellen (Kapitel) auf derselben Seite?
Dann muss nur die erste Ebene der Navigation zugänglich sein. Da ich immer die einfachste Lösung für die beste halte, würde ich ich persönlich so vorgehen:
Die Links der ersten Ebene sind immer verfügbar. Die Links in der zweiten Ebene sind nebensächlich. Setz sie um, wie du kannst (und mach das mit der Zeit und den hier erhaltenen Tipps) besser. Ich versuche mich gerade an einem zugänglichen Menü, aber ich weiß weder, ob das erfolgreich wird, noch weiß ich, wann es fertig wird.
Meine Lösung für Deinen Fall:
#HTML
<nav>
<ul>
<li>
<a href="">Item 1</a>
<ul>
<li><a href="">Subitem 1</a></li>
<li><a href="">Subitem 2</a></li>
<li><a href="">Subitem 3</a></li>
<li><a href="">Subitem 4</a></li>
<li><a href="">Subitem 5</a></li>
</ul>
</li>
<li>
<a href="">Item 2</a>
<ul>
<li><a href="">Subitem 1</a></li>
<li><a href="">Subitem 2</a></li>
<li><a href="">Subitem 3</a></li>
<li><a href="">Subitem 4</a></li>
<li><a href="">Subitem 5</a></li>
</ul>
</li>
<li>
<a href="">Item 3</a>
<ul>
<li><a href="">Subitem 1</a></li>
<li><a href="">Subitem 2</a></li>
<li><a href="">Subitem 3</a></li>
<li><a href="">Subitem 4</a></li>
<li><a href="">Subitem 5</a></li>
</ul>
</li>
<li>
<a href="">Item 4</a>
<ul>
<li><a href="">Subitem 1</a></li>
<li><a href="">Subitem 2</a></li>
<li><a href="">Subitem 3</a></li>
<li><a href="">Subitem 4</a></li>
<li><a href="">Subitem 5</a></li>
</ul>
</li>
<li>
<a href="">Item 5</a>
<ul>
<li><a href="">Subitem 1</a></li>
<li><a href="">Subitem 2</a></li>
<li><a href="">Subitem 3</a></li>
<li><a href="">Subitem 4</a></li>
<li><a href="">Subitem 5</a></li>
</ul>
</li>
</ul>
</nav>
#CSS
nav > ul {
display: flex;
flex-wrap: wrap;
}
nav ul {
margin-left:0;
padding-left: 0;
list-style: none;
}
nav li {
position:relative;
min-width: 15em;
}
nav li li {
position: absolute;
z-index: -1;
top:0;
left: 0;
}
nav li:focus-within li,
nav li:hover li {
position: static;
}
nav a {
display: block;
padding: 1em;
color: #000;
background: #fa0;
}
Warum reicht das erst mal? Weil alle Seiten erreichbar sind! Niemand wird so ausgeschlossen!
Auf den Unterseiten solltest du die Seiteninterne Navigation noch mal einbauen, also so was in der Art wie:
#HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Name des Dokumentes</title>
</head>
<body>
<a href="#content" class="visuallyhidden focusable">Zum Hauptinhalt</a>
<header>
[…]
</header>
<main id="content">
<article>
<header>
<h1>Name des Textes>
<ul>
<li><a href="#">Kapitel 1</a></li>
<li><a href="#">Kapitel 2</a></li>
<li><a href="#">Kapitel 3</a></li>
<li><a href="#">Kapitel 4</a></li>
<li><a href="#">Kapitel 5</a></li>
</ul>
</header>
<section>
<h2>Kapitel 1</h2>
[…]
</section>
<section>
<h2>Kapitel 2</h2>
[…]
</section>
[usw]
</article>
<footer>
[…]
</footer >
</body>
</html>
Für den Skiplink (Damit kommen Tastatur-Nutzer sofort zum Inhalt) am Anfang des Body bräuchtest du noch die folgenden beiden Klassen.
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
white-space: inherit;
}
Damit kommt jeder auf alle Deine Seiten und kann dann an sinnvoller Stelle weiter navigieren. Das erfüllt alle Anforderungen an gute Zugänglichkeit (abgesehen davon dass die Navigation eh schon für fast alle erreichbar ist, denn die Links werden nie komplett entfernt; die zweite Ebene wird nur hinter die erste geschoben und so vor Sehenden verborgen. Blinde kommen jederzeit an alle Links, Sehende mit Maus und Nutzer moderner Browser mit Unterstützung von focus-within können sich die wieder zurück holen. Das von mir angesprochene Problem mit dem time-out werde ich noch versuchen zu lösen, aria-Attribute dürften so komplett überflüssig sein).
Im wesentlichen habe ich den Code aus dem oben verlinkten GitHub-repository übernommen und empfehle dir, statt paste und copy den Code aus dem Repository zu nehmen. Dann wird es leichter, die Updates zu übernehmen, die sicher kommen werden.
Marc
marctrix
Felix Riesterer
Camping_RIDER
Gunnar Bittersmann
Auge
Matthias Apsel
