# Accessibility Toolkit – Tool für Barrierefreiheit im TeachCenter *Das Accessibility Toolkit ist ein Tool für Barrierefreiheit im TeachCenter und ermöglicht Lehrenden, die Barrierefreiheit ihrer TeachCenter-Kurse analysieren zu lassen und mögliche Probleme zu identifizieren und zu beheben.* *Veröffentlicht: 5. September 2023 · Aktualisiert: 4. September 2025* ## Das Accessibility Toolkit aktivieren und verwenden ## Was ist das Accessibility Toolkit und wo finde ich es? Das Accessibility Toolkit ist ein Werkzeug zur Verbesserung der Barrierefreiheit im TeachCenter. Es unterstützt Lehrende dabei, ihre Kurse auf Barrierefreiheit zu überprüfen und potenzielle Probleme zu erkennen. **Wichtiger Hinweis:** Das Accessibility Toolkit kann nur den TeachCenter-Kurs und Texte in Textfeldern und Quizfragen bewerten, jedoch werden keine Inhalte von Dateien, TUbe-Videos etc. analysiert! Eine Kurzversion des Toolkits finden Sie in der **r****echten Seitenleiste/Blockleiste Ihres Kurses**. Klicken Sie dazu auf den Pfeil rechts, und die Seitenleiste mit den aktivierten Blöcken wird aufgeklappt. ![Im Block in der rechten Seitenleiste steht der Text: Dieser Kurs wurde für die Analyse eingeplant](https://telucation.tugraz.at/_app/immutable/assets/de-01-anleitung37-accessibility-toolkit-analyse-geplan.C0jOyPHz.png) *Analyse geplant: Anzeige im Block* Falls dies in Ihrem Kurs nicht freigeschaltet ist, [kontaktieren Sie bitte den TC-Support](mailto:tc@tugraz.at). Die ausführliche Version des Toolkits mit allen Funktionen ist dann im **Hauptmenü unter Mehr** **–** **Tool****s** **zur Barrierefreiheit** zu finden. ![Mehr - Tools zur Barrierefreiheit im Kursmenü ist ausgewählt](https://telucation.tugraz.at/_app/immutable/assets/de-02-bildschirmfoto-2023-08-29-um-13-06-24.DB6HxQCl.png) *Zugriff über das Kursmenü* ## Analyse aktivieren Wenn Sie die Barrierefreiheitsanalyse Ihres Kurses aktivieren wollen, klicken Sie im Block in der rechten Seitenleiste auf **Zur Analyse einreichen**. ![Block in der rechten Seitenleiste, bevor ein Kurs für die Analyse vorgesehen ist. Am Block gibt es einen Button Zur Analyse einreichen.](https://telucation.tugraz.at/_app/immutable/assets/de-03-anleitung37-accessibility-toolkit-block.CV_CsCuZ.png) *Accessibility Toolkit Block (in der rechten Seitenleiste)* Falls dieser Block in Ihrem Kurs nicht aktiviert ist, [kontaktieren Sie bitte den TC-Support](mailto:tc@tugraz.at). Alternativ können Sie die Analyse auch aktivieren, indem Sie im Hauptmenü auf **Mehr** **–** **Tool****s** **zur Barrierefreiheit** gehen und dort den **Kurs zur Analyse einreichen.** ![Längerer Beschreibungstext, darunter ein Button Zur Analyse einreichen](https://telucation.tugraz.at/_app/immutable/assets/de-04-bildschirmfoto-2023-08-29-um-13-07-19.oOaaE7me.png) *Analyse starten über das Kursmenü* Ihr TeachCenter-Kurs wird anhand einer Reihe allgemeiner Barrierefreiheitsvorgaben in sechs Kategorien (Bilder, Darstellung, Links, Medien, Tabellen, Text) analysiert. Das Accessibility Toolkit erstellt dann Berichte über alle gefundenen Barrierefreiheitsprobleme. Sobald die Analyse für einen Kurs einmal aktiviert wurde, werden später auch alle laufenden Aktualisierungen, Bearbeitungen oder Ergänzungen innerhalb des Kurses automatisch analysiert. ## Ergebnisse ansehen Nach einigen Minuten (je nach Umfang Ihres Kurses) sehen Sie eine **Kurzfassung der Ergebnisse** im Block in der rechten Seitenleiste. Sie sehen dort, wie viele Fehlermeldungen es pro Bereich (Bilder, Darstellung, Links, Medien, Tabellen, Text) gibt. ![Auf der Kursseite selbst steht ein Block mit Informationen, wann die Analyse abgeschlossen sein wird](https://telucation.tugraz.at/_app/immutable/assets/de-05-bildschirmfoto-2023-08-29-um-13-06-33.3SkH57hm.png) *Hinweis, wann Analyse abgeschlossen ist* ![Block in der rechten Seitenleiste zeigt die sechs Typen und die Anzahl der Fehler an. Darunter sind drei Icons: Auge für die Farbcodierung, das hier durchgestrichen ist, Lupe für Statistik und Download/Export der Ergebnisse-Icon](https://telucation.tugraz.at/_app/immutable/assets/de-06-anleitung37-accessibility-toolkit-block-auswertu.DgkvldG5.png) *Abgeschlossene Auswertung, dargestellt im Block* Über den **Button mit dem Auge** können Sie eine Ansicht aktivieren, die direkt bei den Aktivitäten im Kurs mit Farben und Icons anzeigt, welche Aktivitäten die Prüfung bestanden haben und wo Fehler aufgetreten sind. ![zwei Aktivitäten, von denen eine bestanden und grün ist und eine fehlgeschlagen und rot markiert ist](https://telucation.tugraz.at/_app/immutable/assets/de-07-anleitung37-accessibility-toolkit-farbcodierung.ds2AXZZK.png) *Beispielhafte Farbcodierung des Barrierefreiheitstests* Der **Button mit dem Bericht**–**Icon** (dritter Button) lädt ein PDF mit einem zusammenfassenden Bericht über Ihren Kurs herunter. Über den **Statistik-Button** (Lupe, zweiter Button) gelangen Sie zu einer Detailauswertung, wo die einzelnen Probleme genauer beschrieben werden. Über diese Detailansicht gelangen Sie dann auch direkt zu den Aktivitäten, die Fehlermeldungen verursacht haben, und können diese korrigieren. ![die Fehlerliste mit der Fehlermeldung, dem vorhandenen HTML-Code, Angaben zur Zeile und jeweils einem Button Bearbeiten, mit dem man direkt zum Fehler springen kann](https://telucation.tugraz.at/_app/immutable/assets/de-08-bildschirmfoto-2023-08-29-um-13-08-47.Vqf1F76o.png) *Fehlerliste* **Hinweis**: Zu dieser Detailauswertung gelangen Sie auch über das Hauptmenü: **Mehr** **>** **Tool****s** **zur Barrierefreiheit** In dieser Detailauswertung können Sie zwischen verschiedenen Menüs wechseln: ![Reiter Fehlerliste, Aktivitätsaufschlüsselung, Inhaltstypen, Berichtzusammenfassung und Erweitert](https://telucation.tugraz.at/_app/immutable/assets/de-09-bildschirmfoto-2023-08-29-um-13-08-24.BWTcnh_4.png) *Optionen im Accessibility Toolkit-Menü* - **Fehlerliste** mit direkten Links zu den Aktivitäten, bei denen Probleme erkannt wurden und Beschreibung der Fehler - **Aktivitätsaufschlüsselung** zeigt, welche Aktivitäten am ehesten Barrierefreiheitsprobleme verursachen - **Inhaltstypen** zeigt die Fehleranzahl nach Inhaltstyp - **Zusammenfassender** **Bericht** ist ein Bericht bestehend aus den Informationen der ersten drei Reiter ## Fehler beheben Klicken Sie im **Block in der rechten Seitenleiste auf den** **zweiten** **Button** (Statistik-/Lupe-Button) oder gehen Sie über das Hauptmenü (**Mehr** **–** **Tool****s** **zur Barrierefreiheit**) zur **Fehlerliste.** ![die Fehlerliste mit der Fehlermeldung, dem vorhandenen HTML-Code, Angaben zur Zeile und jeweils einem Button Bearbeiten, mit dem man direkt zum Fehler springen kann](https://telucation.tugraz.at/_app/immutable/assets/de-08-bildschirmfoto-2023-08-29-um-13-08-47.Vqf1F76o.png) *Fehlerliste* Dort erhalten Sie eine Aufschlüsselung der gefundenen Probleme als Tabelle. Ganz rechts in der Tabelle finden Sie jeweils einen **Link zur Aktivität oder zum Element**, um das Problem direkt beheben zu können (**Achtung:** öffnet im gleichen Fenster!) Im Folgenden finden Sie eine Auswahl der häufigsten Fehlermeldungen und möglichen Lösungen, geordnet nach Bereichen. ## Mögliche Fehler und Lösungen nach Bereichen ## Links - **Fehlermeldung:** Ein Linktext sollte beschreibend sein und einen Kontext zu seinem Ziel enthalten. **Lösung**: Verlinken Sie sinnvolle Begriffe, die darauf hindeuten, wohin der Link verweist. Vermeiden Sie es, Wörter wie „hier“ zu verlinken. **Erklärung:** Personen, die z. B. Screenreader verwenden, können sich eine Linkliste exportieren lassen. Begriffe wie „hier“ deuten nicht darauf hin, auf welche Seite man weitergeleitet wird. - **Fehlermeldung:** Links, die sich in einem neuen Fenster öffnen, sollten im Voraus einen Hinweis zeigen. **Lösung**: Fügen Sie im Text einen Hinweis darauf ein, dass der Link in einem neuen Fenster öffnet. **Erklärung:** Für sehbehinderte Personen kann es verwirrend sein, wenn Links in einem neuen Fenster öffnen, da sie dann erst nach der Seite suchen müssen. - **Fehlermeldung:** Ein Link muss Text enthalten, um wahrnehmbar zu sein. **Lösung**: In einem Textfeld gibt es einen Link im HTML-Modus, der allerdings bei keinem Text verlinkt ist und deshalb nicht angezeigt wird. Wechseln Sie in den HTML-Modus des Editors und ergänzen Sie den Text oder löschen Sie den Link. **Erklärung**: Für Personen, die z. B. Screenreader benutzen, könnte angezeigt werden, dass hier ein Link vorhanden ist, obwohl es keinen Link gibt. Die Person könnte meinen, dass hier Informationen für Sie nicht zugänglich sind. ## Text - **Fehlermeldung:** Bold-Elemente ‚b‘ sollten nicht verwendet werden. Besser ist stattdessen ’strong‘. **Lösung:** Wechseln Sie im Texteditor zum HTML-Modus (Button mit spitzen Klammern) und tauschen Sie die Elemente \ gegen \. - **Fehlermeldung:** Italic-Elemente ‚i‘ sollten nicht verwendet werden. Besser ist stattdessen ‚em‘ (emphasis). **Lösung****:** Wechseln Sie im Texteditor zum HTML-Modus (Button mit spitzen Klammern) und tauschen Sie die Elemente \ gegen \. **Erklärung**: Screenreader ignorieren Formatierungen wie fett oder kursiv, jedoch werden diese Formatierungen oft verwendet, um etwas Wichtiges hervorzuheben. Daher sollte besser ‚strong‘ und ‚em‘ verwendet werden, da diese auch vorgelesen werden können. ## Darstellung - **Fehlermeldung:** Fehlende Überschriften machen Inhalte weniger strukturiert und schwerer lesbar. **Lösung**: Verwenden Sie in längeren Texten Überschriftenformate. Verwenden Sie dafür die vorgegebenen Formate im Editor oder fügen Sie selbst im HTML-Modus Überschriftentags wie \

hinzu. Vermeiden Sie es, Überschriften nur fett oder unterstrichen zu machen, denn sie werden damit nicht als Überschriften markiert. **Erklärung**: Überschriftenformate können von Hilfsprogrammen erfasst werden. Sehbehinderte Personen wissen ansonsten nicht, wo Überschriften in einem Text sind. Die Überschriften können von Hilfsprogrammen auch zur Navigation genutzt werden, sodass die Person zu einer bestimmten Textstelle springen kann. Auch für alle anderen Personen sind strukturierte Texte leichter zu erfassen als lange Fließtexte. - **Fehlermeldung:** Eine Überschrift ‚h3 … h5‘ muss Text enthalten, um wahrnehmbar zu sein. **Lösung**: Wechseln Sie in den HTML-Modus des Editors (spitze Klammern) und suchen Sie nach dem leeren Element, z. B. \

\

. Löschen Sie dieses Element heraus, oder fügen Sie dort einen Überschriftentext ein. **Erklärung:** Überschriftenformate können von Hilfsprogrammen erfasst werden. Wenn ein Überschriften-Tag nun aber leer ist, könnte man meinen, dass hier eine wichtige Information fehlt. - **Fehlermeldung:** Überschriften, die nach h3-Überschriften folgen (große Überschriften im Editor), sollten die Hierarchie der Seitenüberschriften nicht durchbrechen. **Lösung**: Wechseln Sie in den HTML-Editor (Button mit spitzen Klammern) und kontrollieren Sie die korrekte Abfolge von Überschriftenformaten, nämlich \

, \

, \

, \

usw. Es sollte z. B. kein Element mit \

auf eine Überschrift \

folgen. **Erklärung:** Überschriften können zur Navigation in einem Text genutzt werden. Wenn die Abfolge von Überschriftenformaten nicht korrekt ist, ist die Navigation für sehbehinderte Personen, die Hilfsprogramme nutzen, verwirrend oder es scheint, dass ein Teil des Textes fehlt. - **Fehlermeldung:** Der Farbkontrast zwischen Text und Hintergrund ist zu gering. **Lösung**: Gehen Sie zum Textfeld und benutzen Sie den Editor, um den Text anders einzufärben, oder wechseln Sie in den HTML-Modus und definieren Sie eine andere Hintergrundfarbe. **Erklärung**: Wenn wenig Kontrast zwischen Text und Hintergrund gegeben ist, ist der Text schwer lesbar, vor allem mit Personen mit Sehbehinderungen bzw. -beeinträchtigungen. ## Bilder - **Fehlermeldung:** Der alternative Text ‚alt‘ bei Bildern sollte bei Bildelemente immer vorhanden sein, außer die Bilder sind rein dekorativ oder haben keine Bedeutung. **Lösung**: Gehen Sie über den Link zum Textfeld. Doppelklicken Sie das Bild und fügen Sie einen Alternativtext ein, der das Bild beschreibt. **Erklärung:** Personen, die die Bilder nicht oder nur eingeschränkt wahrnehmen können (z. B. aufgrund einer Sehbeeinträchtigung) sind auf einen Alternativtext angewiesen, der das Bild beschreibt. - **Fehlermeldung:** Der alternative Text ‚alt‘ bei Bildern sollte nicht länger als die maximal erlaubten 125 Zeichen sein. **Lösung:** Gehen Sie über den Link zum Textfeld. Doppelklicken Sie das Bild und kürzen Sie den Alternativtext. **Erklärung:** Zu langer Alternativtext kann von manchen Hilfsprogrammen nicht ausgelesen werden. Die 125 Zeichen entsprechen dem Barrierefreiheitsstandard. ## Tabellen - **Fehlermeldung:** Bei Tabellen sollten idealerweise die Header nicht fehlen. **Lösung**: Wechseln Sie in den HTML-Modus des Editors und [fügen Sie Header zu Ihrer Tabelle hinzu](https://www.w3schools.com/html/html_table_headers.asp). **Erklärung:** Wenn die Tabelle Zeilen- oder Spaltenüberschriften hat, müssen diese als solche markiert werden. Tabellen sind für Personen, die z. B. Screenreader nutzen, problematisch, da diese nicht als Ganzes erfasst und nur linear vorgelesen werden können. Wenn keine Header definiert sind, ist es nicht klar, dass eine Zeile oder Spalte Überschriften darstellt. - **Fehlermeldung:** Tabellen sollten idealerweise keine verbundenen Zellen haben. **Lösung**: Erstellen Sie eine Tabelle ohne verbundene Zellen oder stellen Sie die Informationen auch anders zur Verfügung, falls jemand die Tabelle nicht wahrnehmen kann. **Erklärung:** Da Tabellen von Personen, die z. B. Screenreader nutzen, nur linear wahrgenommen werden, können verbundene Zeilen verwirrend sein, da die Zuordnung nicht klar ist. - **Fehlermeldung:** In Tabellen sollten Zeilen- oder Spalten-’scopes‘ (zum Zuordnen von Zeilen und Spalten zu jeder Zelle) deklariert werden. **Lösung**: Bei jedem Tabellen-Header soll (im HTML-Modus) festgelegt werden, worauf sich der Header bezieht (Zeile, Spalte etc.). Weitere Erklärungen finden Sie auf [W3schools](https://www.w3schools.com/tags/att_th_scope.asp). **Erklärung**: Scopes weisen darauf hin, ob sich die Überschrift auf die Spalte oder Zeile bezieht, damit die Zusammenhänge für Nutzer:innen von Screenreadern besser erfasst werden können. ## Medien Die Kategorie Medien würde die Analyseergebnisse von Videos beinhalten. Da das TU Graz TeachCenter nicht als Videoplattform konzipiert ist, würde ein direktes Ablegen von Videos zu Problemen führen. Wir bitten Sie daher also, Ihre Videos nicht im TeachCenter zur Verfügung zu stellen, sondern dafür TU Graz [TUbe](https://tube.tugraz.at/) zu verwenden, die Videoplattform der TU Graz. Zum Upload der Videos auf TUbe können Sie TUbeDrop benutzen. Um TUbeDrop für Ihren TeachCenter-Kurs zu beantragen, füllen Sie bitte das [TUbe-Services-Formular](https://tube.tugraz.at/apply/) aus. Eine [Anleitung zu TUbeDrop](https://telucation.tugraz.at/anleitungen/tubedrop-anleitung/) finden Sie ebenfalls hier auf TELucation. ## Hilfe & Kontakt Bei Fragen zum TeachCenter: [tc@tugraz.at](mailto:tc@tugraz.at) Bei Fragen zu Barrierefreiheit im Studium: [barrierefrei-studieren@tugraz.at](mailto:barrierefrei-studieren@tugraz.at) [Tipps für Barrierefreiheit bei Bildern](https://accessibilitytookit-vt11.eu.helpdocs.com/accessibility-tips/image-accessibility-tips) [Tipps für barrierefreies Kurslayout](https://accessibilitytookit-vt11.eu.helpdocs.com/accessibility-tips/layout-accessibility-tips) [Tipps für Barrierefreiheit bei Links](https://accessibilitytookit-vt11.eu.helpdocs.com/accessibility-tips/link-accessibility-tips) [Tipps für barrierefreie Medien](https://accessibilitytookit-vt11.eu.helpdocs.com/accessibility-tips/media-accessibility-tips) [Tipps für barrierefreie Tabellen](https://accessibilitytookit-vt11.eu.helpdocs.com/accessibility-tips/table-accessibility-tips) [Tipps für barrierefreie Texte](https://accessibilitytookit-vt11.eu.helpdocs.com/accessibility-tips/text-accessibility-tips)