Accessibility fixes.

This commit is contained in:
chriz committed 2026-10-20 11:11:04 +02:00
1 parent 02c92db1e5
commit 014422e0b6
12 files changed
+262 -176

No files matched your search

+15 -15
View File
@@ -5,11 +5,11 @@ $form = $session->get('form');
<div class="form-card">
<?php if($session->has('alert')): ?>
<div class="alert <?=$session->get('alert-class')?>">
<div class="alert <?=$session->get('alert-class')?>" role="alert" aria-live="polite">
<?php if($session->get('alert-class') === 'alert-success'): ?>
<svg style="width: 22px; height: 22px; fill: currentColor; flex-shrink: 0;" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
<svg aria-hidden="true" focusable="false" style="width: 22px; height: 22px; fill: currentColor; flex-shrink: 0;" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
<?php else: ?>
<svg style="width: 22px; height: 22px; fill: currentColor; flex-shrink: 0;" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
<svg aria-hidden="true" focusable="false" style="width: 22px; height: 22px; fill: currentColor; flex-shrink: 0;" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
<?php endif; ?>
<div><?=$session->get('alert')?></div>
</div>
@@ -18,9 +18,9 @@ $form = $session->get('form');
<h1>Ihre Kontaktanfrage</h1>
<p style="color: var(--text-muted); margin-bottom: 2rem;">
<p id="form-instructions" style="color: var(--text-muted); margin-bottom: 2rem;">
Hier können Sie, unter Angabe Ihrer Kontaktdaten, eine persönliche Anfrage stellen.
Die mit einem (<span style="color: var(--danger); font-weight: bold;">*</span>) gekennzeichneten Felder sind Pflichtfelder.
Die mit einem (<span aria-hidden="true" style="color: var(--danger); font-weight: bold;">*</span>) gekennzeichneten Felder sind Pflichtfelder.
Bitte geben Sie entweder eine E-Mail-Adresse oder Ihre Telefonnummer an, damit wir Sie erreichen können.
</p>
@@ -37,39 +37,39 @@ $form = $session->get('form');
<div class="form-row">
<div class="form-group">
<label class="form-label" for="surname">Vorname</label>
<input type="text" class="form-control" name="surname" id="surname" placeholder="Ihr Vorname" value="<?=isset($form) ? htmlspecialchars($form['surname']) : ''?>">
<input type="text" class="form-control" name="surname" id="surname" autocomplete="given-name" placeholder="Ihr Vorname" value="<?=isset($form) ? htmlspecialchars($form['surname']) : ''?>">
</div>
<div class="form-group">
<label class="form-label" for="name">Nachname <span class="required">*</span></label>
<input type="text" class="form-control" name="name" id="name" required placeholder="Ihr Nachname" value="<?=isset($form) ? htmlspecialchars($form['name']) : ''?>">
<label class="form-label" for="name">Nachname <span class="required" aria-hidden="true">*</span></label>
<input type="text" class="form-control" name="name" id="name" autocomplete="family-name" required placeholder="Ihr Nachname" value="<?=isset($form) ? htmlspecialchars($form['name']) : ''?>">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label" for="email">E-Mail-Adresse <span class="required" title="Bitte E-Mail-Adresse oder Telefonnummer angeben">*</span></label>
<input type="email" class="form-control" name="email" id="email" required placeholder="ihre.adresse@example.de" value="<?=isset($form) ? htmlspecialchars($form['email']) : ''?>">
<label class="form-label" for="email">E-Mail-Adresse <span class="required" aria-hidden="true" title="Bitte E-Mail-Adresse oder Telefonnummer angeben">*</span></label>
<input type="email" class="form-control" name="email" id="email" autocomplete="email" aria-describedby="form-instructions" required placeholder="ihre.adresse@example.de" value="<?=isset($form) ? htmlspecialchars($form['email']) : ''?>">
</div>
<div class="form-group">
<label class="form-label" for="phone">Telefonnummer <span class="required" title="Bitte E-Mail-Adresse oder Telefonnummer angeben">*</span></label>
<input type="tel" class="form-control" name="phone" id="phone" required placeholder="030 12345678" value="<?=isset($form) ? htmlspecialchars($form['phone']) : ''?>">
<label class="form-label" for="phone">Telefonnummer <span class="required" aria-hidden="true" title="Bitte E-Mail-Adresse oder Telefonnummer angeben">*</span></label>
<input type="tel" class="form-control" name="phone" id="phone" autocomplete="tel" aria-describedby="form-instructions" required placeholder="030 12345678" value="<?=isset($form) ? htmlspecialchars($form['phone']) : ''?>">
</div>
</div>
<div class="form-group">
<label class="form-label" for="message">Ihre Mitteilung <span class="required">*</span></label>
<label class="form-label" for="message">Ihre Mitteilung <span class="required" aria-hidden="true">*</span></label>
<textarea class="form-control" name="message" id="message" required rows="6" placeholder="Wie können wir Ihnen weiterhelfen?"><?=isset($form) ? htmlspecialchars($form['message']) : ''?></textarea>
</div>
<div class="form-note">
<svg style="width: 16px; height: 16px; fill: currentColor; vertical-align: middle; margin-right: 4px;" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>
<svg aria-hidden="true" focusable="false" style="width: 16px; height: 16px; fill: currentColor; vertical-align: middle; margin-right: 4px;" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>
Ihre persönlichen Angaben werden vertraulich behandelt, ausschließlich zur Bearbeitung Ihrer Anfrage gemäß unserer <a href="/datenschutz.html" style="text-decoration: underline;">Datenschutzerklärung</a> verarbeitet und niemals an Dritte weitergegeben.
</div>
<div class="form-actions">
<button type="button" class="btn btn-outline-primary" onclick="history.back();">Abbrechen</button>
<button type="submit" class="btn btn-primary" name="send">
<svg style="width: 18px; height: 18px; fill: currentColor;" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
<svg aria-hidden="true" focusable="false" style="width: 18px; height: 18px; fill: currentColor;" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
Anfrage absenden
</button>
</div>