Lösungen
Aufgaben
1. Semantisches HTML verwenden
Aufgabe: Erstelle eine HTML-Seite mit folgenden Anforderungen:
- Verwende semantische HTML-Tags wie
<header>,<nav>,<main>,<article>und<footer>. - Füge mindestens eine Überschrift und einen Absatz in jedem Bereich hinzu.
HTML-Gerüst:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantisches HTML</title>
</head>
<body>
<header>
<!-- Inhalt hier einfügen -->
</header>
<nav>
<!-- Navigation hier einfügen -->
</nav>
<main>
<article>
<!-- Artikelinhalt hier einfügen -->
</article>
</main>
<footer>
<!-- Fußzeile hier einfügen -->
</footer>
</body>
</html>
2. Barrierefreie Bilder einfügen
Aufgabe: Erstelle eine HTML-Seite, die ein Bild mit einer aussagekräftigen alternativen Beschreibung (alt-Attribut) enthält.
HTML-Gerüst:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barrierefreie Bilder</title>
</head>
<body>
<img src="bild.jpg" alt="Beschreibung des Bildes">
</body>
</html>
3. Verwendung von ARIA-Rollen
Aufgabe: Erstelle eine HTML-Seite mit einer Navigationsleiste, die ARIA-Rollen und -Attribute verwendet, um die Zugänglichkeit zu verbessern.
HTML-Gerüst:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARIA-Rollen</title>
</head>
<body>
<nav role="navigation" aria-label="Hauptnavigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">Über uns</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
</body>
</html>
4. Verbesserung der Lesbarkeit
Aufgabe: Erstelle eine CSS-Datei, die sicherstellt, dass der Text auf einer HTML-Seite einen ausreichenden Kontrast zum Hintergrund hat. Verlinke die CSS-Datei in einer HTML-Seite.
body {
color: #000000; /* Schwarzer Text */
background-color: #FFFFFF; /* Weißer Hintergrund */
}
HTML-Datei:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lesbarkeit verbessern</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Dieser Text hat einen hohen Kontrast zum Hintergrund.</p>
</body>
</html>
5. Fokus-Indikatoren für Tastaturnavigation
Aufgabe: Füge CSS hinzu, um sicherzustellen, dass alle interaktiven Elemente (wie Links und Schaltflächen) einen sichtbaren Fokus-Indikator haben, wenn sie mit der Tastatur navigiert werden.
CSS-Ergänzung (styles.css):
a:focus, button:focus {
outline: 2px solid #0000FF; /* Blaue Umrandung bei Fokus */
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fokus-Indikatoren</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#home">Home</a>
<button>Click Me</button>
</body>
</html>