Direkt zum Inhalt

Für Angehörige der TU Freiberg steht die Software "Siteimprove" zur Verfügung, welche zur Umsetzung der Barrierefreiheit im Web genutzt werden kann. Mittels "Siteimprove" lassen sich alle (Drupal-)Webseiten der TU Freiberg auf mögliche Barrieren hin untersuchen. Auch trägt Siteimprove zur generellen Verbesserung der Qualität der Webpräsenz sowie deren Inhalte bei.

Sollten Sie noch keinen Zugang zu "Siteimprove" für die von Ihnen verwalteten TU Freiberg Webseiten haben, können Sie diesen im Universitätsrechenzentrum unter nebenstehenden Kontaktdaten beantragen.

Alternativtexte

Ein zentrales Element in der barrierefreien Webgestaltung stellt der Umgang mit Bildern und Grafiken dar. Jedes visuelle Element, welches Informationen transportiert, muss eine alternative Textbeschreibung bereit stellen, um als barrierefrei zu gelten.

Um ein Bild auf einer Webseite mit Textinformationen zu versehen, gibt es im Web zwei einfache Möglichkeiten, das "Alt-Tag" (in Drupal als "Beschreibungsfeld" benannt) und das "Title-Tag" (in Drupal "Titel"). Beim Einfügen oder Ändern eines Bildes in Drupal, besteht die Möglichkeit diese Tags zu füllen. Beide Felder sollten stets ausgefüllt sein.

Für die Barrierefreiheit eines Bildes ist das Feld "Beschreibung" von größter Bedeutung. Der hier eingetragende Text wird in dem Fall genutzt, wenn das entsprechende Bild nicht dargestellt oder wahrgenommen werden kann. Dies kann zum einen technische Ursachen haben (Bild kann im Moment nicht geladen werden) oder durch Einschränkungen der Nutzer (Nutzung assistiver Techniken) eintreten.

In einem solchen Falle muss der Beschreibungstext so gewählt sein, dass er alle relevanten Informationen, welche das Bild eigentlich repräsentieren würde, ebenfalls enthält. Um einen guten Beschreibungstext zu finden ist es hilfreich sich selbst folgende Fragen zu stellen:

  • Was möchte ich durch den Einsatz des Bildes beim Leser eigentlich erreichen?
  • Was sind relevante Elemente des Bildes und was nur "Beiwerk"?
  • Welche Informationen würde ich verlieren, wenn ich das Bild weglassen würde?

Es kann vorkommen, dass Grafiken keinen eigentlichen Informationsgehalt haben und nur zur visuellen Gestaltung der Webseite genutzt werden. In diesem Falle kann die Grafik den Beschreibungstext "Schmuckgrafik" erhalten, oder auch gar keine Beschreibung.

Beinhaltet das Bild Informationen in Textform, so sind diese in jedem Fall im Beschreibungstext noch einmal mit einzuarbeiten.

Hinweis: Gestalten Sie Beschreibungstexte nicht unnötig lang und konzentrieren Sie sich auf die wesentlichen Aussagen des Bildes. Beispielsweise der Beschreibungstext: "Student präsentiert rotes Elektroauto", beinhaltet die überflüssige Information der Farbe des Autos. Die Farbe ist in diesem Beispiel irrelevant, da sie selbst keine Information vermittelt. Auch können von Geburt an Sehgeschädigte zumeist mit Farbangaben nichts anfangen.

Der Bildtitel erscheint immer dann, wenn man mit dem Mauszeiger über das entsprechende Grafikelement fährt. Der dann angezeigte Textlayer wird auch als "Tooltip" bezeichnet. Im verwendeten Drupalsystem wird der Bildtitel als Bildunterschrift verwendet, wenn eine Bildunterschrift gewünscht ist.

Grundlegender Unterschied zum Beschreibungstext besteht darin, dass der Titel zusätzliche Informationen zum Bild enthält. Der Titel sollte kurz und treffend gewählt werden. Zusätzliche Informationen können beispielsweiße Copyrightinformationen, Namen von abgebildeten Personen, oder Zweck des Bildes sein (z.B. wenn das Bild als Link zu einem Artikel oder Blogeintrag genutzt wird).

Beispiel 1

Beschreibung: "Eine Tasse dampfender Kaffee steht in Mitten von Kaffeebohnen."

Titel: "Kaffeetasse © Max Mustermann"

Beispiel 2

Beschreibung: "Laptop, auf dessen Bildschirm das Computerspiel Pac-Man zu sehen ist."

Titel: "Zum Artikel über Computerspiele"

Browser-Erweiterung: Siteimprove Accessibility Checker

Mit Hilfe eines Plugins für den Browser lassen sich einzelne Webseiten auf Barrierefreiheit überprüfen. Dazu bietet Siteimprove das kostenlose Plugin "Accessibility Checker" für alle gängigen Browser (Firefox, Chrome, Edge, Opera) an. Das Plugin prüft jede beliebige Webseite auf mögliche Barrieren, die gerade im Browser geöffnet ist.

Hinweis: Eine Überprüfung bezüglich Quality Assurance der Webseiten (defekte Links, Rechtschreibung etc. ) ist durch das PlugIn nicht möglich.

Schritt 1

  • Loggen Sie sich bei Siteimprove ein.
  • Wählen Sie den Menüpunkt "Accessibility" aus.
  • Wählen Sie "Browser-Erweiterung" aus.

Schritt 2

  • Klicken Sie auf den Link für Ihren entsprechenden Browser und folgen Sie den Installationsanweisungen.
  • Die Installation läuft dann automatisch ab.
  • Hinweis: Stellen Sie sicher, dass Sie die aktuellste Version dieses Browsers verwenden.

Nach der erfolgreichen Installation des PlugIns erscheint in der rechten oberen Ecke Ihres Webbrowsers das Siteimprove Logo als neue Schaltfläche.

Betätigen Sie diese, um einen Test der aktuell offenen Webseite auf Barrierefreiheit durchzuführen. Beim erstmaligen Benutzen müssen Sie zusätzlich mit ihren Siteimprove-Logindaten anmelden.

Die Ergebnisse des Tests werden Ihnen in der gewohnten Form in einem neuen Fenster angezeigt.

Sinnvolle Link-Texte: Links richtig gestalten

Weblinks sollten immer einen Link-Text besitzen und nicht nur aus der reinen Webadresse auf die der Link verweist bestehen.

Schlecht: URL mit sich selbst verlinkt

https://drupal1.hrz.tu-freiberg.de/barrierefreiheit-im-web/barrierefreiheit/checkliste-fuer-redakteure

Gut: aussagekräfter Beschreibungs-Text verlinkt

Checkliste für Redakteure (Barrierefreiheit)

Häufig werden auf Websites sogenannte "Anrisstexte" verwendet, welche dann über Links wie mehr... oder weiterlesen... zum eigentlichen Beitrag führen. Diese Links treten mehrmals auf einer Webseite auf und sind damit nicht mehr eindeutig und widersprechen damit der WCAG Richtlinie 2.4.4.

Eine Möglichkeit dies zu beheben ist die Verwendung des title-Attributs für Link-Texte. Um dieses Attribut zu nutzen, geben Sie bei der Erstellung eines Links im Dialogfenster "Allgemein" einen Titel für den Link an. Dieser wird von allen Assistenzsystemen erkannt und dem jeweiligen Nutzer zugänglich gemacht.

Am einfachsten kontrollieren Sie, ob das title-Attribut gesetzt ist und verwendet wird, indem Sie mit dem Mauszeiger über den Link fahren. Ist ein title-Attribut verfügbar, wird Ihnen dieses als Mouse-Over Text angezeigt.

Schlecht: Mouse-Over-Text nicht vorhanden

Gut: Mouse-Over-Text unterscheidet sich

Richtlinien für Webseiten

Wir haben derzeit zwei allgemeine Richtlinien aktiv. Das ist einmal "Postleitzahl 09596". Diese Postleitzahl bitte nur in direktem Zusammenhang mit dem Postfach der TU Freiberg verwenden.

Zum anderen gibt es die Richtlinie für die korrekte Schreibweise von „Herzlich willkommen". Hierbei ist auf die korrekte Groß- und Kleinschreibung zu achten. Ein häufiger Fehler ist das großgeschriebene "Willkommen".

Auch Medien-Richtlinien tragen zur Qualitätssicherung der Website bei, z.B. "Bilder größer als 1 MB überprüfen". Bilder sollten nur für das Web optimiert eingebunden werden, da sonst die Ladezeiten unnötig hoch sind. (Mobile Endgeräte, Volumen-Tarife, SEO-Kriterien)

"PDFs älter als 3 Jahre". Es besteht die Gefahr, dass die Dokumente nicht mehr aktuell sind, veraltete Verweise enthalten oder nicht mehr dem gewünschten Design entsprechen.

Generell stellen die Richtlinien für Webseiten ein Hilfsmittel dar, um die Qualität der Inhalte zu optimieren. Sollte Ihnen ein „Verstoß“ gegen die existierenden Richtlinien angezeigt werden, reicht es vorerst aus, sich diesen kurz anzusehen und zu beurteilen, ob eine Änderung notwendig ist.

Gern nehmen wir weitere Vorschläge für Richtlinien entgegen.

https://www.destatis.de/SiteGlobals/Frontend/