From 40ccd7d3ea786f3b87ccf4d10c6fcb56a221c230 Mon Sep 17 00:00:00 2001
From: otibulai15 <otiliabulai@poeppelmann.com>
Date: Mon, 16 Mar 2026 11:03:32 +0100
Subject: [PATCH] =?UTF-8?q?Barrierefreiheit=20bei=20Formular=20hinzugef?=
 =?UTF-8?q?=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/formular/formular.css  | 11 +++++++++++
 src/formular/formular.html | 34 +++++++++++++++++++++++++---------
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/formular/formular.css b/src/formular/formular.css
index 402bf39..ef72ccb 100644
--- a/src/formular/formular.css
+++ b/src/formular/formular.css
@@ -54,6 +54,17 @@ input::placeholder {
     font-style: italic;
 }
 
+label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #333;
+    text-align: left;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 350px;
+}
+
 /* Submit button */
 button {
     width: 100%;
diff --git a/src/formular/formular.html b/src/formular/formular.html
index a0dc016..a4a5979 100644
--- a/src/formular/formular.html
+++ b/src/formular/formular.html
@@ -13,24 +13,40 @@
     <h1>BMI Formular</h1>
 
     <form id="bmiForm">
-        <input type="number" id="age" name="Age" placeholder="Age (Years)" required min="1" max="120" />
-        <input type="date" id="date" name="date" placeholder="Birthday" required />
-        <input type="number" id="weight" name="weight" placeholder="Weight in Kg" required min="1" max="500" />
-        <input type="number" id="height" name="height" placeholder="Height in cm" required min="50" max="250" />
 
-        <button type="button" onclick="calculateBMI()">BMI berechnen</button>
-        <button type="button" onclick="clearData()" style="margin-top: 10px; background-color: #f44336;">
+        <label for="age">Alter (Jahre):</label>
+        <input type="number" id="age" name="Age" placeholder="z.B. 25" required min="1" max="120"
+            aria-describedby="ageHelp" />
+        <small id="ageHelp" style="display:block; color:#666; margin-bottom:10px;">
+            Bitte geben Sie Ihr Alter zwischen 1 und 120 ein.
+        </small>
+
+        <label for="date">Geburtsdatum:</label>
+        <input type="date" id="date" name="date" required />
+
+        <label for="weight">Gewicht (kg):</label>
+        <input type="number" id="weight" name="weight" placeholder="z.B. 75" required min="1" max="500" />
+
+        <label for="height">Größe (cm):</label>
+        <input type="number" id="height" name="height" placeholder="z.B. 175" required min="50" max="250" />
+
+        <button type="button" onclick="calculateBMI()" aria-label="BMI berechnen">
+            BMI berechnen
+        </button>
+
+        <button type="button" onclick="clearData()" style="margin-top: 10px; background-color: #f44336;"
+            aria-label="Alle Eingaben löschen">
             Clear/Reset
         </button>
     </form>
 
-    <div id="result" style="display: none;">
+    <div id="error" role="alert" aria-live="polite"></div>
+
+    <div id="result" style="display: none;" role="region" aria-label="BMI Ergebnis">
         <h2>Ihr BMI Ergebnis</h2>
         <p id="bmiValue"></p>
         <p id="bmiCategory"></p>
     </div>
-
-    <div id="error"></div>
 </body>
 
 </html>
\ No newline at end of file