Ehrlich gesagt, ich war ein wenig überfordert, als ich mich hinsetzte, um diesen Artikel zu schreiben. So viele Dinge kamen mir sofort in den Sinn – zusätzliche Divs entfernen; Links für URLs verwenden, Buttons für Ereignisse und Aktionen; semantisches HTML anstelle von Divs überall verwenden; Variable Fonts verwenden … die Liste ging weiter und weiter. Aber schließlich habe ich mich auf eine einzige, praktische Sache geeinigt, die Leute tun können, um ihre Website besser zu machen.
Wenn ich jedoch von Reichweite spreche, meine ich nicht nur Menschen, die blind sind und assistierende Technologien – wie Bildschirmlesegeräte – nutzen, um ihre Bankgeschäfte zu erledigen oder ihre Stromrechnungen zu bezahlen. Ich spreche nicht nur von Menschen, die taub sind und Untertitel für Videos benötigen. Ich spreche nicht nur von Menschen, die farbenblind sind und einen ausreichenden Farbkontrast benötigen, um zu sehen, was auf der Seite ist. Sicher, hier gehen unsere Gedanken automatisch hin, wenn wir an Barrierefreiheit denken, aber ich möchte, dass wir darüber hinaus denken.
Es geht weder nur um eine Behinderung noch um das Vorhandensein einer Behinderung
Das ist eine veraltete Denkweise – und zu reduktionistisch für die komplexe Landschaft der heutigen Welt. Denken Sie darüber nach: Wer greift nur dann auf eine Website zu, wenn er an seinem Schreibtisch in einem gut beleuchteten Bereich sitzt, Kopfhörer mit Geräuschunterdrückung trägt und auf ein schönes Retina-Display starrt? Eine sehr kleine Gruppe von Menschen, und ironischerweise meist nur die Leute, die Websites für alle anderen erstellen. Kein sehr realistischer Ansatz, wenn unsere Zielgruppe global ist, oder? Stattdessen sollten wir über die Fülle von Möglichkeiten nachdenken, wie jemand mit den von uns erstellten Websites interagieren könnte.
Denken wir über die verschiedenen Arten von Geräten nach, die sie haben, wie ihre körperliche Verfassung in diesem Moment sein mag und vielleicht sogar, wie ihre physische Umgebung aussieht. Stellen wir sicher, dass wir so viele potenzielle Benutzer wie möglich erreichen – unabhängig davon, welches Gerät sie verwenden, unabhängig davon, wo auf der Welt sie sich befinden. So können wir unsere eigenen mentalen Barrieren durchbrechen und wirklich darüber nachdenken, was wir bereitstellen müssen, um die Anzahl der Benutzer zu erhöhen, die wir erreichen können.
Machen Sie die Dinge einfacher
Erleichtern Sie es den Menschen, Ihre Website zu sehen, wenn sie auf ihren Mobiltelefonen bei hellem Sonnenschein sind. Wie können wir das tun? Eine Möglichkeit besteht darin, sicherzustellen, dass unsere Websites einen ausreichenden Farbkontrast aufweisen, was wir mit den vielen verfügbaren Online-Farbkontrastprüfern tun können. Erleichtern Sie es den Menschen, auf die benötigten Informationen zuzugreifen, wenn ihre Bandbreite gering ist, indem Sie weniger JavaScript ausliefern. Erleichtern Sie es der Person, die ihre Kopfhörer vergessen hat, Ihr Video an einem öffentlichen Ort anzusehen, indem Sie Untertitel bereitstellen. Platzieren Sie die Kontaktinformationen an einer konsistenten, leicht zu findenden Stelle, damit der gestresste Benutzer jemanden erreichen kann, ohne seine Situation noch weiter zu stressen. Erleichtern Sie es der Person, die einen Welpen in einer Hand und ein Mobiltelefon in der anderen hält, erfolgreich mit Links und Buttons zu interagieren, indem Sie die Größe der interaktiven Bereiche auf der gesamten Website erhöhen.
Wenn Sie ein UX- oder visueller Designer sind, inspiriert Sie das vielleicht, einige neue Perspektiven für Ihre bestehenden Benutzer-Personas zu entwickeln. Außerdem ist es einfacher, Leute zu überzeugen, wenn Ihre Persona-Beispiele Welpen enthalten. Es ist nicht meine Regel; es funktioniert einfach so. Ich persönlich würde eher zu Kätzchen tendieren … vielleicht Welpen und Kätzchen? Aber ich schweife ab.
Wenn Sie Entwickler sind, denken Sie vielleicht nicht, dass Sie Einfluss auf all diese Dinge haben oder sie kontrollieren können. Als Entwickler stimme ich dieser Denkweise nicht wirklich zu; aber zum Zweck des erfolgreichen Schreibens dieses Artikels tun wir so, als ob. Betrachten wir drei Dinge, die Entwickler tun können, um die Reichweite der Websites, an denen sie arbeiten, zu erhöhen.
Bringen Sie alle Inhalte Ihrer Seite in Landmark-Regionen unter
Aus praktischer Sicht bedeutet dies am häufigsten header, main, aside und footer, aber es gibt auch einige andere – lesen Sie sie in der ARIA-Spezifikation für die vollständige Liste. Was ist der Grund dafür? Nun, eine der praktischen Möglichkeiten, wie Screenreader-Benutzer auf der Seite navigieren, ist – Sie haben es erraten – über Landmark-Regionen. Die WAI-ARIA-Website des W3C hat ein tolles Beispiel, wie verschiedene Arten von Screenreadern diese Funktion nutzen. Schauen Sie es sich unbedingt an und sehen Sie, wie hilfreich es wirklich ist! Wenn Sie mit Seitenvorlagen arbeiten, kann es einfacher denn je sein, sicherzustellen, dass die primäre Vorlage korrekt eingerichtet ist. Dies ist definitiv ein Bereich, in dem Entwickler es einigen Benutzern leichter machen können, die von ihnen erstellten Websites erfolgreich und einfach zu nutzen.
Fügen Sie automatisierte Prüfungen hinzu
Wir stehen noch am Anfang, was die Anzahl der Barrierefreiheitsprobleme angeht, die wir automatisiert prüfen können, und Sie können immer noch eine Website haben, die bestehende automatisierte Prüfungen vollständig besteht und trotzdem unzugänglich ist. Dennoch lohnt es sich, dies jetzt in Ihren automatisierten Build-Prozess zu integrieren. Der Bonus ist, dass Sie Ihren Code verbessern können, sobald neue automatisierte Prüfungen verfügbar sind, was Ihnen Zeit gibt, sich an die bestehenden Prüfungen zu gewöhnen. Verwenden Sie einen Template-Linter für statische Prüfungen. Einige IDE-Erweiterungen können Ihnen während der Codierung Echtzeit-Feedback geben! Automatisierte Tests können für dynamische Code-Prüfungen verwendet werden.
Fügen Sie Barrierefreiheit zu Ihrer mentalen Checkliste hinzu
Nun, fügen Sie es einer physischen Checkliste hinzu, bis es in Ihre mentale Checkliste integriert ist. So oder so, holen Sie es hinein. Hier sind einige Ideen, um Ihnen den Einstieg zu erleichtern
Fragen Sie nach Barrierefreiheit, wenn Sie keine Anmerkungen zu den Designs oder Funktionsspezifikationen erhalten, die Sie erhalten.
Überprüfen Sie die Tastaturfokusreihenfolge, wenn Sie die Website lokal oder in einem Container hochgefahren haben; TAB Sie durch und stellen Sie sicher, dass Sie alle interaktiven Elemente erreichen können.
Überprüfen Sie Pull-Requests mit Blick auf Barrierefreiheit. Wenn jemand einen Link verwendet hat, wo er einen Button hätte verwenden sollen – oder schlimmer noch, er hat ein Div ohne Tastaturunterstützung verwendet –, geben Sie dieses Feedback. Dies kann bedeuten, dass Sie sich selbst daran erinnern (oder lernen, wenn Sie es nie gelernt haben), welche nativen Browserunterstützungen für interaktive Elemente bereits existieren.
Bleiben Sie mitfühlend und neugierig
Unabhängig von Ihrer Rolle sollten Sie Mitgefühl für die Benutzer haben, die Sie bereits haben. Seien Sie neugierig auf die Art von Benutzern, die Sie vielleicht noch nicht haben … noch nicht. Seien Sie neugierig darauf, wie Sie Ihre Reichweite erhöhen können, indem Sie über den Tellerrand hinausdenken von „jeder macht es so“. Wir sind diejenigen, die das Web und seine Grenzen geschaffen haben, und wir sind diejenigen, die es an die Orte bringen werden, an die es als nächstes gehen kann. Denken Sie über die Maschine hinaus, auf der Sie entwickeln, und seien Sie neugierig auf die Möglichkeiten einer inklusiveren Erfahrung, die mehr Menschen erreicht.
Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.
Toller Artikel, Melanie. Sie haben den Nagel auf den Kopf getroffen, als Sie „die Dinge für alle in jeder Situation einfacher machen“ erwähnten.
Und danke für die 3 einfachen Tipps für Entwickler.
Ein automatisiertes Testtool, das sich für mich in meinem aktuellen Job als unschätzbar erwiesen hat, ist Storybook für HTML-Komponenten. Ich habe eine Benutzeroberfläche ohne Frontend-Frameworks erstellt, aber Storybook unterstützt reine HTML-Komponenten vollständig. Das bedeutet, dass es einfach ist, die Barrierefreiheit im Autorenn-Stadium mit Storybooks integriertem Axecore-Checker zu testen.
Toller Artikel, Melanie. Sie haben den Nagel auf den Kopf getroffen, als Sie „die Dinge für alle in jeder Situation einfacher machen“ erwähnten.
Und danke für die 3 einfachen Tipps für Entwickler.
Ein automatisiertes Testtool, das sich für mich in meinem aktuellen Job als unschätzbar erwiesen hat, ist Storybook für HTML-Komponenten. Ich habe eine Benutzeroberfläche ohne Frontend-Frameworks erstellt, aber Storybook unterstützt reine HTML-Komponenten vollständig. Das bedeutet, dass es einfach ist, die Barrierefreiheit im Autorenn-Stadium mit Storybooks integriertem Axecore-Checker zu testen.