Sie haben also viel über etwas gehört, das sich Barrierefreiheit nennt. Vielleicht haben Sie sogar schon von Leuten gehört, die große Unternehmen verklagen, weil sie unzugängliche Dienste anbieten. Aber wissen Sie genau, was Barrierefreiheit bedeutet?
Glücklicherweise ist Barrierefreiheit nicht allzu schwer zu verstehen oder zu implementieren, sobald Sie sich dazu verpflichtet haben. Sobald Sie gelernt haben, was Barrierefreiheit ist, können Sie diese Theorie in die Praxis umsetzen, indem Sie barrierefreie Vue.js-Apps schreiben.
Was ist Barrierefreiheit?
Barrierefreiheit ist ein beliebtes Schlagwort im Web, aber was bedeutet es genau? Es stellt sich heraus, dass der Name ziemlich beschreibend ist. Barrierefreiheit ist einfach ein Maß dafür, wie benutzerfreundlich eine Webanwendung für alle Arten von Menschen ist.
Nicht jeder erlebt das Internet auf die gleiche Weise. Manche Menschen haben Beeinträchtigungen, die ihr Hör- oder Sehvermögen beeinträchtigen können. Einige haben keinen Zugang zu moderner Hardware oder Highspeed-Internet, und die Menschen müssen das Internet oft unter nicht idealen Bedingungen nutzen. Bei der Barrierefreiheit geht es darum, sicherzustellen, dass all diese Personen eine Webanwendung weiterhin so reibungslos wie möglich nutzen können.
Warum ist Barrierefreiheit wichtig?
Zugänglichkeit ist wichtig, denn wenn eine Anwendung in hohem Maße zugänglich ist, kann sie so vielen Menschen wie möglich dienen. Wenn jemand einen Dienst oder Informationen auf einer Website bereitstellt, besteht sein Ziel darin, dass andere Personen diesen Dienst nutzen oder diese Informationen lesen.
Die Optimierung der Barrierefreiheit stellt sicher, dass möglichst wenige Personen die Webanwendung nicht nutzen können. Darüber hinaus werden besser zugängliche Web-Apps in den Suchergebnissen im Allgemeinen höher eingestuft. Dadurch können noch mehr Menschen zugänglichere Webanwendungen finden und nutzen.
Häufige Entwicklerfehler, die die Zugänglichkeit beeinträchtigen
Viele Webanwendungen sind weniger zugänglich, als sie sein könnten. Dies ist normalerweise das Ergebnis von Fehlern seitens derer, die sie gebaut haben. Einige häufige Fehler bei der Barrierefreiheit, die Entwickler beim Erstellen von Apps machen, sind:
Verwenden von nicht zugänglichen Bibliotheken
Sie können sich auf Bibliotheken von Drittanbietern verlassen, um Zeit und Mühe bei der Entwicklung Ihrer Apps zu sparen. Leider nehmen nicht alle Bibliotheken Barrierefreiheit ernst, und es kann schwierig sein, die guten zu identifizieren. Es ist leicht, auf diese Weise versehentlich die Zugänglichkeit Ihrer Anwendungen zu verringern.
Vernachlässigung von semantischem HTML beim Erstellen von Komponenten
Semantisches HTML ist HTML, dessen Bedeutung und Struktur korrekt sind. Jedes HTML-Tag hat einen inhärenten Zweck, den Hilfstechnologien verwenden, um auf die Bedeutung seines Inhalts zu schließen. Das Header-Tag markiert beispielsweise den Header einer Website. Ein Screenreader sollte in der Lage sein anzukündigen, dass alles innerhalb eines Header-Tags ein Website-Header ist.
Leider hindert Sie nichts daran, ein Tag für den falschen Zweck zu verwenden. Ein weiteres häufiges Beispiel ist die Verwendung eines Schaltflächen-Tags, das sich wie ein Link verhält oder umgekehrt.
Das Schreiben von HTML auf diese Weise schadet der Zugänglichkeit, da Hilfstechnologien den Zweck eines HTML-Elements nicht mehr sicher kennen. Dies kann am Ende zu verwirrenden oder frustrierenden Ergebnissen für die Benutzer der Technologie führen. Für maximale Zugänglichkeit sollten Sie immer semantisches HTML schreiben, auch wenn es etwas mehr Arbeit bedeutet.
Nicht auf Barrierefreiheit testen
Das Erstellen einer Web-App kann oft eine mühsame Aufgabe mit anspruchsvollen Fristen sein. Zwischen der Eile, Funktionen fertigzustellen, und der Last, andere Aspekte der Software zu testen, tritt das Testen der Barrierefreiheit in den Hintergrund. Sie könnten versucht sein, eine Anwendung für die Produktion bereitzustellen, bevor Sie sie auf Barrierefreiheitsprobleme getestet haben.
Wieso den? Das Testen erfordert Zeit und kann umfangreiche Änderungen am Code der Anwendung erfordern. Aber Testen einer Webanwendung ist ein unverzichtbarer Bestandteil des Entwicklungsprozesses. Sie sollten die Zugänglichkeit Ihrer Anwendung genauso gründlich testen wie jeden anderen Aspekt.
Zum Glück gibt es Tools, die helfen, diese Probleme zu lösen. Die folgenden fünf Tools können Ihnen dabei helfen, zugänglichere Vue.js-Apps zu schreiben:
WAVE ist eine Sammlung von Tools, mit denen Entwickler ihre Apps automatisch auf Barrierefreiheitsprobleme testen können. Obwohl WAVE kein Ersatz für Endbenutzertests ist, kann es Ihnen dennoch dabei helfen, viele Barrierefreiheitsprobleme zu erkennen.
WAVE stellt auf seiner Website ein Online-Testtool zur Verfügung. Es bietet auch Browsererweiterungen und mehrere andere Tools, die beim Testen der Barrierefreiheit für viele Arten von Web-Apps helfen.
Viele der Hinweise, die Web-Apps verwenden, um Aktivitäten zu kommunizieren, wie Fortschrittsbalken und Ladeindikatoren, sind rein visuell. Menschen mit Sehbehinderungen oder Benutzer von Bildschirmlesegeräten können sie nicht wahrnehmen.
Vue-announcer ist eine Bibliothek, mit der Sie Änderungen in Ihren Vue.js-Apps so ankündigen können, dass jeder darauf zugreifen kann.
Vue-skip-to ist eine Bibliothek, die erstellt wurde, damit Personen, die einen Bildschirmleser verwenden, direkt zum Hauptinhalt einer Vue.js-Anwendung springen können. Dies ist nützlich, da viele Web-Apps Navigationslinks und andere Elemente vor dem Hauptinhalt haben. Diese können von einigen Benutzern leicht übersprungen werden, können jedoch mühsam und frustrierend sein, wenn sie mit einem Screenreader verwendet werden.
ESLint ist ein Tool, das Ihnen hilft, besseres JavaScript zu schreiben, indem es Ihren Code analysiert und auf Fehler überprüft.
Dieses Tool ist ein ESLint-Plug-In, mit dem Sie sicherstellen können, dass die Struktur Ihrer Vue.js-Komponenten den Zugänglichkeitsregeln entspricht.
Nach der Installation analysiert dieses Plugin alle Vue.js-Dateien und weist auf problematischen Code hin. Sie können dann beim Schreiben Ihrer Apps die Zugänglichkeit maximieren, anstatt den Code nach der Testphase ändern zu müssen.
Eine große Quelle von Barrierefreiheitsproblemen in Apps ist die Verwendung von nicht zugänglichen Komponentenbibliotheken. Vuetensils ist eine Bibliothek von Vue.js-Komponenten.
Diese Komponenten sind für minimale Größe, maximale Zugänglichkeit, Benutzerfreundlichkeit und einfaches Styling optimiert. Sie können Zeit sparen und diese vorgefertigten Komponenten verwenden, ohne die Zugänglichkeit Ihrer Anwendungen zu beeinträchtigen.
Barrierefreiheit in Vue.js ist einfach
Bei der Barrierefreiheit geht es darum sicherzustellen, dass jeder Ihre Anwendung in jedem Kontext verwenden kann. Die Maximierung der Zugänglichkeit ist wichtig, um sicherzustellen, dass eine Anwendung von so vielen Personen wie möglich verwendet werden kann.
Entwickler machen beim Erstellen ihrer Apps häufig häufige, aber vermeidbare Barrierefreiheitsfehler. Häufige Probleme sind das Nicht-Testen und Schreiben von nicht-semantischem HTML. Aber mit Hilfe einiger Tools ist es einfacher, leicht zugängliche Vue.js-Apps zu schreiben.
