Zweiter Blick: Skalierbare Vektorgrafiken (SVG)

BarrierefreiheitDarstellungsoptionen



SVG (Skalierbare Vektorgrafiken)

SVG ist zeitgemäß

Das Grafikformat SVG schien schon totgesagt. Wir finden es kaum auf Webseiten, außer auf Wikipedia. Doch „Responsive Web“ und Smart Phones machen das Grafikformat SVG wieder interessant, das eine Darstellungsqualität in allen Größen gewährleistet.

Die Tücken liegen im Aufwand zum Erstellen und zum Einbinden in eine Webseite. Der wichtigste Editor Inkskape ist nicht barrierefrei zu bedienen und bei der optimalen Einbindung sind wir noch beim Experimentieren.

Wir fassen für Sie unseren aktuellen Stand an Informationen und Erfahrungen zusammen und zeigen Ihnen, was wir mit SVG schon gemacht haben.

SVG-Dateien erstellen

Einbinden von SVG-Grafiken in HTML-Dateien

In HTML5 kann der Code der SVG-Datei direkt in den HTML-Code eingefügt werden. Bei älteren HTML-Versionen gibt es unterschiedliche Möglichkeiten zur Einbindung einer SVG-Datei.

Vorteile des Grafikformats SVG

SVG ist für viele Anwendungen zur Erzielung der Barrierefreiheit ein geeignetes Dateiformat. Anders als bei Pixelgrafiken wird die Bildschirmanzeifge beim Vergrößern (Skalieren) jeweils neu berechnet, wodurch Darstellungsprobleme, wie bei Pixelgrafiken üblich, vermieden werden.

Es empfiehlt sich daher insbesondere bei Grafiken, die Text enthalten, nach Möglichkeit eine SVG-Datei einzubinden. Dies gilt etwa besonders für Organigramme.

Mangelhafte Unterstützung durch Browser und Assistierende Technologien

Leider wird das grundsätzlich barrierefreie Dateiformat SVG weiterhin von Browsern und sogar von Assistierenden Technologien nicht ausreichend unterstützt, weshalb es nur mit einigen Vorbehalten eingesetzt werden kann.

So werden SVG-Animationen weiterhin vom Internet Explorer (Stand 2015) nicht umgesetzt. In Mozilla Firefox hingegen werden Animationen schon seit frühesten Versionen richtig präsentiert.

SVG und Assistierende Technologien

Die Testdatei, die durch das folgende Link aufgerufen werden kann, besteht aus einem TITLE und einer DESCRIPTION im HEADER, sowie zwei Textelementen und einem Kreis im Body. Die Textelemente und der Kreis haben versuchsweise ein TITLE-Attribut erhalten.

Auswertung: (Stand Juni 2015)

  • Jaws 16.0 liest ausschließlich den Titel des HEADERS.
  • Zoomtext 10 macht keine Fontglättung.
  • Internet Explorer 11 blendet beim Mouse Over die Titel der Elemente nicht ein.

Dynamische SVG-Dateien mittels PHP generieren

SVG-Dateien lassen sich auch dynamisch mittls PHP generieren. Dazu werden Variablen oder Codes einfach wie auch bei HTML-Dateien mittels PHP-Befeheln festgelegt oder eingefügt.


Baustellenschild

Seite in Aufbau

Sie werden bemerken, dass diese Seite noch nicht fertig ist. Inhalte und Funktionalitäten sind noch nicht gänzlich verfügbar. Sie können aber gerne um die Baustelle herumgehen und den Fortschritt beobachten. Das Betreten der Baustelle ist Ihnen aber schon erlaubt und für Sie völlig ungefährlich!