Einige Artikel über Barrierefreiheit, die ich kürzlich gespeichert habe

„Gute Nachrichten zu display: contents und Chrome“ — Rachel Andrew merkt an, dass die Barrierefreiheitsgefahr der Verwendung von display: contents; in Chrome behoben ist. Das Problem war, dass man zum Beispiel ein übergeordnetes Div hatte, das als Grid angeordnet ist, und darin eine <ul> mit <li>-Elementen, und man wollte, dass die <li>-Elemente an diesem selben übergeordneten Grid teilnehmen. Wir haben Subgrid, aber das ist nicht wirklich dasselbe. Was man will, ist einfach so zu tun, als ob die <ul> gar nicht da wäre und die <li>-Elemente wie alles andere im Grid hängen könnten. Das Problem war, dass, wenn man das tat, man die semantischen Informationen der Liste auswischte. Aber nicht mehr!
„Grid, Content-Neuanordnung und Barrierefreiheit“ — Wo wir gerade bei Grids und Barrierefreiheit sind, hier ist wieder Rachel, die uns (anhand dieser Folien) zeigt, wie leicht es mit modernen Layout-Techniken ist, die Quellreihenfolge und die Anzeige-Reihenfolge von Inhalten stark voneinander abweichen zu lassen. Derzeit besteht die Lösung im Wesentlichen darin, dies nicht zu tun, aber die Zukunft könnte eine Möglichkeit für Browser bieten, die Tabulatorreihenfolge visuell sinnvoll zu aktualisieren, wenn man das Layout drastisch ändert.
„Die nützlichsten Werkzeuge und Techniken für Barrierefreiheitstests“ — Artem Sapegin listet einige gute auf, wie eslint-plugin-jsx-a11y, storybook-addon-a11y, cypress-axe, Contrast-App, Spectrum-Browsererweiterung und… die Verwendung der Tabulatortaste (lolz).
ButtonBuddy — Ein Werkzeug von Stephanie Eckles, das hilft, CSS für Schaltflächen zu generieren. Der eigentliche Sinn dahinter ist jedoch, Farben als benutzerdefinierte Eigenschaften zu liefern, die die Richtlinien für Farbkontraste erfüllen.
„Sind Ihre Ankerlinks barrierefrei?“ — Amber Wilson geht fünf Iterationen eines Ankerlinks in/bei einer Kopfzeile durch, bevor sie zu einem guten gelangt, und selbst dann gibt es noch Fragen zu klären.
„Setzen Sie keine pointer-events: none auf Formular-Labels“ — Ich bin ein wenig schockiert, dass jemand das überhaupt tun würde, aber es stellt sich heraus, dass es vom „Floating Label“-Muster von Material Design stammt. Ich halte dieses Muster für so albern. Es spart eigentlich keinen Platz, da man den Platz, auf dem das Label schwebt, sowieso braucht. Gosh.
„Barrierefreie Text-Labels für alle“ — Sara Soueidan testet echte Barrierefreiheitssoftware und wie sie gängige interaktive Elemente darstellt. Zum Beispiel ist ein Link „Mehr lesen“ nicht sehr nützlich (mehr lesen *was*?), und „Zum Warenkorb hinzufügen“ ist allein nicht sehr nützlich (was zum Warenkorb hinzufügen?). Man kann zum Beispiel Produktnamen zu diesen „Zum Warenkorb hinzufügen“-Schaltflächen hinzufügen, aber tun Sie es nicht *in der Mitte* der Schaltfläche, da dies Dinge kaputt machen kann. Fügen Sie den zusätzlichen Text *am Ende* hinzu.

Kommentare