forked from WEB-IMB-WS2526/lab-development-imb
69 lines
2.1 KiB
HTML
69 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link href="05_styles_voiceover.css" rel="stylesheet">
|
|
<title>Screen Reader Demo</title>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<h1>Willkommen zur Screen Reader-Demo</h1>
|
|
<p>Diese Seite zeigt, wie barrierefreies Webdesign mit Screenreader funktioniert.</p>
|
|
</header>
|
|
|
|
<nav>
|
|
<a href="#demo">Demo starten</a>
|
|
<a href="#tipps">Tipps zur Bedienung</a>
|
|
<a href="#bilddemo">Beispiel am Bild</a>
|
|
<a href="#kontakt">Kontakt</a>
|
|
</nav>
|
|
|
|
<main>
|
|
<section id="demo" aria-labelledby="demo-heading">
|
|
<h2 id="demo-heading">Demo starten</h2>
|
|
<p>Drücken Sie den folgenden Button, um eine Beispielaktion auszuführen:</p>
|
|
<button onclick="alert('VoiceOver erkennt diesen Button und liest ihn korrekt vor.')">
|
|
Aktion ausführen
|
|
</button>
|
|
</section>
|
|
|
|
<section id="tipps" aria-labelledby="tipps-heading">
|
|
<h2 id="tipps-heading">Tipps zur Bedienung</h2>
|
|
<ul>
|
|
<li>VoiceOver aktivieren: Einstellungen → Bedienungshilfen → VoiceOver</li>
|
|
<li>Navigation mit Wischgesten oder Tastatur</li>
|
|
<li>Elemente werden vorgelesen, wenn sie fokussiert sind</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section id="bilddemo" aria-labelledby="bilddemo-heading">
|
|
<h2 id="bilddemo-heading">Beispielbild mit barrierefreiem Alternativtext</h2>
|
|
<figure>
|
|
<img src="katze.jpg"
|
|
alt="Eine schlafende schwarze Katze auf einem gemütlichen Bett. Dieses Bild soll positive Gefühle während einer anstrengenden Lehrveranstaltung auslösen."
|
|
width="600" />
|
|
<figcaption aria-hidden="true">
|
|
Schlafende Katze auf einem gemütlichen Bett.
|
|
</figcaption>
|
|
</figure>
|
|
</section>
|
|
|
|
|
|
<section id="kontakt" aria-labelledby="kontakt-heading">
|
|
<h2 id="kontakt-heading">Kontakt</h2>
|
|
<p>Bei Fragen zur Barrierefreiheit erreichen Sie mich unter:</p>
|
|
<address>
|
|
<a href="mailto:t.steger@hs-mannheim.de">t.steger@hs-mannheim.de</a>
|
|
</address>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>© 2025 Prof. T. Steger</p>
|
|
</footer>
|
|
</body>
|
|
|
|
</html> |