Probleme bei der Barrierefreiheit erkennen

Der einfachste Weg herauszufinden, ob ein Teil der Seite genug Kontrast hat, ist es, das Inspect-Tool zu verwenden und mit der Maus über das Element zu fahren. In einem kleinen Informationsfenster werden dann die Daten des Elements angezeigt, darunter auch Informationen zur Barrierefreiheit (Accessibility).

Stellenmarkt
  1. Software Architekt / Software Architect (m/w/d)
    igus GmbH, Köln
  2. Mitarbeiter*in (m/w/d) Zeitmanagement
    Universitätsmedizin der Johannes Gutenberg-Universität Mainz, Mainz
Detailsuche

Im Bereich Contrast zeigen Elemente mit ausreichendem Kontrast einen grünen Haken:

  • 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)
Elemente mit genügend Kontrast werden mit einem grünen Haken angezeigt. (Screenshot: Christian Heilmann)

Problematische Seitenelemente dagegen zeigen ein Ausrufezeichen an:

  • 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)
Wenn ein Element zu wenig Kontrast hat, zeigt das Informationsfenster einen Fehler an. (Screenshot: Christian Heilmann)

Wenn man nun auf das Seitenelement klickt, öffnet dies das Elemente-Werkzeug und in den Formatvorlagen kann man sehen, welche Farben eingesetzt wurden.

  • 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)
Formatvorlagenanzeige der Farbe eines Elements (Screenshot: Christian Heilmann)
Golem Karrierewelt
  1. Green IT: Praxisratgeber zur nachhaltigen IT-Nutzung (virtueller Ein-Tages-Workshop)
    10.08.2022, virtuell
  2. Java EE 8 Komplettkurs: virtueller Fünf-Tage-Workshop
    11.-15.07.2022, virtuell
Weitere IT-Trainings

Das Anklicken des farbigen Quadrats öffnet einen Farbpicker, in dem das Kontrastverhältnis dargestellt wird. Bei nicht ausreichendem Kontrast zeigt der Picker einen durchgestrichenen Kreis an.

  • 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)
Farbpicker mit Farbe, die nicht genug Kontrast aufweist (Screenshot: Christian Heilmann)

Wenn man den Knopf mit dem Pfeil nach unten anklickt, zeigt der Farbpicker verschiedene Möglichkeiten an, eine Farbe zu wählen, die genug Kontrast zur Hintergrundfarbe hat.

  • 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)
Farbpicker mit Vorschlägen von Farben, die genug Kontrast aufweisen (Screenshot: Christian Heilmann)

Man kann entweder die zwei vorgeschlagenen Farben auswählen (AA und AAA sind dabei die WCAG-Standards für Barrierefreiheit), mit der Pipette eine Farbe in der Seite aufnehmen oder eine Farbe im Farbmenü oben entlang der weißen Linien auswählen.

Hat man eine Farbe gewählt, zeigt der Farbpicker auch deren Kontrast an. Bei Farben mit genug Kontrast signalisieren Haken, dass sie den AA- und AAA- Qualitätsansprüchen genügen.

  • 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)
Neue Farbe mit genug Kontrast, dargestellt im Farbpicker (Screenshot: Christian Heilmann)

Bei der Wahl von Farben im Netz gibt es noch mehr zu beachten, zum Beispiel, dass die genutzten Farben auch für Menschen mit Farbenblindheit verständlich sind, oder auch wie Nutzer der hohen Kontrasteinstellung von Betriebssystemen die Seite erleben. Auch dafür gibt es Simulationen in den Browser-Entwicklerwerkzeugen.

Alternativtext und fehlende Beschreibungen

Das Inspect-Tool hilft auch bei dem Problem fehlender Alternativtexte für Bilder und leerer Verknüpfungen und Knöpfe. Alternativtexte dienen dazu, etwa Menschen mit Sehbehinderungen oder kognitiven Einschränkungen beim Verständnis von Bildern zu unterstützen. Wieder ist hier der Abschnitt der Barrierefreiheit des Tools hilfreich. Diesmal geht es aber um die Rolle und den Namen des Elements. Das folgende Bild zum Beispiel hat zwar die Rolle eines Bildes, aber keinen Alternativtext, daher ist der Name leer.

  • 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)
Der Name im Inspect Tool ist bei Bildern ohne Alternativtext leer. (Screenshot: Christian Heilmann)

Das Bild mit einem Alternativtext hat einen Namen und ist somit auch barrierefrei.

  • 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)
Der Alternativtext wird als name im Inspect Tool angezeigt. (Screenshot: Christian Heilmann)

Alternativtexte sollten immer erklären, warum das Bild da ist und was es darstellt. Nicht nur, dass es ein Bild ist. Wenn Bilder allein zur Zierde da sind, ist es sinnvoller, sie als Hintergründe einzubinden.

Das Problem mit Verknüpfungen und Knöpfen, die leer sind, entsteht oft, wenn man ein Bild in einem Anker-Element oder Knopf einfügt, das keinen Alternativtext hat. Damit ist dann der Name des Elements wieder leer. Im folgenden Fall hat der Anker den Text "More" und den Pfeil als SVG-Element - und damit einen Namen.

  • 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)
Link mit Text neben dem Bild hat auch einen Namen in der Barrierfreiheit-Anzeige (Screenshot: Christian Heilmann)

Wenn der Text nicht vorhanden ist und das SVG-Bild keinen Titel hat, ist die Verknüpfung namenlos und damit nicht barrierefrei.

  • 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)
Link nur mit einem SVG ohne Titel hat keinen Namen in der Barrierfreiheit-Anzeige (Screenshot: Christian Heilmann)

Formularfelder ohne Beschreibungen

Auch bei Formularfeldern ist es wichtig, ihnen mittels eines Label-Elements einen Namen zu geben. Das folgende Eingabefeld hat ein Label und ist damit barrierefrei.

  • 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)
Formularfeld mit dem Namen "Other" in der Barrierefreiheit-Anzeige (Screenshot: Christian Heilmann)

Dieses hat keins, daher zeigt das Inspect-Tool an, dass der Name fehlt.

  • 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)
Formularfeld ohne Namen "Other" in der Barrierefreiheit-Anzeige (Screenshot: Christian Heilmann)

Ein einfacher Test, um herauszufinden, ob ein Formularfeld mit einem Label verbunden ist, besteht darin, auf den Text zu klicken. Wenn das Label passend mit dem Feld verbunden ist, wird dadurch das Eingabefeld fokussiert. Das ist gerade bei kleinen Formularelementen sehr praktisch.

Automatische Problemerkennung mit dem Probleme-Werkzeug

Das Inspect-Tool ist ein praktisches Werkzeug, um eine Seite testen. Allerdings kann kann das ziemlich lange dauern. Viele Probleme kann der Browser auch automatisch erkennen und als Abarbeitungsliste anbieten. Dafür gibt es das Probleme-Werkzeug, das auflistet, was mit dem offenen Webprodukt falsch läuft. Das Probleme-Werkzeug erklärt vieles, aber in diesem Fall hier interessiert uns nur die Barrierefreiheit.

  • 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)
Das Probleme Werkzeug (Screenshot: Christian Heilmann)

Leider werden die Probleme derzeit nur auf Englisch erklärt, aber es wird daran gearbeitet, diese auch auf Deutsch zur Verfügung zu stellen.

Wenn man die Knöpfe mit den Pfeilen im Bereich Barrierefreiheit anklickt, bekommt man Erklärungen, warum etwas ein Problem und welches Element betroffen ist sowie Verknüpfungen zu noch detaillierteren Informationen.

  • 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)
Das Probleme-Werkzeug mit Informationen, welche Bilder keine Textalternativen haben (Screenshot: Christian Heilmann)

Es gibt auch eine Möglichkeit, Kontrastprobleme in dem Werkzeug anzuzeigen. Da sich das allerdings negativ auf die Leistung der Entwicklerwerkzeuge auswirken kann, ist diese Option derzeit noch ein Experiment. Wenn man das Zahnrad anklickt, kann man das Experiment anschalten. Der Name ist Enable automatic contrast issue reporting via the Issues panel.

  • 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 Experimente-Liste der Entwicklerwerkzeuge in Edge (Screenshot: Christian Heilmann)

Nach dem Einschalten und einem Neustart der Entwicklerwerkzeuge wird nun auch eine Liste der Elemente angezeigt, die nicht genug Kontrast haben.

  • 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)
Kontrast Report im Probleme-Werkzeug (Screenshot: Christian Heilmann)

Wenn man auf die Elementverlinkungen klickt, kommt man automatisch zu dem Element.

Im Elemente-Werkzeug werden problematische Elemente ebenfalls herausgehoben. Ähnlich wie bei Word oder anderen Textverarbeitungsprogrammen sind diese unterringelt, und wenn man mit der Maus darüber fährt, bekommt man genauere Informationen, was das Problem ist.

  • 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)
Das Elemente-Werkzeug mit Erklärung, warum das HTML Element eine Sprache definiert haben muss (Screenshot: Christian Heilmann)

Damit wäre dann auch das letzte Problem aus dem Webaim-Report gelöst.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed
 Barrierefreiheit: Eine Million kaputte Webseiten - und wie man sie repariertFehlerbehebung während der Entwicklung 
  1.  
  2. 1
  3. 2
  4. 3
  5.  


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
Franziska Giffey
Deepfake von Klitschko täuscht Berlins Bürgermeisterin

Berlins Regierende Bürgermeisterin Franziska Giffey (SPD) hat per Videokonferenz mit einem Deepfake von Vitali Klitschko gesprochen. Der Betrug flog auf.

Franziska Giffey: Deepfake von Klitschko täuscht Berlins Bürgermeisterin
Artikel
  1. Mond: US-Sonde findet Einschlagstelle des unbekannten Raketenteils
    Mond
    US-Sonde findet Einschlagstelle des unbekannten Raketenteils

    Die Nasa hat die Stelle auf dem Mond gefunden, wo im März ein noch unidentifiziertes Raketenteil abgestürzt ist. Der Krater ist überraschend groß.

  2. Datenpanne: IT-Mitarbeiter verliert USB-Stick mit Meldedaten einer Stadt
    Datenpanne
    IT-Mitarbeiter verliert USB-Stick mit Meldedaten einer Stadt

    Die Tasche mit dem USB-Stick wurde über ein in ihr ebenfalls enthaltenes Smartphone geortet und gefunden.

  3. Logistik: Post will mit Solarschiff Pakete in Berlin verteilen
    Logistik
    Post will mit Solarschiff Pakete in Berlin verteilen

    Die Post will Pakettransporte von der Straße aufs Wasser verlagern. Das erste der Schiffe wird mit Solarstrom betrieben. In Zukunft sollen sie autonom fahren.

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 • MSI 323CQRDE (WQHD, 165 Hz) 399€ • LG OLED 48C17LB 919€ • Samsung 980 PRO (PS5-komp.) 2 TB 234,45€ • Apple HomePod Mini 84€ • 16.000 Artikel günstiger bei Media Markt • MindStar (u. a. AMD Ryzen 7 5700G 239€, Samsung 970 EVO Plus 250 GB 39€ und Corsair Crystal 680X RGB 159€) [Werbung]
    •  /