15 Dinge zur Verbesserung der Barrierefreiheit Ihrer Website

Avatar of Chris Coyier
Chris Coyier am

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

Dies ist eine wirklich großartige Liste von Bruce. Es gibt viel direkt umsetzbares Zeug hier. Leiten Sie es an Ihr Team weiter und machen Sie es zu etwas, das Sie alle gemeinsam durchgehen.

Hier ist eine kleine Sache, die mich dazu gebracht hat, es endlich zu beheben...

Die meisten Screenreader erlauben dem Benutzer, schnell eine Liste von Links auf einer Seite anzuzeigen [..] Wenn jedoch jeder Link den Text "Klicken Sie hier" oder "Mehr lesen" hat, ohne etwas anderes, um ihn zu unterscheiden, ist das nutzlos. Die einfachste Lösung ist einfach, eindeutigen Linktext zu schreiben, aber wenn das nicht möglich ist, können Sie den Linktext für assistierende Technologien überschreiben, indem Sie ein eindeutiges aria-label-Attribut für jeden Link verwenden.

Ich hatte Links wie diese hier auf CSS-Tricks. Einige davon werden automatisch von WordPress selbst erstellt, nicht etwas, das ich manuell in ein Template programmiert habe. Wenn Sie the_excerpt eines Beitrags anzeigen, erhalten Sie automatisch einen "Weiterlesen"-Link, und abgesehen davon, dass Sie sich mit einigen Filtern die Hände schmutzig machen, haben Sie nicht viel Kontrolle darüber.

DevTools showing the DOM of a "read more" link with no context.

Glücklicherweise verwende ich bereits ein cooles Plugin namens Advanced Excerpt. Ich habe die Einstellungen durchsucht, um zu sehen, ob ich etwas tun könnte, um den Beitragstitel irgendwie einzufügen. Schauen Sie mal!

A setting for Advanced Excerpt that does screen reader links.

Diese screen-reader-text Klasse ist genau das, was ich bereits für solche Dinge verwendet habe, also war es eine Ein-Klick-Lösung!

Viel schönerer DOM jetzt für diese Links

Direkter Link →