Fehlerbehebung während der Entwicklung

Dass der Browser uns hilft, Probleme zu erkennen, ist toll, setzt jedoch eigentlich zu spät an - nämlich, wenn die Fehler schon gemacht wurden. Für Nutzer von Visual Studio Code als Texteditor geht es sogar noch einfacher. Wenn man die Erweiterung Microsoft Edge Devtools for VS Code installiert, wird HTML und CSS automatisch auf Probleme getestet und man bekommt durch Unterringelung angezeigt, welche Elemente problematisch sind.

• 

Live-Barrierefreiheit Analyse in Visual Studio Code (Screenshot: Christian Heilmann)

Man kann sich auch in der Problemliste alle Fehler im ganzen Projekt anzeigen lassen.

• 

Die Problemeliste in Visual Studio Code mit Barrierefreiheit-Problemen (Screenshot: Christian Heilmann)

Die Fehleranalyse ist hierbei live. Wenn man also ein Bild ohne Alt-Attribut eintippt, wird das rot unterringelt. Sobald eines eingefügt wird, verschwindet die Fehleranzeige wieder. Das ist genauso einfach, wie wenn man sich in Word vertippt hat.

Ein guter Anfang

Natürlich sind nicht alle Probleme mit Barrierefreiheit mit diesen Werkzeugen zu vermeiden. Oft ist es auch so, dass Probleme erst durch Software von Drittanbietern oder das CMS entstehen. Allerdings hilft das Wissen über die browsereigenen Werkzeuge, sehr einfache Probleme zu verhindern - und somit die eigene Webseite vielleicht besser nutzbar zu machen als die 1.000.000 meistgenutzten Webseiten.

Chris Heilmann ist seit 1997 Webentwickler, bloggt seit 2005 auf Christianheilmann.com und ist Autor mehrerer Bücher über Javascript und Barrierefreiheit. Derzeit lebt er in Berlin und arbeitet als Principal Program Manager mit seinem Team in Microsoft an Entwicklerwerkzeugen.