JavaScript mit Blick auf die Zugänglichkeit schreiben

Tipps zur Verbesserung der Zugänglichkeit von JavaScript -Komponenten

Dieser Artikel gibt einige Tipps zur Verbesserung der Zugänglichkeit von JavaScript -Komponenten und bietet Benutzern immer bessere Möglichkeiten, mit Websites oder Webanwendungen zu interagieren.

Dieser Artikel wurde ursprünglich auf Medium

veröffentlicht

In meinem ersten Artikel habe ich mit dem Schreiben von HTML zugänglicher HTML erklärt, warum und wie ich mit der Konzentration auf die Web -Barrierefreiheit von Webs zustimmen und einige Tipps zur Verbesserung des Taggings mitgeteilt habe, um eine Website zugänglicher zu machen. Einige dieser Tipps sind sehr einfach, aber immer noch wertvoll. Das alles kommt auf zwei der wichtigsten ungeschriebenen Regeln in der Front-End-Entwicklung an: Erfahren Sie die Grundlagen und verbringen Sie genügend Zeit, um HTML zu planen und zu schreiben. Das semantische Markup wird Ihnen und Ihren Benutzern eindeutig zugute kommen.

Zum Glück ist HTML nicht die einzige Sprache, die wir Websites erstellen, aber je komplexer die Sprache ist, desto wahrscheinlicher ist es, dass sie Fehler machen, und JavaScript kann sehr komplex werden. Wenn wir uns darauf konzentrieren, ob der Code funktioniert, können Benutzer, die andere Eingabegeräte als die Maus oder das Touchpad verwenden, wie Tastatur- oder Bildschirmleser -Benutzer einfach vergessen. In der zweiten von diesem vier Artikel über die Zugänglichkeit von Webs habe ich einige Tipps gesammelt, was ich beim Schreiben von JavaScript beachten soll und wie JavaScript -Komponenten zugänglicher werden können.

Schlüsselpunkte

• JavaScript kann verwendet werden, um die Zugänglichkeit einer Website zu verbessern, anstatt sie zu behindern. Es kann ein breiteres Publikum ermöglichen, auf Inhalte zuzugreifen, einschließlich derjenigen, die ältere Browser, langsame Internetverbindungen oder strenge Sicherheitsbeschränkungen verwenden.
• Focus Management ist entscheidend für die Zugänglichkeit der Website. Die Website sollte in der Lage sein, durch die Tastatur zu navigieren, damit Benutzer in der Reihenfolge des Dokumentobjektmodells (DOM) von einem fokussierbaren Element zu einem anderen fokussierbaren Element wechseln können.
• Verwenden des richtigen HTML -Elements, z. B. die Verwendung des <button></button> -Elements, wenn Sie eine Taste benötigen, ist für die Zugänglichkeit von entscheidender Bedeutung. Der Missbrauch von HTML -Elementen kann zu Problemen für Tastatur- und Bildschirmleser -Benutzer führen.
• Wenn sich der Inhalt dynamisch ändert, muss der Benutzer des Bildschirmlesers informiert werden. Dies kann durch die Verwendung von ARIA-Echtzeitzonen erreicht werden, mit denen Bildschirmleser inhaltliche Updates ankündigen können.
• Entwickler müssen nicht erraten, welche Nutzungsmuster ihre Komponenten für die Zugänglichkeit bieten müssen. Ressourcen wie die WAI-ARIA-Autoring-Praktiken 1.1 können wertvolle Erkenntnisse liefern.

JavaScript ist kein Feind

Bevor ich meine Tipps lese, möchte ich auf den wichtigen Punkt hinweisen. Das Erstellen von zugänglichen Websites bedeutet nicht, dass Sie entscheiden müssen, ob JavaScript verwendet werden soll oder nicht. Beim Barrierefreiheit geht es darum, Inhalte so viele Personen wie möglich zu erhalten. Dazu gehören auch Benutzer, die alte Browser und Computer verwenden, langsame Internetverbindungen, strenge Sicherheitsbeschränkungen (z. B. ohne JavaScript) usw. Die Erfahrung ist in Situationen wie JavaScript möglicherweise nicht ideal oder lädt nicht zu lange, aber sie ist immer noch gut genug, wenn die Website zugänglich und verfügbar ist.

Wenn JavaScript ausführbar ist, kann es sogar zur Verbesserung der Zugänglichkeit verwendet werden. Sara Soueidan schrieb über ihre Erfahrung, um Tooltip -Komponenten beim Erstellen eines vollständig zugänglichen Hilfstooltip zu erstellen ... härter als ich dachte. Sie erklärt, warum „jede javaScript-freie Lösung einen sehr schlechten Nachteil mit sich bringt, der sich negativ auf die Benutzererfahrung auswirkt“ und warum JavaScript für die Zugänglichkeit wichtig ist.

Marco Zehe in seinem Artikel "JavaScript ist nicht der Feind der Zugänglichkeit! 》 Schreibt mehr über JavaScript und Barrierefreiheit. Ich empfehle Ihnen dringend, seinen Artikel zu lesen.

Aber das ist alles für das einleitende Gespräch! Fangen wir an ...

Gutes Fokusmanagement ist essentiell

Es ist sehr wichtig, sicherzustellen, dass unsere Website über die Tastatur navigiert werden kann. Viele Benutzer verlassen sich beim Durchsuchen von Webseiten auf die Tastatur. Dazu gehören Menschen mit Bewegungsstörungen, Blinden und Menschen, die aus irgendeinem Grund keine Maus oder Touchpad verwenden können.

Navigieren auf der Website über die Tastatur bedeutet, von einem fokussierbaren Element zu einem anderen fokussierbaren Element in DOM -Reihenfolge zu springen. Dies wird normalerweise durch die Verwendung der Registerkarte oder verschieben Registerkarte > erreicht. Zu den fokussierbaren Elementen gehören Links, Schaltflächen und Formularelemente. Sie können mit den Tasten eingeben und manchmal mit der -RaceBar eingeben werden. Sie haben sehr nützliche Standardfunktionen, indem sie auf unterschiedliche Weise fokussiert und wählbar sind. Daher ist es sinnvoll, die richtigen semantischen Elemente zu verwenden und HTML in logischer Reihenfolge zu schreiben.

Elemente wie

, <div> oder <code><span></span> können nicht standardmäßig fokussiert werden. Wir verwenden diese Tags häufig, um benutzerdefinierte Komponenten von JavaScript zu erstellen, was für Tastaturbenutzer problematisch sein kann. <div> <p> Machen Sie die nicht fokussierbaren Elemente fokussierbar <strong> </strong> </p> Sie können das nicht fokussierbare Element fokussierbar machen, indem Sie <p> Attribute und ganzzahlige Werte hinzufügen. Wenn der Wert auf 0 gesetzt ist, wird das Element über die Tastatur fokusbar und zugänglich. Wenn der Wert negativ ist, ist das Element programmatisch fokussiert (z. B. mit JavaScript), aber nicht über die Tastatur zugänglich. Sie können auch Werte mehr als 0 verwenden, dies ändert jedoch die natürliche Registerkartenreihenfolge und wird als Anti-Muster angesehen. <code>tabindex

<h2 id="一个可聚焦的标题">一个可聚焦的标题</h2>

Wenn Sie mehr über

erfahren möchten, schauen Sie sich Rob Dodsons A11Ycasts -Episode "Control Focus mit Tabindex" an. tabindex

Fokuselemente mit JavaScript

Auch wenn die Elemente fokussiert sind, sind sie manchmal nicht in der richtigen DOM -Reihenfolge. Um dies zu veranschaulichen, habe ich eine einfache Modal -Fensterkomponente (Demo und bearbeitbarer Stift) in HTML, CSS und JS erstellt.

Wenn Sie die Registerkarte verwenden , um zur Taste zu springen und einzugeben , wird ein modales Fenster angezeigt. Wenn Sie erneut auf die Registerkarte drücken, wird der Fokus auf den nächsten Link springen, der unter dem Modalfenster visuell angezeigt wird. Das erwartete Verhalten sollte das nächste fokussierte Element im Modalfenster sein. Dies ist jedoch nicht der Fall, da die Elemente in DOM -Reihenfolge fokussiert sind und das Modalfenster am Ende des Dokuments befindet. Sie können den tatsächlichen Effekt in dieser Bildschirmaufzeichnung sehen.

Um dieses Problem zu lösen, müssen Sie das Modalfenster fokussierbar machen und es dann mit JavaScript fokussieren.

<h2 id="一个可聚焦的标题">一个可聚焦的标题</h2>

Sie können dies in den aktualisierten Beispielen (Demo und bearbeitbarem Stift) sehen, indem Sie die Registerkarte auf die Taste wechseln. Drücken Sie

Eingeben und drücken Sie erneut die Registerkarte. Sie werden sehen, dass das modale Fenster selbst inzwischen den Fokus gewonnen hat.

Das ist gut, aber hier gibt es noch zwei Probleme.

Wenn Sie das Modalfenster schließen, indem Sie

ESC drücken, geht der Fokus verloren. Im Idealfall sollte der Fokus zur Schaltfläche zurückspringen, bevor Sie das Modalfenster geöffnet haben. Um dies zu erreichen, müssen Sie das letzte fokussierte Element in einer Variablen speichern.

Wir können

verwenden, um das Element zu erhalten, das derzeit in den Fokus kommt. document.activeElement

function showModal() {
  var modal = document.getElementById('modal2');
  modal.focus();
  ...
}

Jetzt, da Sie einen Verweis auf die Schaltfläche haben, können Sie sie erneut fokussieren, wenn Sie das Modalfenster schließen.

var lastFocusedElement;

function showModal() {
  lastFocusedElement = document.activeElement;

  var modal = document.getElementById(modalID);
  modal.focus();
  ...
}

Ich habe den Code in einem anderen Stift (Demo und bearbeitbarer Stift) aktualisiert. Die Zugänglichkeit ist jetzt viel besser, aber es gibt immer noch Raum für Verbesserungen.

Es wird empfohlen, den Fokus im Modalfenster beim Öffnen des Modalfensters zu halten. Das Modalfenster kann jetzt noch aufgetaucht werden. Ich werde hier nicht auf Details eingehen, aber aus Vollständigkeit habe ich einen vierten Stift mit sogenannten "Tastaturfallen" (Demo und bearbeitbarer Stift) erstellt. Solange das Modalfenster aktiv ist, bleibt der Fokus innerhalb des Modalfensters, wie Sie in dieser Bildschirmaufzeichnung sehen können.

Wenn Sie die ersten und letzten Stifte vergleichen, werden Sie feststellen, dass es nicht viel zusätzlichen Code gibt. Es mag nicht perfekt sein, aber die endgültige Lösung ist viel besser zu verwenden.

Es gibt auch ein Beispiel für den Zugriff auf modale Windows und einen guten Artikel mit dem Titel "Mit Tabindex", geschrieben von Personen bei Google. Wenn Sie mehr über Tastaturtests erfahren möchten, besuchen Sie bitte die Webaim -Website. Sie bieten eine Liste der häufigsten Online -Interaktionen, Standardschlüssel für Interaktionen und andere Informationen, die während des Tests berücksichtigt werden müssen.

Weitere Beispiele für das Fokusmanagement finden Sie in Marcy Suttons Egghead.io Video "Focus Management mit CSS, HTML und JavaScript" oder Rob Dodsons A11Ycasts -Episode "What Is Focus?" 》.

Wenn Sie eine Taste benötigen, verwenden Sie das -Element <button>

Ich habe in meinem ersten Beitrag über Schaltflächen geschrieben, aber offensichtlich verwenden viele Menschen universelle Elemente als Schaltflächen. Daher denke ich, dass es nicht schaden würde, etwas mehr über dieses Thema zu schreiben.

Ich habe einen Stift (Debug -Modus/Stift mit Code) erstellt, um einige Probleme mit der Verwendung von <div> oder <span> als Schaltflächen anstelle von <button> oder <input type="button"> -Elements zu veranschaulichen. Wenn Sie die Seite durchsuchen, werden Sie sich auf die erste Schaltfläche konzentrieren, jedoch nicht auf die zweite Schaltfläche. Der Grund ist natürlich - die erste Taste lautet <button> und die zweite Taste ist <div>. Sie können dieses Problem lösen, indem Sie <div> zu tabindex="0" hinzufügen, was die anfänglich unpassbaren Elemente fokussierbar macht. Aus diesem Grund sind die dritten und vierten Schaltflächen fokussiert, auch wenn sie <div> sind.

<h2 id="一个可聚焦的标题">一个可聚焦的标题</h2>

Auch wenn Sie den Charakter der Taste hinzufügen, ist der "Div-Button" tatsächlich fokussiert, aber es wirkt sich immer noch wie ein <div>. Um dies zu veranschaulichen, habe ich allen .btn Elementen einen einfachen Klick -Ereignis -Handler (Stift) hinzugefügt. Wenn Sie auf die Schaltfläche klicken, wird ein Alarmfeld angezeigt. Wenn Sie jedoch versuchen, dasselbe mit der Taste zu tun ( Eingeben Sie oder SpaceBar ), wird nur die erste Schaltfläche das Ereignis ausgelöst . Sie müssen dem "Div-Button" einen wichtigen Ereignishandler hinzufügen, um das Standard-Taste-Verhalten vollständig zu simulieren, was als unnötiger Overhead zu sein scheint, nicht wahr? Deshalb sollten Sie das <button> Element verwenden, wenn Sie eine Schaltfläche benötigen. Sehen Sie, wie Rob Dodsons A11Ycasts -Episode "Just benutze Button" oder lesen Sie Adrian Rosellis Links, Schaltflächen, Einreichungen und Divs, oh mein Gott ", um weitere Details und Beispiele zu erhalten.

Bildschirmleser -Benutzer müssen benachrichtigt werden, wenn der Inhalt dynamisch ändert

Normalerweise kündigen Bildschirmleser den Inhalt nur an, wenn das Element den Fokus erhält oder wenn der Benutzer die eigenen Navigationsbefehle der Bildschirmleser verwendet. Wenn der Inhalt dynamisch geladen und in das DOM eingefügt wird, kann nur die Sehveränder diese Änderungen bemerken. ARIA-Echtzeitzonen bieten mehrere Lösungen für dieses Problem. Ich werde Ihnen zeigen, wie man es mit einem Beispiel macht.

Angenommen, Sie haben eine Profileinstellungsseite, auf der Sie personenbezogene Daten bearbeiten und speichern können. Wenn die Schaltfläche Speichern klickt, werden die Änderungen gespeichert, ohne die Seite neu zu laden. Eine Warnung benachrichtigt den Benutzer, ob die Änderung erfolgreich ist. Dies kann sofort passieren und einige Zeit dauern. Ich habe ein kurzes Video aufgenommen, um Ihnen zu zeigen, was ich gerade erklärt habe.

Sie können sehen, dass die Operation erfolgreich ist, aber Sie können sie nicht hören. Die Benutzer von Bildschirmleser bemerken die Änderungen nicht, aber es gibt eine einfache Lösung für dieses Problem. Durch das Hinzufügen einer Status- oder Alarmrolle zum Nachrichtenfeld hört der Bildschirmleser Updates im Element an.

function showModal() {
  var modal = document.getElementById('modal2');
  modal.focus();
  ...
}

Wenn sich der Nachrichtentext ändert, wird der neue Text ausgelesen. Sie können sehen und hören, wie es in diesem Video tatsächlich funktioniert, und den Code in diesem Stift sehen.

Behandeln Sie Ihre Benutzer mit freundlicher Genehmigung

Der Unterschied zwischen "Status" und "Alarm" besteht darin, dass "Alarm" den Bildschirmleser unterbricht, wenn er etwas anderes ankündigt. Stattdessen wartet "Status" darauf, dass der Bildschirmleser die Ankündigung abschließt.

Es gibt auch ein Attribut namens aria-live, das drei mögliche Werte erfordern kann: Aus, höflich oder durchsetzungsfähig. Von diesen drei Werten ist der Standardwert, aria-live="polite" äquivalent zu role="status" und aria-live="assertive" entspricht role="alert". In einigen bekannten vordefinierten Fällen ist es am besten, eine bestimmte "Rolle der Echtzeitzone" zu verwenden. Wenn der Browser keine Rollen unterstützt, müssen Sie möglicherweise versuchen, beide Eigenschaften gleichzeitig zu verwenden. Léonie Watson teilte einige Testergebnisse in der Unterstützung der Bildschirmleser für ARIA-Echtzeitzonen mit.

<h2 id="一个可聚焦的标题">一个可聚焦的标题</h2>

Manchmal ist es sinnvoll zu erklären, dass es nicht nur geändert wird

standardmäßig zeigen Bildschirmleser den geänderten Inhalt nur an, auch wenn es im selben Echtzeitbereich etwas anderes gibt, ist es sinnvoll, in einigen Fällen den gesamten Text anzukündigen. Das Standardverhalten kann mit dem Attribut aria-atomic geändert werden. Wenn sie auf True gesetzt sind, zeigt die Hilfstechnologie den gesamten Inhalt des Elements an.

Paul J. Adam hat eine aria-atomic Testfalldemonstration, die verschiedene Echtzeit-Orte vergleicht. Er testete auch seine Demo mit Voice -Over auf iOS 8.1 und wurde aufgezeichnet, damit Sie sehen können, wie es tatsächlich funktioniert. Wenn Sie die möglichen Anwendungsfälle von aria-atomic besser verstehen möchten, schlage ich vor, dass Sie sich die Aufzeichnung ansehen (VoiceOver iOS 8.1 liest die verbleibenden Zeichen aria-atomic und aria-relevant im Bereich aria-live).

Einige Dinge zu betrachten

• Echtzeitbereiche bewegen sich nicht den Fokus, sondern lösen nur die Ankündigung des Textes aus.
• Verwenden Sie Warnungen nur für kritische Änderungen. "Status" ist in den meisten Fällen besser, weil es höflicher ist.
• Vermeiden Sie das Entwerfen von Alarmen, die automatisch verschwinden, da sie möglicherweise zu schnell verschwinden.
• In meinen Tests stieß ich auf ein Problem mit Voice -Over. Benachrichtigungen mit CSS ausblenden oder dynamisch Warnungen erstellen, ist nicht immer effektiv. Stellen Sie sicher, dass Sie Ihre Echtzeitzone in verschiedenen Browsern und in verschiedenen Software gründlich testen.

Natürlich hat Rob Dodson auch eine A11YCASTS -Episode zu Details und Beispielen, Alert! 》. Heydon Pickering hat ein weiteres Beispiel für Live -Bereiche in seiner Aria -Probensammlung.

Sie müssen nicht erraten, welche Verwendungsmuster Ihre Komponente

liefern muss

Es ist oft schwierig, über alle Merkmale zu denken, die eine Komponente in Bezug auf Navigation und Zugänglichkeit bereitstellen muss. Glücklicherweise gibt es eine Ressource namens Wai-Aria Authoring Practices 1.1, die uns dabei helfen kann. WAI-Aria Authoring Practices ist ein Leitfaden zum Erlernen des Erstellens zugänglicher reicher Internetanwendungen mit WAI-ARIA. Es beschreibt das empfohlene WAI-Aria-Nutzungsmuster und führt die Konzepte dahinter vor.

Sie haben Führer zum Aufbau von Akkordeon, Schiebereglern, Registerkarten und mehr.

zugängliche JavaScript -Komponenten

Hier sind einige hervorragende Ressourcen für zugängliche JavaScript -Komponenten:

• praktisches Aria -Beispiel
• modaal - Ein modales Fenster -Plug -In, das von WCAG 2.0 Level AA
zugänglich ist
• Frend - Eine Reihe von zugänglichen modernen Front -End -Komponenten
• A11Y -Projektmodus

Wenn Sie andere Ressourcen kennen, teilen Sie sie bitte in den Kommentaren mit.

Zusammenfassung

Verwenden Sie die Vorteile von JavaScript, um die Zugänglichkeit Ihrer Website zu verbessern. Achten Sie auf Focus Management, verstehen Sie gemeinsame Nutzungsmuster und betrachten Sie die Benutzer von Bildschirmleser, wenn Sie DOM betreiben. Vergessen Sie nicht, für wen Sie die Website gemacht haben, und haben Sie Spaß im Produktionsprozess.

jenseits

Es ist vorerst alles hier. Ich hoffe, diese Tipps helfen Ihnen dabei, mehr zugängliche HTML und JavaScript zu schreiben. Vielen Dank an Heydon Pickering, denn sein Buch inklusive Front-End-Designmuster ist die Grundlage für das meiste, was Sie gerade gelesen haben. Wenn Sie mehr über Barrierefreiheit und inklusives Design erfahren möchten, empfehle ich dringend, sein Buch zu lesen.

Besonderer Dank geht an Adrian Roselli, dass sie mir geholfen haben, diesen Artikel zu schreiben, und Eva zu korrigieren, wie mein Schreiben ist.

Ressourcen

Dies ist eine Liste aller verknüpften Ressourcen in diesem Artikel.

• a11ycasts #03 - Was ist Fokus?
• a11ycasts #04 - Verwenden Sie Tabindex, um den Fokus
zu steuern
• a11ycasts #05 - Verwenden Sie nur Schaltflächen
• a11ycasts #10 - Alarm!
• Buch: "Inklusive Front-End-Designmodell"
• Verwenden Sie Tabindex nicht größer als 0
• Fokusmanagement mit CSS, HTML und JavaScript
• fokussierbare Elemente - Browser -Kompatibilitätstabelle
• Links, Schaltflächen, Einreichungen und Divs, oh mein Gott
• mdn: htmlelement.focus ()
• mdn: tabindex
• MDN: JavaScript -Komponente, die über die Tastatur
navigiert werden können
• unglaublich zugängliches Modalfenster
• Verwenden Sie Tabindex
• Webaim -Tastatur -Test
• Webaim -Tastatur -Zugänglichkeit
• wai-aria aria-atomic

FAQs zum Schreiben von zugänglichem JavaScript

Welche Bedeutung hat das Schreiben von Barrierefreiheit JavaScript?

Das Schreiben von Barrierefreiheit JavaScript ist entscheidend, da Ihre Website oder Anwendung für alle verfügbar ist, einschließlich Menschen mit Behinderungen. Dies erweitert nicht nur Ihre Benutzerbasis, sondern verbessert auch die Benutzererfahrung und die Zufriedenheit. In vielen Bereichen ist dies auch für die rechtliche Einhaltung wichtig, da die Zugänglichkeit durch verschiedene Diskriminierungsrechnungen für Behinderungen erforderlich ist.

Wie kann ich meinen JavaScript -Code zugänglich machen?

Es gibt verschiedene Möglichkeiten, Ihren JavaScript -Code zugänglicher zu machen. Stellen Sie zunächst sicher, dass Ihre Website oder App tastaturfreundlich ist. Dies bedeutet, dass Benutzer in der Lage sein sollten, Ihre Website nur mit der Tastatur zu navigieren. Zweitens stellen Sie sicher, dass Ihre Website einfach mit einem Bildschirmleser navigieren kann. Dies kann durch die Verwendung semantischer HTML- und ARIA -Rollen erreicht werden. Geben Sie schließlich immer einen alternativen Text für das Bild an und stellen Sie sicher, dass Ihre Website einen ausreichenden Farbkontrast hat.

Was ist Aria und wie verbessert es die Zugänglichkeit?

aria steht für zugängliche reiche Internetanwendungen. Es handelt sich um eine Reihe von Eigenschaften, die Methoden definieren, um Webinhalte und Webanwendungen für Menschen mit Behinderungen zugänglicher zu machen. ARIA hilft bei der Entwicklung dynamischer Inhalte und erweiterter Benutzeroberflächensteuerung mithilfe von AJAX, HTML, JavaScript und verwandten Technologien. Es kann die Zugänglichkeit verbessern, indem zusätzliche Informationen über Elemente, ihre Rollen und deren aktuelle Zustand bereitgestellt werden.

Wie verbessert die Tastaturnavigation die Zugänglichkeit?

Tastaturnavigation ist für Benutzer, die die Maus oder den Touchscreen nicht verwenden, von wesentlicher Bedeutung. Wenn Sie sicherstellen, dass alle Funktionen der Website oder App nur über die Tastatur zugänglich sind, können Sie Ihre Website für Benutzer mit Bewegung oder Sehstörungen anfälliger machen. Dies kann durch Verwendung von tabindex und Fokusmanagement im JavaScript -Code erreicht werden.

Welche Rolle spielt die semantische HTML in der Zugänglichkeit?

semantisches HTML bezieht sich auf die Verwendung von HTML -Tags zur Verbesserung der Semantik oder Bedeutung von Inhalten. Verwenden Sie beispielsweise die <button></button> -Trafik für eine Schaltfläche anstelle eines Stils, damit es wie eine Taste aussieht. Dies ist wichtig für die Barrierefreiheit, da es den Bildschirmlesern aussagekräftige Informationen bietet, um sehbehinderte Benutzer zu helfen, den Inhalt zu verstehen und auf der Website zu navigieren.

Wie kann man einen ausreichenden Farbkontrast für die Zugänglichkeit sicherstellen?

genug Farbkontrast ist für Benutzer mit Sehbehinderung wichtig. Sie können dies sicherstellen, indem Sie eine Farbkombination auswählen, die dem WCAG 2.1 -Kontrastverhältnishandbuch entspricht. Es gibt einige Online -Tools, mit denen Sie das Kontrastverhältnis Ihrer ausgewählten Farbe überprüfen können.

Was ist die Bedeutung der Bereitstellung von Bildalternativtext?

Für sehbehinderte Benutzer, die sich auf Bildschirmleser verlassen, ist die

alternative Text zu Bildern von wesentlicher Bedeutung. Alternativer Text sollte den Bildinhalt genau beschreiben, damit Benutzer, die das Bild nicht sehen können, ihren Zweck im Seitenkontext weiterhin verstehen können.

Wie testet ich die Zugänglichkeit des JavaScript -Code?

sind mehrere Tools zur Verfügung, um die Zugänglichkeit des JavaScript -Codes zu testen. Zu diesen Tools gehören automatisierte Testwerkzeuge wie AX und Lighthouse sowie manuelle Tests unter Verwendung von Bildschirmlesern und Nur-Tastaturnavigation. Es ist wichtig, eine Kombination aus automatisierten Tests und manuellen Tests zu verwenden, um die volle Zugänglichkeit zu gewährleisten.

Was sind einige gemeinsame Zugänglichkeitsprobleme in JavaScript?

Einige übliche Zugänglichkeitsprobleme in JavaScript umfassen mangelnde Tastatur -Zugänglichkeit, unzureichender Farbkontrast, mangelnde alternative Text für Bilder und mangelnde Aria -Zeichen oder die falsche Verwendung von ARIA -Zeichen. Diese Probleme können Ihre Website erschweren oder nicht verfügbar für die Nutzung von Menschen mit Behinderungen.

Wie erfahren Sie mehr über JavaScript und Barrierefreiheit?

Es gibt viele Ressourcen, mit denen Sie mehr über JavaScript und Barrierefreiheit erfahren können. Diese Ressourcen umfassen Online -Tutorials, Kurse und Dokumente von Organisationen wie W3C. Das Üben des Schreibens zugänglicher Code und das regelmäßige Testen der Zugänglichkeit kann Ihr Verständnis und Ihre Fähigkeiten erheblich verbessern.