Reiter

   

ILIAS Support der Helmut-Schmidt-Universität

Barrieren frühzeitig erkennen

Adobestock / Rawpixel.com

Lesezeit: 12 Minuten

Mit WAVE untersuchen

Untersuchung mit WAVE

WAVE blendet in eine Webseite Symbole ein, die Ihnen Informationen zur Barrierefreiheit an den entsprechenden Stellen der Seite liefern.

Eine Zusammenfassung am Seitenrand listet Ihnen dann Details zu den Informationen und eventuellen Fehlern auf.

Webseite in zwei Versionen, einmal ohne und einmal mit WAVE-Tool.

Webseiten automatisiert testen 

  • WAVE ist eine kostenlose Browser-Erweiterung, mit der Sie eine Seite automatisiert auf bestimmte Barrieren prüfen können.
  • Die Analyse umfasst nicht alle BITV-Prüfschritte, sondern nur die automatisch ausführbaren. Aber das ist oftmals schon eine große Hilfe.

WAVE meldet beispielsweise die folgenden Hinweise:

  • Errors: Verstöße gegen die WCAG bzw. gegen BITV-Prüfschritte.
  • Contrast Errors: Kontrastfehler werden separat markiert.
  • Alerts: Warnungen, die auf schwere Benutzungsprobleme im Sinne der BITV/WCAG hinweisen, aber die Funktionalität nicht beeinträchtigen (zum Beispiel zu kleine Schrift).
  • Features, Structural Elements, ARIA: Hinweise auf vorhandene Barrierefreiheitsfunktionen, die manuell überprüft werden müssten (zum Beispiel vorhandene Alternativtexte für Bilder, deren Sinn das Tool nicht selbst prüfen kann).

Link zur WAVE Erweiterung

Link zur WAVE Webseite

Seite nur mittels Tastatur bedienen

Anforderung 

Der BITV-Test fordert in Prüfschritt 9.2.1.1, dass die Lernplattform und der Inhalt auch ohne Maus benutzbar ist.

BITV-Prüfschritt 9.2.4.7 fordert, dass der Fokus klar hervorgehoben ist. 

In dieser Toolbox finden Sie folgend weitere allgemeine Informationen zum Thema "Assistive Technologie". 

Woran erkennen Sie Fehler? 

  • Der Fokus muss zu jeder Zeit gut und deutlich hervorgehoben sein. Dies fordert der BITV-Prüfschritt 9.2.4.7.  
  • Alle mit der Maus anklickbaren Elemente kann man auch über die Tastatur auslösen.
  • Alle interaktiven Elemente sind auch bedienbar.
  • Die Reihenfolge, in der interaktive Elemente angesprungen werden, ist sinnvoll aufgebaut.

Anleitung zum Testen mit der Tastatur

Mit der folgenden Anleitung können Sie Ihre Inhalte und Ihre Plattform auf Einhaltung dieser Anforderung prüfen. 

Vom Browser zum Hauptmenü 

  1. Öffnen Sie die zu untersuchende Seite.
  2. Legen Sie den Fokus (Cursor) in die Adresszeile des Browser-Tabs Ihrer ILIAS Installation.
  3. Legen Sie die Maus beiseite. 
  4. Drücken Sie die Tabulator-Taste ↹ und tabben Sie durch die Anwendung. 
  5. Der Fokus bewegt sich in einer sinnvollen und erwartbaren Reihenfolgen von interaktivem Element zu interaktivem Element. 
  6. Tabben Sie bis Sie das Haupmenü erreichen.

Vom Hauptmenü in den Content

  1.  Ihr Fokus liegt auf einem Eintrag im Haupmenü.
  2. Klicken Sie die Enter-Taste ⏎.
  3. ILIAS öffnet ein Kontextmenü und setzt den Fokus auf den ersten Eintrag im Kontextmenü. 
  4. Klicken Sie die Enter-Taste ⏎.
  5. ILIAS öffnet den gewünschten Bereich im Hauptfenster.
  6. Der Fokus liegt auf der Überschrift des Bereichs. 

Fragen beantworten 

  1. Öffnen Sie die Frage im Lerninhalt, in der Umfrage oder im Test. 
  2. Legen Sie den Fokus (Cursor) auf die Überschrift des Objekts. 
  3. Drücken Sie die Tabulator-Taste ↹ oder die Pfeiltasten →  oder ← wandern Sie durch die Seite bis zur richtigen Antwortoption. 
  4. Klicken Sie die Leertaste zur Auswahl der Antwortoption. 
  5. Tabben Sie zur nächsten Frage. 

Achtung: Drag & Drop läßt sich so nicht bedienen. Es gibt dafür in ILIAS noch kein barrierefreies Bedienkonzept. 

Liste der Funktionen der Tasten

  • Tabulator-Taste ↹ bewegt den Fokus "ein interaktives Element weiter".
  • Hochstelltaste ⇧ +Tabulatortaste ↹ bringen den Fokus ein interaktives Element zurück. 
  • In Formularen springen Tabulator-Taste ↹ von Auswahl zu Auswahl bzw. aktiviertem Element zu aktiviertem Element. Um nicht-aktivierte Optionen zu erreichen, nutzen Sie die Pfeiltasten. 
  • Enter-Taste ⏎ löst ein interaktives Element aus: drückt den Button, wählt einen Eintrag im Dropdown. 
  • Rechte Pfeiltasten → klappen Bäumen auf.
  • Linke Pfeiltasten ← klappen Bäume ein. 
  • Pfeile hoch ↑ und runter ↓ laufen in Bäumen auf und ab oder alle Optionen in Formularen. 
  • Die Leertaste hat bei bestimmten Objekten eine Auslösefunktion, ähnlich der Enter-Taste: Sie aktiviert oder deaktiviert beispielsweise Checkboxen.

HTML-Validerungsseite nutzen

Anforderung "valides HTML" 

Assistive Technologien brauchen standardisierte Schnittstellen dem Anwendungsprogrammen, dessen Bedienung sie unterstützen sollen. Deshalb ist es so wichtig, dass Lernplattformen valides HTML verwenden. 

Der BITV-Test fordert in Prüfschritt 9.4.1.1 die Verwendung einer korrekten Syntax. Die verwendete Markup-Sprache HTML muss korrekt eingesetzt werden.

Mit der folgenden Anleitung können Sie Ihre Inhalte und Ihre Plattform auf Einhaltung dieser Anforderung prüfen. 

Validierungsfehler melden mit mantis 

Hier in der Toolbox finden Sie eine allgemeinere Anleitung zur Untersuchung von Fehlern.

  1. Erfassen Sie Validierungsfehler im Issue Tracker Mantis. Legen Sie sich ggfs. einen Benutzerzugang an. 
  2. Klicken Sie auf "Eintrag erfassen".  Wählen Sie die Kategorie "Accessibility". 
  3. Geben Sie an, dass Prüfschritt 9.4.1.1 nicht bestanden wurde. Tragen Sie den den Link zum Objekt ein. Kopieren Sie den Text der Fehlermeldung in den Bug. Screenshots der Fehlermeldung sind keine Hilfe, sondern ein Ärgernis. 
  4. Sollten Sie sich bei der Formulierung, Art des Fehlers oder dem weiteren Vorgehen unsicher sein, können Sie Ihre Testergebnisse, gerne mit der SIG Barrierefreiheit teilen und ein gemeinsames Vorgehen entwickeln.

Anleitung zur HTML-Validierung

  1. Öffnen Sie die zu untersuchende Seite.
  2. Klicken Sie auf die rechte Maustaste.
  3. Es wird ein kleines Menü eingeblendet.
  4. Wählen Sie den Eintrag "Seitenquelltext anzeigen".
  5. Es wird ein neuer Reiter geöffnet: Er enthält das HTML der Seite.
  6. Kopieren Sie mit Strg+A und Strg+C das gesamte HTML der Seite . 
  7. Rufen Sie den Validator auf unter https://validator.w3.org/
  8. Ihnen werden mehrere Reiter im Validator angezeigt.
  9. Wählen Sie den letzten Reiter "Validate by Direct Input" aus.
  10. Ihnen wird ein größeres Eingabefeld angezeigt. 
  11. Fügen Sie mit Strg+ V den kopierten Quelltext in das Eingabefeld ein.
  12. Klicken Sie den "Check"-Button, um die Prüfung zu beginnen.
  13. Unter dem "Message Filtering" Button werden typischerweise viele Meldungen angezeigt.
  14. Klicken Sie den Button "Message Filtering". 
  15. Deaktivieren Sie die Checkboxen zu "Warnings" und "Info-Messages". 
  16. Die Liste enthält nun nur noch echte Verletzungen des HTML Standards, die tatsächlich korrigiert werden müssen. 
  17. Sie können die Meldungen kopieren und in den Mantis-Berichten nutzen. 

Video zur HTML-Validierung

Hinweis, Das  obige Video benötigt keine Audodeskripton, weil alle wichtigen sichtbaren Handlungen beim Erstellen verbalisiert wurden. Dieses Vorgehen spart Aufwand. 

Screenreader zum Testen nutzen

Einfache Screenreader nur zum Testen

Screenreader ermitteln Textinformationen, die auf einem Bildschirm gezeigt werden und geben sie als

  • synthetische Sprachausgabe über den Lautsprecher oder
  • ertastbaren Text auf Braillezeile des Computers aus.

In diesem Abschschnitt geht es nur um die Nutzung des Screenreaders ihres Betriebssystems, um Barrieren in Ihrem Content aufzustöbern.

Betroffene Menschen mit Sehbehinderungen nutzen oft andere Screenreader, die gemütlicher und mächtiger sind. In dieser Toolbox finden Sie auch allgemeine Informationen zum Thema "Screenreader".

Windows Narrator bedienen 

Steuern Sie Ihren eingebauten Windows Narrator über folgende Tastenkombinationen:

  • Starten: Windows-Taste ⊞  + Strg + Enter ⏎
  • Beenden: Nochmal Windows-Taste ⊞  + Strg + Enter ⏎

Haben Sie den Narrator gestartet, helfen Ihnen unter anderem folgende Tastenkombinationen: 

  • Vorwärts durch interaktive Elemente springen: Tabulator-Taste ↹ 
  • Rückwärts durch interaktive Elemente springen: Hochstelltaste ⇧ +Tabulatortaste ↹ 
  • Aktion durchführen: z. B. Link aktivieren, Schalter klicken per Enter-Taste ⏎, teils auch Leertaste 
  • Scan-Modus ein- und ausschalten:  CapsLock ⇩ + Leertaste
  • Im eingeschalteten Scanmodus nächste Überschrift: h

Sie haben schon einen eingebauten Screenreader!

Alle heute üblichen Betriebssysteme haben einen Screeenreader integriert, beispielsweise

  • VoiceOver (Apple-Produkte),
  • Narrator (Windows),
  • ORCA (Linux) oder
  • Talkback (Android).

Mit einem Screenreader und seinen Steuerungsfunktionen können Sie visuelle Informationen auf Barrierefreiheit prüfen.

Woran erkennen Sie Fehler? 

  • Die Aussprache des Screenreaders wechselt nicht mit der Sprache des Texts. 
  • Die sichtbare Reihenfolge des Textes auf dem Bildschirm wird nicht eingehalten. 
  • Teile des sichtbaren Textes werden nicht vorgelesen.
  • Der Zustand von umschaltbaren Elementen wird nicht vorgelesen: Checkboxen, Radiobuttons, Akkordeons. 
  • Trotz aktiviertem Scanmodus lassen sich Überschriften lassen nicht mit der Tastatur anspringen.

Ein Vorgehen zum Umgang mit gefundenen Fehlern finden Sie in dieser Toolbox. 

Zur Übersicht

Weiter

Zuletzt geändert: 1. Jul 2025, 02:02, Solzbacher, Bettina [BettinaSolzbacher]