Die Kunst des Labelings

Avatar of Robin Rendle
Robin Rendle am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

In diesem Video von Rob Dodson gibt es viele nützliche Tricks, bei denen er sich auf Barrierefreiheits-Tricks in den Chrome DevTools konzentriert. Ein paar Anmerkungen

  • Chrome DevTools verfügt über eine experimentelle Funktion zur Barrierefreiheitstests, die Sie aktivieren können, indem Sie zu chrome://flags/ gehen und diese in den DevTools-Einstellungen einschalten.
  • Wenn Sie ein <input type="checkbox"> in ein <label> einschließen, erhält die Eingabe einen Namen, der dem Text im Label entspricht, auch ohne for-Attribut.
  • Das Attribut aria-labelledby überschreibt den Namen des Elements mit dem Text aus einem anderen Element, auf das per ID verwiesen wird. Es kann sogar einen Namen aus mehreren Elementen zusammensetzen, einschließlich sich selbst.
  • Wenn Sie einem Element tabindex='0' hinzufügen, wird es fokussierbar.

Direkter Link →