Headerbild setzt sich aus vier nebeneinanderliegenden Quadraten zusammen. Quadrat 1 zeigt das Accessibility-Piktogramm auf hellblauem Grund. Quadrat 2 zeigt ein Gehirn-Piktogramm auf dunkelblauem Grund. Quadrat 3 zeigt ein durchgestrichenes Auge-Piktogramm auf hellgrünem Grund. Quadrat 4 zeigt ein Ohr-Piktogramm auf rotem Grund.
Headerbild setzt sich aus vier nebeneinanderliegenden Quadraten zusammen. Quadrat 1 zeigt das Accessibility-Piktogramm auf hellblauem Grund. Quadrat 2 zeigt ein Gehirn-Piktogramm auf dunkelblauem Grund. Quadrat 3 zeigt ein durchgestrichenes Auge-Piktogramm auf hellgrünem Grund. Quadrat 4 zeigt ein Ohr-Piktogramm auf rotem Grund.
Headerbild setzt sich aus zwei nebeneinanderliegenden Rechtecken zusammen. Rechteck 1 zeigt das Accessibility-Piktogramm auf hellblauem Grund. Rechteck 2 zeigt ein Gehirn-Piktogramm auf dunkelblauem Grund.
Headerbild setzt sich aus zwei nebeneinanderliegenden Rechtecken zusammen. Rechteck 1 zeigt das Accessibility-Piktogramm auf hellblauem Grund. Rechteck 2 zeigt ein Gehirn-Piktogramm auf dunkelblauem Grund.

Siteimprove Accessibility Checker - Browser Plugin/Extension

Das Unternehmen Siteimprove ist ein Software-as-a-Service Unternehmen aus Dänemark. Siteimprove stellt Tools und Dienstleistungen rund ums Optimieren und Verwalten von Webseiten zur Verfügung. Beim Thema Website-Optimierung legt das Unternehmen Wert auf Barrierefreiheit und Suchmaschinen-Optimierung.

Ein Tool von Siteimprove ist der "Siteimprove Accessibility Checker". Dabei handelt es sich um ein installierbares Browser-PlugIn. Ein Browser-PlugIn ist ein kleines Programm, welches im Browser installiert wird. Mit dem "Accessibility Checker" lässt sich prüfen, inwiefern eine Seite barrierefrei ist und den Prinzipien der WCAG (Web Content Accessibility Guidelines) entspricht.

PlugIn im Chrome-Browser installieren

  • Chrome Web Store aufrufen - https://chromewebstore.google.com/
  • In der Suche "Siteimprove Accessibility Checker" eingeben
  • Auf den "Hinzufügen"-Button klicken (Abb. 1)
  • Berechtigung erlauben (Abb. 2)
Screenshot aus dem Chrome Web Store. Dort ist die Produktseite zum Siteimprove Accessibility Checker geöffnet- Der "Hinzufügen"-Button ist durch einen roten Pfeil hervorgehoben.
Abb. 1: Siteimprove Accessibility Checker im Chrome Web Store hinzufügen
Screenshot des Berechtigungsfenster beim Installieren des Siteimprove Accessibility Checker. Es wird gefragt, ob alle Daten auf allen Webseiten gelesen und geändert werden dürfen.
Abb. 2: Beim Installieren des Siteimprove Accessibility Checker die benötigte Berechtigung erteilen.

Siteimprove Accessibility Checker PlugIn verwenden

  • Die Chrome-Plugins erreicht man über das Puzzle-Icon rechts neben der Adresszeile des Browsers (Abb. 3)
  • Mit Klick auf das Puzzle-Icon erscheint eine Übersicht aller installierten Plugins
    • Mit Klick auf die Stecknadel hinter einem PlugIn kann dieses neben der Adressleiste festgepinnt werden (Abb. 4)
  • Der Siteimprove Accessibility Checker lässt sich nun über das blaue Siteimprove-Logo verwenden (Abb. 5)
  • Beim ersten Klick auf das PlugIn öffnet sich ein Formular, um sich bei Siteimprove anzumelden. Wenn Sie keine Anmeldung wünschen, wählen Sie den Button "Skip form" (Abb. 6)
  • Vorgehen, um eine Website zu checken:
    • Website, die gecheckt werden soll öffnen
    • Siteimprove-Icon in der Adressleiste anklicken
    • Barriere-Anmerkungen direkt auf der Seite mit dem PlugIn einsehen

  • Siteimproves Anmerkungen öffnen sich automatisch in einem separaten Fenster. Im Bereich "Issues" werden die Probleme zur untersuchten Seite aufgelistet. Im Reiter "Explorer" können Sie auf die erstellte Website Filter anwenden, um sich diese mit verschiedenen Farbschwächen/Farbblindheiten simulieren zu lassen (Abb. 7). Ein Neuladen der Website macht die Farbsimulation wieder rückgängig.

Screenshot aus dem Chromebrowser. Rechts neben der Adresszeile befindet sich ein Puzzle-Icon mit dem sich die installierten Plugins aufrufen lassen.
Abb. 3: Über das Puzzle-Icon lassen sich die installierten Plugins verwalten
Screenshot aus dem Chromebrowser zeigt die Übersicht über die installierten Browser-Plugins
Abb. 4: Mit Klick auf die Stecknadel lässt sich das PlugIn oben neben der Adresszeile festpinnen
Screenshot aus dem Chromebrowser. Rechts neben der Adresszeile befindet sich nachdem Anpinnen des Plugins das Siteimprove-Icon, über welches sich das PlugIn nutzen lässt.
Abb. 5: Über das Siteimprove-Logo lässt sich das PlugIn nutzen
Formular zum Anmelden bei Siteimrprove. Dies kann über den Button "Skip form" unten rechts übersprungen werden.
Abb. 6: Formular zum Anmelden bei Siteimrprove. Dies kann über den Button "Skip form" unten rechts übersprungen werden.
Browserfenster des Siteimrpove Accessibility Checkers mit den Reitern "Issues" und "Explorer"
Abb. 7: Browserfenster des Siteimprove Plugins

Zu beachten bei der Nutzung des Siteimprove Accessibility Checker an der EUF

Nutzen Sie den Siteimprove Accessibility Checker auf den Webseiten der Europa-Universität Flensburg, so müssen Sie bei Hinweisen zu Farb-Kontrasten folgendes beachten:

  • Die EUF-Standardfarben erreichen nach WCAG-Standards keine AAA-Zertifizierung
  • An den Stellen auf der EUF-Website, wo die Standardfarben verwendet werden, ist der AA-Standard ausreichend
    • Die Hinweise zu Kontrasten müssen Sie also nur zu ihren eigens hochgeladenen Bildern, Grafiken und Co. beachten

Die dortigen Hinweise können nicht immer von Ihnen als TYPO3-Autor/Redakteur umgesetzt werden. Bei einigen der "Issues" handelt es sich um Probleme, die nur durch unsere Webagentur gelöst werden können. An der Verbesserung solcher Issues arbeiten wir bereits. Als Autor oder Redakteur können Sie das Tool dennoch nutzen, da es zum Beispiel fehlende Alt-Texte und andere Kleinigkeiten entdeckt, welche Sie selbst korrigieren können.