Header neu gestalten

[marctrix]

Hej AudioBibel,

Schöne Idee mit den Navigationspfeilen an den Rändern der Auswahlseiten http://audiobibel.borchmann.one/html/1__mose.htm, wie jetzt zum Beispiel hier …

http://audiobibel.borchmann.one/html/1__mose.htm

Wie bereits erwähnt wurde, sind Hörbücher besonders interessant für Menschen, die nicht sehen können.

Dafür solltest du Dein HTML noch etwas ergänzen und die solltest du die Pfeile anders codieren. Bei Dir steht:

<h1>
<a href=#">⇦</a>
<a href=#">Das Alte Testament</a>
<a href=#">⇨</a>
</h1>

Wieso ist das eine Überschrift? Da kommt doch kein Text im Anschluss, der überschrieben wird. Und dann noch eine h1 - ist denn nicht vielmehr "Das zweite Buch Mose - Exodus" Der Name der aktuellen Seite? Dann sollte das in eine h1.

Was soll das Vorlese-Programm hier ausgeben? Der Pfeil ist ein Zeichen, ich weiß nicht einmal, ob da etwas wie Pfeil links oder rechts gelesen wird - aber selbst wenn. Was soll das dann heißen?

Außerdem hast du da eine Liste von drei Links. Diese bitte auch als Liste auszeichnen.

Die Liste der Kapitel ist aufsteigend sortiert, also hier eine sortierte Liste ol verwenden.

"Das zweite Buch Mose mit allen Unterkapiteln ist für mich ein in sich geschlossener Text, der für sich allein genommen Sinn macht. HTML sieht dafür das article-Element vor.

Die HTML-Elemente haben alle einen Zweck und eine Bedeutung. 😉

Empfehlung

Alle Informationen sichtbar und hörbar, alle Elemente entsprechend ihrer Bedeutung ausgezeichnet

<article>
<header>
<h1>Das zweite Buch Mose - Exodus</h1>
<ul>
	<li>
		<a href=#">zurück zum dritten Buch Mose</a></li>
	<li>
		<a href=#">
			zurück zur Übersicht über "Das alte Testament"
		</a>
	</li>
	<li aria-current="page">
		<a href=#kapitelauswahl">
			Sie befinden sich hier: zweites Buch Mose (zur Kapitelauswahl)
		</a>
	</li>
	<li>
		<a href=#">
			weiter zum dritten Buch Mose
		</a>
	</li>
</ul>
<p>
	(Exodus = Auszug)<br>
	Zum Anhören / Herunterladen bitte Kapitel unten anklicken
</p>
</header>
<h2 id="kapitelauswahl">
	Kapitelauswahl "Zweites Buch Mose - Exodus"
</h2>
<ol>
	<li>
		<a href=#">
			<!-- Kann man sehen, aber nicht hören -->
			<span aria-hidden="true">1</span>
			<!-- Kann man hören, aber leider nicht sehen
			     Schöner wäre, Sehende bekämen diese Infos auch
			     mindestens auf dem Smartphone, aber dann müsste man 
			     das Layout (leicht) ändern: Große Zahl, kleiner
			     Text darunter, fände ich schöner!!! -->
			<span class="visuallyhidden">1. Kapitel, Format mp3, Größe 24 MByte, Dauer 12 Minuten</span>
</article>

Klassen zum Verbergen von Informationen und anzeigen, wenn diese Fokus bekommen, so dass Tastaturnutzer sehen, wo sie sich gerade befinden:

.visuallyhidden {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
}

Marc