Ratgeber Option zur Kontrasterhöhung und Schriftvergrößerung anbieten

Barrierefreiheit ist ein wichtiger Aspekt moderner Websites. Der Hinweis zeigt, dass deine Website aktuell keine Optionen zur Kontrasterhöhung oder Schriftvergrößerung bietet. Solche Funktionen ermöglichen es Menschen mit Sehbeeinträchtigungen, deine Inhalte besser wahrzunehmen und zu nutzen.

• Bessere Zugänglichkeit: Menschen mit eingeschränktem Sehvermögen können Inhalte leichter lesen und verstehen.
• Rechtliche Anforderungen: In vielen Ländern müssen Websites barrierefrei sein, insbesondere im öffentlichen Sektor.
• Inklusives Design: Du sorgst dafür, dass deine Website für ein breiteres Publikum zugänglich ist.
• Verbesserte Benutzerfreundlichkeit: Auch Nutzer ohne Sehbeeinträchtigungen profitieren von flexiblen Anzeigeoptionen.

1. Identifiziere die wichtigsten Anpassungen:
   • Kontrasterhöhung: Biete eine Funktion an, um den Kontrast zwischen Text und Hintergrund zu verstärken.
   • Schriftvergrößerung: Ermögliche Nutzern, die Schriftgröße individuell zu vergrößern.
2. Erstelle ein Barrierefreiheits-Widget:
   • Nutze JavaScript und CSS, um ein einfaches Widget zu erstellen, das die Optionen zur Verfügung stellt.
   • Beispiel für ein Widget:

     <div id="accessibility-options">   
         <button onclick="increaseFontSize()">Schriftgröße erhöhen</button>  
         <button onclick="toggleHighContrast()">Kontrastmodus</button>  
     </div>

3. Füge Funktionen zur Schriftvergrößerung hinzu:
   • Beispiel für JavaScript-Code:

     function increaseFontSize() {   
         document.body.style.fontSize = "larger";   
     }

4. Füge Funktionen zur Kontrasterhöhung hinzu:
   • Beispiel für JavaScript und CSS:

     function toggleHighContrast() {   
         document.body.classList.toggle("high-contrast");   
     }

     .high-contrast {   
         background-color: black;   
         color: white;   
     }

5. Teste die Funktionen:
   • Lade deine Website und überprüfe, ob die Optionen zur Schriftvergrößerung und Kontrasterhöhung korrekt funktionieren.
   • Stelle sicher, dass die Änderungen auf allen Seiten der Website angewendet werden.
6. Berücksichtige bestehende Barrierefreiheitsstandards:
   • Orientiere dich an den Web Content Accessibility Guidelines (WCAG), um sicherzustellen, dass deine Website die grundlegenden Anforderungen erfüllt.

Beispiele & Best Practices

• Kein sichtbarer Button für Kontrasteinstellungen oder Schriftgrößenanpassungen.
• Text ist schwer lesbar aufgrund von niedrigem Kontrast.

• Ein Widget ermöglicht es Nutzern, den Kontrast zu erhöhen und die Schriftgröße anzupassen.
• Beispiel-UI:

  <div id="accessibility-options">   
      <button onclick="increaseFontSize()">Schriftgröße erhöhen</button>   
      <button onclick="toggleHighContrast()">Kontrastmodus</button>   
  </div>

• Schlechte Platzierung der Optionen: Stelle sicher, dass die Optionen leicht zugänglich sind, z. B. oben rechts auf der Seite.
• Eingeschränkte Funktionalität: Teste, ob die Anpassungen auf allen Geräten und Browsern funktionieren.
• Unzureichender Kontrast: Verwende Kontrastprüfer, um sicherzustellen, dass der Kontrast den WCAG-Richtlinien entspricht.

• Der empfohlene Mindestkontrast zwischen Text und Hintergrund ist 4,5:1 (WCAG Level AA).
• Schriftgrößenanpassungen sollten mindestens eine 200%-Skalierung ermöglichen.
• Nutze semantisches HTML und ARIA-Attribute, um sicherzustellen, dass die Funktionen von Screenreadern erkannt werden.

• WCAG Richtlinien
• Contrast Checker
• Barrierefreiheitstools für Entwickler