Usability-Tests

Der Wert der Zugänglichkeit

Was ist, wenn ich Ihnen Webdesigner sagte, dass es Leute gibt, die Ihre Website besuchen, die sich nicht darum kümmern, wie es aussieht?

Sehgeschädigte Menschen navigieren aus denselben Gründen wie wir alle im Internet, um Informationen zu finden, einzukaufen und eine Vielzahl wichtiger Aufgaben mit webbasierten Anwendungen auszuführen. Aber sehbehinderte Menschen erleben das Internet anders und wir müssen auf ihre Bedürfnisse eingehen, wenn wir Websites entwerfen und erstellen.

Nach Angaben des US Census Bureau sowie der UN und der Weltbank haben über 47 Millionen Amerikaner und bis zu 650 Millionen Menschen weltweit eine Art Behinderung. Jeder Besucher der von Ihnen gestalteten Websites muss in der Lage sein, die gesuchten Informationen zu finden und die Aufgaben auszuführen, die er ausführen soll, unabhängig davon, wie die Webseite oder App aussieht. Viele verschiedene Faktoren, die in die Erstellung der Webseite oder Anwendung einfließen, können sich auf die Zugänglichkeit auswirken.

Du nimmst die blaue Pille - die Geschichte endet, du wachst in deinem Bett auf und glaubst, was immer du glauben willst. Du nimmst die rote Pille - du bleibst im Wunderland, und ich zeige dir, wie tief das Kaninchenloch ist. - Die Matrix

Bist du bereit, die Barrierefreiheit mit mir zu nehmen? Wir werden uns mit den technischen Aspekten von Webseiten befassen müssen. HTML ist das Skelett einer Webseite, während CSS, JavaScript und Bilder das HTML verbessern. Oft verpassen sehbehinderte Menschen all diese Verbesserungen. Obwohl Barrierefreiheit hauptsächlich eine Entwickleraufgabe ist, beeinflussen manchmal die technischen Anforderungen, die zur Erhaltung oder Verbesserung der Barrierefreiheit erforderlich sind, das Erscheinungsbild der Website. Das bedeutet, dass Design, Kopie, Benutzererfahrung und Entwicklung zusammenarbeiten müssen, um sicherzustellen, dass Navigationssteuerelemente, Formulare, Schaltflächen, Überschriften, Schaltflächen, Links und mehr zur Verfügung stehen.

Design, Kopie, Benutzererfahrung und Entwicklung müssen zusammenarbeiten, um sicherzustellen, dass Navigationssteuerelemente, Formulare, Schaltflächen, Überschriften, Schaltflächen, Links und mehr zur Verfügung stehen

Menschen, die blind, sehbehindert, analphabetisch oder lernbehindert sind, benutzen assistive Technologien, um im Internet zu navigieren. Bildschirmleseprogramme sind die gebräuchlichste unterstützende Technologie für das Internet. Diese Softwareprogramme versuchen, das, was auf der Webseite angezeigt wird, zu interpretieren und dem Benutzer zu übermitteln, üblicherweise durch Umwandlung des Textes in Sprache, aber manchmal durch ein Braille-Ausgabegerät. Bildschirmlupen werden oft auch in Verbindung mit einem Bildschirmleser verwendet. In der Regel wird ein Bildschirmleseprogramm versuchen, den HTML-Code vom Anfang der HTML-Datei nach unten zu analysieren und relevante Elemente für den Benutzer zu sprechen. Idealerweise ermöglicht der Bildschirmleser dem Benutzer, einen virtuellen Cursor auf der Seite nach unten zu bewegen, um Formularfelder auszufüllen, auf Schaltflächen zu klicken und aus Dropdown-Menüs und anderen Steuerelementen eine Auswahl zu treffen.

Um gründlich auf Barrierefreiheit zu testen, müssen Sie sicherstellen, dass die Website oder App auf jedem der vielen verfügbaren Bildschirmleseprogramme gut funktioniert. Es gibt mehrere beliebte kostenlose und / oder Open-Source-Screenreader auf jeder Plattform einschließlich JAWS , und NVDA . Microsoft-Benutzer können NVDA verwenden, während Apple-Computer und iOS-Geräte mit geliefert werden Voice-over das kann Tastatursteuerungen vergrößern und Bildschirminhalte lesen, und für Unix-Geräte gibt es Orca . Der Chrome-Browser verfügt über zwei Hilfstechnologien, ChromeVox für Bildschirm lesen und ChromeVis für die Vergrößerung.

Die meisten Web-Zugänglichkeitsprobleme treten auf, wenn der virtuelle Cursor des Bildschirmlesers in einer schlecht gestalteten Form gefangen ist oder über ein wichtiges Steuerelement oder eine wichtige Textinformation springt. Die Überprüfung, ob Websites wirklich brauchbar sind, ist vergleichbar mit Browser-Tests, da jeder Screenreader unterschiedliche Anforderungen und Einschränkungen hat. Aus diesem Grund ist es wichtig, das Verhalten jedes Screenreaders zu verstehen. Die Anforderungen verschiedener Bildschirmleseprogramme können durch Hinzufügen verschiedener spezieller HTML-Tags zu den wichtigen Elementen der Seite erfüllt werden.

Moderne dynamische Web-UI können besonders problematisch für die Barrierefreiheit sein, da wichtige Elemente dynamisch mit JavaScript auf der Seite hinzugefügt werden. Benutzerdefinierte Drop-Down-Menüs, Modale, Tooltips, Akkordeon-Inhalte und dynamische Fehler und Benachrichtigungen können für Screenreader-Benutzer zu einer Herausforderung werden, da die Kommunikation zwischen HTML, JavaScript und Screenreader nicht funktioniert. Natives HTML und JavaScript haben keine Möglichkeit, Aktualisierungen von Seiten (Document Object Model) an die Bildschirmleseprogramme zu übermitteln. Entwickler müssen den Fokus (den virtuellen Cursor des Bildschirmlesers) auf den Teil der Benutzeroberfläche verschieben, der sich geändert hat. Wenn sich ein Modal öffnet, müssen Entwickler den Fokus des Benutzers auf dieses Modal legen, damit der Screenreader diesen Inhalt lesen kann und der Benutzer ihn verstehen und damit interagieren kann.

WAI-ARIA kann die Lücken zwischen dem, was der HTML-Code der Seite sagt, und dem, was sehende Benutzer sehen, überbrücken

Dies geschieht durch die Verwendung spezieller HTML-Tags namens WAI-ARIA Stichworte. WAI-ARIA (Accessible Rich Internet Applications) können die Lücken zwischen dem HTML-Code der Seite und den sehenden Benutzern schließen, indem sie Entwicklern eine standardisierte Möglichkeit bieten, Staaten, Eigenschaften, Beziehungen, Rollen und Live-Regionen eine zusätzliche Bedeutung zu verleihen ein Bildschirmleser würde sonst nicht verstehen.   Entwickler können Aria-Level verwenden, um Screenreadern die Hierarchie jeder Überschrift auf der Seite zu erklären. Mit aria-label können Entwickler eine Überschrift hinzufügen, um den Zweck eines diskreten Elements auf der Seite zu beschreiben. Dies hilft Entwicklern, klare Beziehungen zwischen verschiedenen Elementen zu erstellen. Entwickler können auch auf wichtige Steuerelemente aufmerksam machen, indem sie sie mit aria-role-Tags versehen, zum Beispiel würde eine Dropdown-Menüschaltfläche mit dem folgenden Tag versehen: Aria-has popup: true.

Sieh den Stift Einfache zugängliche Registerkarten von Scott Vinkle ( @svinkle ) auf CodePen .

Im HTML-Code im obigen Beispiel werden die Registerkarten mit einer ungeordneten Liste mit Klassen für jedes Listenelement erstellt. JQuery erfasst die Klickereignisse, wenn auf eine Registerkarte geklickt wird, und fügt 'aria-selected': 'true' und 'tab-widget__tab-content-active' zur ausgewählten Registerkarte hinzu und blendet die anderen Registerkarten aus, indem 'aria-selected' hinzugefügt wird: ' false 'zu den restlichen Tabs. In Zeile 127 werden die Anfangsattribute für die Registerkarten festgelegt, und diese Ausschnitte helfen den Screenreadern zu erkennen, welche Registerkarte sichtbar ist. Das JavaScript in Zeile 35 fügt den Registerkarten auch Tastaturunterstützung hinzu. Der Rest der Datei behandelt das Erfassen von Klick- und Tastaturereignissen, sodass jQuery der aktuell ausgewählten Registerkarte Attribute "Rolle" und "Präsentation" hinzufügen kann.

Aria-Tags können Bildschirmleseprogrammen dabei helfen, benutzerdefinierte Steuerelemente als Optionsfelder zu interpretieren, wenn das benutzerdefinierte Steuerelement folgendermaßen gekennzeichnet ist: Aria-Rolle = Optionsfeld. Wenn eine Anwendung über einen Sandbox-Bereich verfügt, der dem Benutzer Feedback oder Aktualisierungen mitteilt, kann er mit einem Live-Region-Tag versehen werden: Aria-live. Dies stellt sicher, dass wenn sich der Text auf diesem Element ändert, wird es automatisch durch den Bildschirmleser an den Benutzer gesprochen.

Seitenaktualisierungen sind ein wichtiger Teil des Webs für Bildschirmleseprogramme, da sie bei einer Seitenaktualisierung dem Bildschirmleser signalisiert, dass sie dem Benutzer die neue Seite ankündigen und den Inhalt der Seite für den Benutzer erneut lesen sollte. Dies bedeutet, dass einseitige Webanwendungen die Barrierefreiheit vor besondere Herausforderungen stellen. In einer Einzelseiten-App wird keine vollständige Seite aktualisiert, sodass der Bildschirmleser und somit der Benutzer nicht über den aktualisierten Inhalt informiert wird. Das Ergebnis wird sein, dass der Benutzer keine Rückmeldung über seine Aktionen erhält. Die beste Lösung besteht darin, das Verhalten der nativen Seite zu emulieren. Laden Sie den Titel der Seite bei angezeigter Ansicht und teilen Sie sie dem Benutzer mit.

Die vollständigen Spezifikationen für WAI-ARIA werden vom W3 wie die Spezifikationen für HTML selbst unter der Web Accessibility Initiative (WAI) beibehalten, aber manchmal können Richtlinien hilfreicher sein als Spezifikationen, daher hier ein paar allgemeine Richtlinien für Designer:

  • Stellen Sie sicher, dass zwischen Text und Hintergrund ein visueller Kontrast besteht.
  • Verwenden Sie keine Farbe allein, um Informationen zu vermitteln.
  • Bereitstellung einer klaren und konsistenten Navigation für Ihre Website;
  • Stellen Sie sicher, dass Formularelemente eindeutige Labels enthalten.
  • stellen Sie sicher, dass Feedback-Elemente wie Fehlermeldungen leicht identifiziert werden können;
  • Überschriften und Abstände verwenden, um verwandte Inhalte zu gruppieren;
  • alternativen Text für Bilder bereitstellen;
  • Überlegen Sie, ob Sie Ihre Website so gestalten, dass alle Funktionen über die Tastatur zugänglich sind.

Es gibt mehrere einfache Entscheidungen, die Sie beim Entwickeln einer Website treffen können, um die Website leichter zugänglich zu machen, ohne sich zu sehr mit speziellen Markup- oder Screenreader-Tests zu befassen. Indem Sie sicherstellen, dass Ihr HTML durch seine Struktur Bedeutung vermittelt, helfen Sie Screenreadern, Informationen auf dieselbe Weise zu verarbeiten, wie sie für sehende Benutzer auf der Seite erscheinen. Dies ist wichtig für Benutzer, die eine Lupe in Verbindung mit einem Bildschirmleser verwenden.

Durch die Verwendung eines geeigneten HTML-Markups für Überschriften, Listen, Tabellen und andere Elemente kann der Bildschirmleser die Struktur der Seite für den Benutzer in einer vertrauten Weise kategorisieren. Für komplexere Layouts bietet HTML5 zusätzliche Elemente, wie z