27 lines
1.1 KiB
HTML
27 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<link rel="icon" type="image/svg+xml" href="../../../assets/favicon.svg">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Barrierefreies Portal | A11y & ARIA</title>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 🎯 TEILZIEL 1: Erstelle einen Skip-Link <a href="#main-content"> direkt zu Beginn des Bodys und ein <main id="main-content"> als Sprungziel -->
|
|
|
|
|
|
<!-- 🎯 TEILZIEL 2: Erstelle einen Schließen-Button <button type="button" aria-label="Dialog schließen"> mit einem dekorativen Icon-Element <span aria-hidden="true">×</span> -->
|
|
|
|
|
|
<!-- 🎯 TEILZIEL 3: Erstelle ein aufklappbares FAQ-Element mit einem Button (aria-expanded="false" und aria-controls="faq-details") sowie dem Inhaltsblock <div id="faq-details" hidden> -->
|
|
|
|
|
|
<!-- 🎯 TEILZIEL 4: Erstelle ein Eingabefeld (id="pass", type="password", aria-describedby="pass-help") und den Hilfetext-Container <p id="pass-help"> -->
|
|
|
|
|
|
<!-- 🎯 TEILZIEL 5: Erstelle einen Status-Banner mit role="status" und aria-live="polite" für dynamische Benachrichtigungen -->
|
|
|
|
|
|
</body>
|
|
</html>
|