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.

  • Elemente mit genügend Kontrast werden mit einem grünen Haken angezeigt. (Screenshot: Christian Heilmann)
  • Wenn ein Element zu wenig Kontrast hat, zeigt das Informationsfenster einen Fehler an. (Screenshot: Christian Heilmann)
  • Formatvorlagenanzeige der Farbe eines Elements (Screenshot: Christian Heilmann)
  • Farbpicker mit Farbe, die nicht genug Kontrast aufweist (Screenshot: Christian Heilmann)
  • Farbpicker mit Vorschlägen von Farben, die genug Kontrast aufweisen (Screenshot: Christian Heilmann)
  • Neue Farbe mit genug Kontrast, dargestellt im Farbpicker (Screenshot: Christian Heilmann)
  • Der Name im Inspect Tool ist bei Bildern ohne Alternativtext leer. (Screenshot: Christian Heilmann)
  • Der Alternativtext wird als name im Inspect Tool angezeigt. (Screenshot: Christian Heilmann)
  • Link mit Text neben dem Bild hat auch einen Namen in der Barrierfreiheit-Anzeige (Screenshot: Christian Heilmann)
  • Link nur mit einem SVG ohne Titel hat keinen Namen in der Barrierfreiheit-Anzeige (Screenshot: Christian Heilmann)
  • Formularfeld mit dem Namen "Other" in der Barrierefreiheit-Anzeige (Screenshot: Christian Heilmann)
  • Formularfeld ohne Namen "Other" in der Barrierefreiheit-Anzeige (Screenshot: Christian Heilmann)
  • Das Probleme Werkzeug (Screenshot: Christian Heilmann)
  • Das Probleme-Werkzeug mit Informationen, welche Bilder keine Textalternativen haben (Screenshot: Christian Heilmann)
  • Die Experimente-Liste der Entwicklerwerkzeuge in Edge (Screenshot: Christian Heilmann)
  • Kontrast Report im Probleme-Werkzeug (Screenshot: Christian Heilmann)
  • Das Elemente-Werkzeug mit Erklärung, warum das HTML Element eine Sprache definiert haben muss (Screenshot: Christian Heilmann)
  • Live-Barrierefreiheit Analyse in Visual Studio Code (Screenshot: Christian Heilmann)
  • Die Problemeliste in Visual Studio Code mit Barrierefreiheit-Problemen (Screenshot: Christian Heilmann)
Live-Barrierefreiheit Analyse in Visual Studio Code (Screenshot: Christian Heilmann)
Stellenmarkt
  1. Ingenieur (m/w/d) Applikationssoftware / Support Automotive
    Beckhoff Automation GmbH & Co. KG, Verl
  2. IT-Security-Administrator*in (m/w/d)
    Landkreis Tübingen, Tübingen
Detailsuche

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

  • Elemente mit genügend Kontrast werden mit einem grünen Haken angezeigt. (Screenshot: Christian Heilmann)
  • Wenn ein Element zu wenig Kontrast hat, zeigt das Informationsfenster einen Fehler an. (Screenshot: Christian Heilmann)
  • Formatvorlagenanzeige der Farbe eines Elements (Screenshot: Christian Heilmann)
  • Farbpicker mit Farbe, die nicht genug Kontrast aufweist (Screenshot: Christian Heilmann)
  • Farbpicker mit Vorschlägen von Farben, die genug Kontrast aufweisen (Screenshot: Christian Heilmann)
  • Neue Farbe mit genug Kontrast, dargestellt im Farbpicker (Screenshot: Christian Heilmann)
  • Der Name im Inspect Tool ist bei Bildern ohne Alternativtext leer. (Screenshot: Christian Heilmann)
  • Der Alternativtext wird als name im Inspect Tool angezeigt. (Screenshot: Christian Heilmann)
  • Link mit Text neben dem Bild hat auch einen Namen in der Barrierfreiheit-Anzeige (Screenshot: Christian Heilmann)
  • Link nur mit einem SVG ohne Titel hat keinen Namen in der Barrierfreiheit-Anzeige (Screenshot: Christian Heilmann)
  • Formularfeld mit dem Namen "Other" in der Barrierefreiheit-Anzeige (Screenshot: Christian Heilmann)
  • Formularfeld ohne Namen "Other" in der Barrierefreiheit-Anzeige (Screenshot: Christian Heilmann)
  • Das Probleme Werkzeug (Screenshot: Christian Heilmann)
  • Das Probleme-Werkzeug mit Informationen, welche Bilder keine Textalternativen haben (Screenshot: Christian Heilmann)
  • Die Experimente-Liste der Entwicklerwerkzeuge in Edge (Screenshot: Christian Heilmann)
  • Kontrast Report im Probleme-Werkzeug (Screenshot: Christian Heilmann)
  • Das Elemente-Werkzeug mit Erklärung, warum das HTML Element eine Sprache definiert haben muss (Screenshot: Christian Heilmann)
  • Live-Barrierefreiheit Analyse in Visual Studio Code (Screenshot: Christian Heilmann)
  • Die Problemeliste in Visual Studio Code mit Barrierefreiheit-Problemen (Screenshot: Christian Heilmann)
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.

Golem Karrierewelt
  1. C++ Programmierung Grundlagen (keine Vorkenntnisse benötigt): virtueller Drei-Tage-Workshop
    01.-03.08.2022, virtuell
  2. Kubernetes Dive-in-Workshop: virtueller Drei-Tage-Workshop
    19.-21.07.2022, Virtuell
Weitere IT-Trainings

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.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed
 Probleme bei der Barrierefreiheit erkennen
  1.  
  2. 1
  3. 2
  4. 3


Potrimpo 04. Jun 2022 / Themenstart

Gendern Mode? Ich hätte gern mein Frollein zurück. Barrierefreiheit ist offensichtlich...

lala1 03. Jun 2022 / Themenstart

auch bei Sonnenschein auf dem Handy die Webseite konsumieren zu können. (denkt mal drüber...

mnementh 03. Jun 2022 / Themenstart

Natürlich habe ich einen Adblocker, weil Werbung ist aggressiv, gefährlich und zerstört...

Honigdieb 03. Jun 2022 / Themenstart

Weil alles, was nicht den Werten der neuen, lauten Minderheit entspricht, automatisch...

Kommentieren



Aktuell auf der Startseite von Golem.de
Geforce GTX 1630
Nvidia bringt extralahme Grafikkarte - wegen Intel

Die Geforce GTX 1630 wird unter der Arc A380 positioniert, weshalb Nvidia einen alten Chip in stark beschnittener Form wieder aufleben lässt.

Geforce GTX 1630: Nvidia bringt extralahme Grafikkarte - wegen Intel
Artikel
  1. Displays: Sony baut 4K-Monitor mit KVM-Switch im Playstation-Stil
    Displays
    Sony baut 4K-Monitor mit KVM-Switch im Playstation-Stil

    Sonys Inzone M9 kann mittels HDMI 2.1 und Displayport an PCs und Konsolen angeschlossen werden. Die Kombination aus 4K und 144 Hz ist selten.

  2. TADF Technologie: Samsung kauft Cynora in Bruchsal und entlässt alle
    TADF Technologie
    Samsung kauft Cynora in Bruchsal und entlässt alle

    Der Cynora-Chef wollte das deutsche Start-up zum Einhorn entwickeln. Nun wurden die Patente und die TADF-Technologie von Samsung für 300 Millionen Dollar gekauft und das Unternehmen zerschlagen.

  3. Return to Monkey Island: Gameplay-Trailer zeigt neuen Guybrush Threepwood
    Return to Monkey Island
    Gameplay-Trailer zeigt neuen Guybrush Threepwood

    Das dürfte nicht nur für Begeisterung sorgen: Erstmals ist Gameplay aus dem nächsten Monkey Island zu sehen - und die Hauptfigur.

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • PNY RTX 3080 12GB günstig wie nie: 929€ • MindStar (MSI RX 6700 XT 499€, G.Skill DDR4-3600 32GB 165€, AMD Ryzen 9 5900X 375€) • Nur noch heute: NBB Black Week • Top-TVs bis 53% Rabatt • Top-Gaming-PC mit AMD Ryzen 7 RTX 3070 Ti 1.700€ • Samsung Galaxy S20 FE 5G 128GB 359€ [Werbung]
    •  /