Hauptmenü

Zum Inhalt springen
Hauptseite
    • Projekte
    • Arbeitspakete
    • Neuigkeiten
    • Erste Schritte
    • Einführungsvideo
      Willkommen zu Ökopol Project
      Erhalten Sie einen schnellen Überblick über die Projektverwaltung und die Zusammenarbeit mit OpenProject. Sie können dieses Video über das Hilfe-Menü neu starten.
    • Hilfe und Support
    • Auf Enterprise Edition upgraden
    • Benutzerhandbuch
    • Videos
    • Tastenkürzel
    • Community Forum
    • Professionelle Unterstützung
    • Weitere Ressourcen
    • Datenschutz- und Sicherheitsrichtlinien
    • Erklärung zur digitalen Barrierefreiheit
    • OpenProject Webseite
    • Sicherheitswarnungen / Newsletter
    • OpenProject Blog
    • Release Notes
    • Fehler melden
    • Entwicklungs-Roadmap
    • Hinzufügen und Bearbeiten von Übersetzungen
    • API-Dokumentation
  • Anmelden
      Neues Konto erstellen
      Kennwort vergessen?

Nebenmenü

  • Übersicht
  • Roadmap
  • Arbeitspakete
  • Neuigkeiten
  • ChemSelect Wiki
    • Inhaltsverzeichnis
      • Erweitert. Klicken Sie zum AusblendenAusgeblendet. Klicken Sie zum AnzeigenChemSelect Wiki
        • Hierarchie-BlattApp-Template
        • Hierarchie-BlattBarrierefreiheit
        • Hierarchie-BlattBereitstellung
        • Hierarchie-BlattBewertungen
        • Hierarchie-BlattDatenbank Zugriff
        • Hierarchie-BlattDebian
        • Hierarchie-BlattDocker
        • Hierarchie-BlattGit
        • Hierarchie-BlattJenkins
        • Hierarchie-BlattKonfiguration
        • Hierarchie-BlattMulti-Language
        • Hierarchie-BlattNextcloud
        • Hierarchie-BlattProblemstofflisten
        • Hierarchie-BlattVorkommnisse
Du bist hier:
  • ChemSelect Wiki
  • Barrierefreiheit

Inhalt

Barrierefreiheit

  • Mehr
    • Inhaltsverzeichnis

Checklist

  • Kontraste
  • Bedienung durchgängig mit der Tab-Taste möglich.
  • Bewegung durch Tabellen. Einrichten eines für Sehende unsichtbaren Headers.
  • Darstellungsgröße (Skalierbarkeit über Browser-Tastenkombination genügt -> JA)
  • Farbfelder ersetzen mit Text, der vorgelesen wird. Rückmeldung: Zahlen in den Farbfeldern sind grundsätzlich gut wegen Sehschwächen/Farbenblindheit.
  • Überschriften, Reihenfolge einhalten. Ggf. mit Bootstrap-Klassen damit h1 nicht wirklich groß wie h1 angezeigt wird.
  • Landmarks/Regionen: einerseits die Menüs (role="navigation" in Mixture-Sidebar bereits eingerichtet), andererseits die <section> auf den Seiten (erreichbar mit Screenreader NVDA mit Taste D)
  • Hilfe-Button: auf Klick erscheint Text -> diesen vorlesen
  • Live-Regionen: Damit Meldungen wie "erfolgreich gespeichert" auch vorgelesen werden, role="status" oder mit aria-Funktionen. Achtung, die Wiederholung von gleichen Inhalten bei role=status führt nicht zu einer Änderung in der Live-Region und wird daher ignoriert.
  • Reaktion auf Speichern: <div role="status"  class="visually-hidden" style="font-size:x-small">@HiddenMessage</div> außerhalb von @if(Success){}. HiddenMessage ändert den Inhalt bei jedem Aufruf leicht, damit immer wieder vorgelesen wird.
  • Blazors "ValidationSummary" funktioniert von Hause aus nicht. Wenn aria-live="assertive" eingefügt wird, dann wird vorgelesen, dass ein Fehler aufgetreten ist, aber nicht der eigentliche Inhalt der Fehlermeldung!
  • Im html-Tag muss das lang-Attribut auf die aktuelle Sprache eingestellt sein. OK! Erreicht mit <html lang="@CultureInfo.CurrentCulture">

Materna-Rückmeldungen + Regeln

  • Aria-Label-Attribut ist notwendig (z.B. in Button-Weiter (Pfeile nach links oder rechts)). Das title-Attribut kann aber drinbleiben, aria-label überschreibt das title-Attribut.
  • Unser info-Button braucht das Aria-expanded attibut. Ausgeklappt auf true, eingeklappt auf false. Umgesetzt in CustomInputComponenent, aber dort auch noch überprüfen.

Browser-Erweiterung: "Accessibility Insights for Web"

Damit lassen sich Webseiten auf Barrierefreiheit untersuchen und es werden auch Hinweise zur Problemlösung gegeben.
Hilfreich ist das Step-by-Step Lernprogramm von Microsoft:
Einführung - Training | Microsoft Learn

Inhalte unsichtbar, aber verfügbar für Screenreader

Benutze die Bootstrap-Klasse "visually-hidden". Achtung, gegebenenfalls auch die Klasse "visually-hidden-focusable" beachten.

Links:
Portal Barrierefreiheit - Umsetzungshilfen für Webentwicklung (bund.de)

Farbfelder: Verwendung der Eigenschaft "aria-label"

Farbfelder (divs) ggf. mit aria-label dekorieren. Dann wird die Bedeutung der Farbe grün" als "gut" vom Screenreader vorgelesen.
Welchen Text möchten wir jeweils anstelle der Farben anzeigen für Screenreader?
Bei Buttons ist es angeblich eigentlich besser, aria-label zu verwenden auch wenn es das Attribut "title" gibt, weil manche Benutzer von Screenreadern "title" ausschalten.
Ggf. überlegen, was am besten beim Hilfe-Button der "CustomInputComponent.razor" zu tun ist!!!! Wenn beides vorhanden ist, kann auch beides vorgelesen werden!

Tabellen eventuell grundsätzlich mit Überschriften versehen

Attribut "scope" für Header einer Spalte (<th scope="col">Monate</th>). Tabellenheader für Sehende ausblenden.
Tabellen | Landesfachstelle für Barrierefreiheit in Sachsen-Anhalt (lf-barrierefreiheit-st.de)

Interessante Links

(713) Accessify your Blazor apps - Hot accessibility techniques for Blazor apps - YouTube

Lade...