Schnittstellenverfügbarkeit Yandex-Vortrag

  • Tutorial
Mein Name ist Dima, ich arbeite im Yandex-Büro in St. Petersburg und kümmere mich um interne Dienstleistungen im Entwicklungsteam für Toloki-Schnittstellen. In diesem Jahr habe ich einen Vortrag für die Interface Development School vorbereitet . Unten ist die Abschrift.

Was ist Schnittstellenverfügbarkeit? Für wen ist es wichtig und warum sollten wir danach streben? Was sind die grundlegenden Techniken, die eine Schnittstelle verfügbar machen? Zusätzlich zu diesen Fragen werden in der Vorlesung die Prinzipien der assistiven Technologie erläutert. Ich habe versucht, die Theorie und eine Vielzahl praktischer Beispiele zu zerlegen und den Prozess des Bildschirmlesegeräts aufzuzeigen.


- Was verbirgt sich unter dem modischen Begriff jetzt Barrierefreiheit? Welche Möglichkeiten haben Sie? Für Blinde, Lesen vom Bildschirm, mit Behinderungen, Bewegungskoordination ... Das stimmt. Zugänglichkeit - Die Möglichkeit, die Schnittstelle von allen zu verwenden, unabhängig von physikalischen oder technischen Einschränkungen.

Die verfügbare Schnittstelle ist die Schnittstelle, die für eine Vielzahl von Benutzern am bequemsten zu verwenden ist. Vielleicht hatte jemand eine Frage, warum die Schnittstellen zugänglich sind? Welche Beweggründe hat das? Die erste und meiner Meinung nach wichtigste Motivation ist die Moral. Menschen mit Behinderungen sind nicht schlechter als andere, sie wollen und können auch die volle Funktionalität der von Ihnen entwickelten Ressourcen nutzen.

Finanzieller Aspekt. Menschen mit Behinderungen sind Kunden, die Ihre Produkte kaufen und Ihre Dienstleistungen in Anspruch nehmen. Die Erreichbarkeit trägt ebenfalls dazu bei, Ihren aktuellen Markt zu erweitern und neue Märkte zu erschließen.

Rechtliche Aspekte Das inhärente Recht auf Zugang zu Informationen ist in den Gesetzen vieler Länder verankert. In den USA und der EU sollten beispielsweise alle Weboberflächen für Menschen mit Behinderungen zugänglich sein. In unserem Fall trifft dies hauptsächlich auf Regierungswebseiten zu, dies gilt für alle anderen nur als Empfehlung.

Wer sind diese Menschen, denen die Zugänglichkeit wichtig ist? An erster Stelle - Benutzer mit Sehbehinderung, völlig blinde Menschen, Sehbehinderte, Menschen mit Farbstörungen. Diese Benutzer können Ihre Site nur schwer sehen. Sie können Ihre Website überhaupt nicht sehen. Die zweite Kategorie - Benutzer mit Verletzungen des Bewegungsapparates. Es ist für solche Menschen schwierig, Eingabegeräte zu verwenden, sie haben ein Problem mit der Beweglichkeit und der spontanen Muskelkontraktion.

Ich möchte besonders darauf achten, dass jeder von uns jederzeit zeitlichen Einschränkungen unterworfen sein kann und die Schnittstelle dann nicht in ihrer üblichen Form verwenden kann. Beispielsweise erlebt ein Rechtshänder, der sich den rechten Arm gebrochen hat, Probleme mit den motorischen Fähigkeiten. Die Schnittstelle, die ohne Berücksichtigung dieser Merkmale entwickelt wurde, kann für sie einfach nicht zugänglich sein.

In Russland sind etwa 10% der Bevölkerung Menschen mit einer besonderen Behinderung. Und der letzte Platz wird keinesfalls von Menschen mit Sehstörungen oder dem Bewegungsapparat besetzt. Alle diese Personen sind potenzielle Besucher Ihrer Website. Die Zugänglichkeit ist ihnen besonders wichtig.

Technologien, die Menschen bei der Verwendung von Schnittstellen unterstützen, können in zwei Typen unterteilt werden: Hardware und Software. Menschen mit Behinderungen werden bei der Verwendung von Schnittstellen mit speziellen Tastaturen, Mäusen, Joysticks und anderen Eingabegeräten unterstützt.



Als Beispiel möchte ich diese Sache mitbringen. Diese Art von Gerät wird als Schalter bezeichnet. Bei der Barrierefreiheit geht es nicht nur um Computer und Laptops, sondern auch um mobile Geräte. Eine Person mit Behinderungen kann über ein Telefon oder Tablet auf Ihre Website zugreifen. Dieses Gerät stellt eine Verbindung zu einem iOS- oder Android-Gerät her, und den Tasten können einige Benutzeraktionen zugewiesen werden. Zum Beispiel dieser Schalter - mit zwei großen Tasten ist es praktisch, ihm auf der Seite die Fokussteuerung zuzuweisen.



Für Benutzer, die Ihre Benutzeroberfläche nicht sehen, ist die Sprachsynthese nicht immer bequem. Daher gibt es eine Braillezeile. Dies ist ein spezielles Ausgabegerät, das Informationen in Form von fühlbaren Punkten in Blindenschrift anzeigt. Tolles Zeug, aber sie hat zwei Probleme. Sie ist sehr teuer, nicht jeder Bedürftige kann es sich leisten.

Darüber hinaus kennen Personen, die in einem reiferen Alter das Augenlicht verloren haben, Braille-Schrift oft nicht und wollen sie nicht beherrschen.

Software-Technologie reicht auch aus. Dies sind Werkzeuge zum Vergrößern des Bildes auf der Seite, z. B. Bildschirmlupen, die in Windows integriert sind, macOS, dies sind Softwarefarbmodifikatoren usw. Beispielsweise gibt es eine Software, mit der Sie die Schnittstelle mithilfe der Augen- und Kopfbewegungen steuern können. In macOS ist ein solches Programm eingebettet, es heißt Dwell Control. Bei den Softwaretechnologien nehmen Bildschirmleser jedoch einen besonderen Platz ein. Dies ist eine spezielle Anwendung, die dem Benutzer den Inhalt der Site und des Betriebssystems vorliest und ihm eine komfortable Navigationsfunktion bietet.

Bildschirmleser sind die am leichtesten zugängliche und gebräuchlichste Art, Informationen für Menschen mit Sehbehinderung wahrzunehmen. Wir werden in der Vorlesung ausführlicher darüber sprechen.



Einige Worte zu den Empfehlungen im Bereich der Eingabehilfen. Wir haben diese GOST und in der West-WCAG und in Abschnitt 508. Die in diesen Empfehlungen beschriebenen Methoden haben keinen Einfluss auf das Erscheinungsbild der Website, bieten Benutzern mit Behinderungen jedoch einige zusätzliche Elemente für die Navigation und Verwendung.

Praktiken, die Ihre Schnittstelle heute verfügbar machen. Eine alternative Beschreibung sollte kurze Informationen zum Text enthalten, ergänzen oder ausweisen.



Dasselbe gilt für Grafiken und Symbole auf der Seite. Denken Sie daran: Sie benötigen auch zusätzliche Unterstützung. Wenn ein zusätzliches Element auf Ihrer Seite als Bild dargestellt wird, muss es mit dem Attribut aria-hidden = „true“ für den Bildschirmleser ausgeblendet werden.



Über Attribute mit dem Präfix Aria sprechen Sie weiter.

Die Eingabefelder müssen mit dem Label-Tag beschrieben werden, in dem das Attribut for mit dem id-Wert des Eingabefelds angegeben wird. Auf diese Weise können Sie das Steuerelement nicht nur schnell bearbeiten, indem Sie auf das Label klicken. Das Steuerelement wird semantisch mit seiner Beschreibung verknüpft, dh der Bildschirmleser liest die Beschreibung dieses Elements für uns vor. Gibt die Datentypen der Eingabefelder an.



Zusätzlich zu den Validierungsregeln, die automatisch zu diesen Eingaben hinzugefügt werden, wird in vielen Fällen eine komfortable Browser-übergreifende Eingabemethode vorgestellt. Zum Beispiel wie hier der Kalender im Falle des Typs Datum oder Farbe, wenn es sich um eine Farbe handelt. Wenn der Browser keinen der Typen unterstützt, wird die Eingabe mit dem Texttyp ersetzt, und es wird nichts beschädigt.



Markieren Sie erforderliche Felder mit den Attributen "required" oder "aria-required =" true ". Gruppieren Sie verwandte Felder mithilfe des Feldset-Tags und verwenden Sie das Legendenelement, um den Gruppenkopf anzugeben. Hier können Sie nicht nur den Zweck der Gruppe, sondern auch die allgemeinen Merkmale der Felder angeben (z. B. sind alle Felder in dieser Gruppe erforderlich).



Wir wickeln die drei Optionsfelder in das Feldset-Tag ein und setzen den Titel im Legenden-Tag. Unabhängig davon, welche Schaltfläche ausgewählt ist, liest der Bildschirmleser den Inhalt des Legenden-Tags. Und die Person, die die Website besucht, wird verstehen, was in diesem Formular passiert.

Fehler- und Erfolgsmeldungen anzeigen.



Über den Titel ist klar, der Text in diesem Tag sollte den Zweck oder den Namen der Seite beschreiben. Wenn Sie eine Einzelseitenanwendung haben, vergessen Sie nicht, den Inhalt des Titel-Tags zu ändern, wenn Sie auf der Seite navigieren.

Geben Sie die Seitensprache an. Dazu müssen Sie das lang-Attribut im HTML-Tag festlegen. Dies ist gut für SEO, es hilft Plug-in-Übersetzer und Bildschirmleser bestimmen die Sprache einer solchen Seite genau. Wenn das Dokument mehrere Sprachen enthält, können Sie das lang-Attribut für einzelne Tags angeben. Beachten Sie die Gültigkeit des Layouts. Dies ist wichtig, da Bildschirmleser ungültige Seiten falsch interpretieren können. Gleiches gilt für die Semantik. Alle Elemente auf der Seite müssen semantisch korrekt sein. Sie müssen HTML-Tags für ihre Bedeutung verwenden. Achten Sie beim Erstellen Ihrer benutzerdefinierten Elemente auf die korrekte Semantik.



Sprechen wir über Beispiele auf dem Gebiet der Semantik. Zuerst zu den Schlagzeilen. Sie sind eines der wichtigsten Elemente in Bezug auf Semantik auf der Seite. Wenn eine Person die Website mit einem Bildschirmleser betritt und zu einer unbekannten Seite wechselt, führt sie auf dieser Seite zunächst die Überschriften durch. Bildschirmleser verfügen sogar über einen speziellen Modus, mit dem Sie dies bequem tun können. Wenn sich auf Ihrer Seite Überschriften befinden und eine klare Hierarchie angezeigt wird, ist es für eine Person bequem, durch die Website zu navigieren. Sie kann dann schnell zum gewünschten Abschnitt wechseln. Es ist sehr praktisch, verwenden Sie es.



Ein anderes Beispiel für die Bedeutung der Semantik ist das Menülayout. Wenn Sie das Menü als links definieren, ist es aus Sicht der Semantik nur eine Gruppe. Ein div ist ein Gruppierungs-Tag, in dem sich einige nicht zusammenhängende Elemente befinden, in diesem Fall nur drei Links.

Wenn Sie eine Navigation vornehmen und sie in ein spezielles semantisches Tag einschließen, in dem sich eine Liste von Elementen befindet, von denen jedes eine Verknüpfung ist, dann ist dies aus Sicht der Semantik, des Bildschirmlesegeräts und des Browsers eine ehrliche Navigation, in der sich eine Liste von drei Elementen befindet, die bequem verwendet werden können. sich bewegen



Ich hoffe, der folgende Hinweis ist für Sie offensichtlich: Durch die korrekte Verwendung semantischer Tags aus dem fünften HTML-Standard wird sichergestellt, dass Ihr Layout von Browsern und assistiven Technologien logisch korrekt interpretiert wird.



Über adaptives Layout und mobile Version. Sie haben bereits einen Vortrag über adaptives Layout gehalten, ich hoffe, Sie verstehen die Wichtigkeit davon.

Sie sollten eingebetteten HTML-Elementen immer den Vorzug geben und nur bei Bedarf eigene Elemente erstellen. Der Grund dafür ist einfach: Eingebettete Elemente verfügen bereits über korrekte Semantik und eine Reihe von funktionalen Funktionen. Wenn Leute darüber sprechen, geben sie oft Knöpfe als Beispiel. Daher habe ich zwei Knöpfe.



Sie unterscheiden sich nur in der Inschrift, aber in Wirklichkeit ist nur der linke Knopf der Knopf. Es basiert auf dem Button-Tag. Richtig - nur ein stilisiertes Div. In der linken Schaltfläche können wir also fokussieren - die Schaltfläche ist das standardmäßig fokussierte Element. Die Taste hat einen deaktivierten Status, in dem sie nicht gedrückt werden kann. Klicken Sie auf die Schaltfläche, indem Sie die Eingabetaste und die Leertaste drücken, wenn Sie sich auf die Schaltfläche konzentrieren. Und nur diese Schaltfläche hat die richtige semantische Rolle. Aus der Sicht des Browsers ist der Bildschirmleser eine Schaltfläche, und wenn der Bildschirmleser dorthin gelangt, wird er sagen, dass dies eine Schaltfläche ist. All dies hat keinen Button, der auf einem div basiert. Die folgenden Punkte müssen Sie selbst umsetzen. Aber warum, wenn es eine eingebaute, gute Browser-API gibt, die verwendet werden kann?

Es ist wichtig, vor der Entwicklung und dem Layout über die Zugänglichkeit nachzudenken. Wer war jemals an Entwürfen oder Zeichnen von Entwürfen bei der Arbeit oder an ihren Nebenprojekten beteiligt? Wir sind genau mehr als die halbe Halle. Ein paar Tipps in diese Richtung. Lassen Sie das Erscheinungsbild ihrer Schnittstellen nicht zu klein oder mit den Hintergrundelementen verschmelzen.



Verwenden Sie auch keine dekorativen oder kalligrafischen Schriftarten für den Haupttext. Denken Sie an Benutzer mit Sehschwäche, die die Farbwahrnehmung verletzen. Menschen, die Monitore mit schlechter Farbwiedergabe verwenden. Alle können Ihre Oberflächenelemente einfach nicht sehen. Dies ist besonders wichtig für Steuerelemente, für Steuerelemente.

Wir haben über Formen gesprochen, aber mehr aus Sicht der Semantik. Achten Sie hier auf die kompetente Gestaltung der Benutzerinteraktion mit Formularen und unter Berücksichtigung der Merkmale einiger Benutzer. Zum Beispiel gibt es Menschen, die Probleme mit der Motorik haben, es kann für sie schwierig sein, sich mit kleinen Elementen auseinanderzusetzen. Machen Sie daher den Bereich der Klicks für solche Elemente größer als das Steuerelement oder die Schaltfläche. Gleiches gilt für nahe beieinander liegende Elemente. Eine Person, die ein Problem mit den motorischen Fähigkeiten hat, kann das falsche vermissen und drücken. Verteilen Sie wichtige Elemente weiter voneinander und fordern Sie die Bestätigung einiger irreversibler Vorgänge an, z. B. das Löschen von Daten.

Im Allgemeinen geht es um die Einheitlichkeit von Design, Konsistenz, Vorhersagbarkeit und Konsistenz. Alle Ihre Designs sollten in einem Stil gestaltet sein. Alle Blöcke auf Ihrer Website sollten sich an denselben Stellen befinden. Es sollte nicht so sein, dass der Block von Ort zu Ort springt, wenn Sie sich durch die Seiten bewegen. Dies ist besonders wichtig für die Navigation. Eine Person, die Ihre Website nicht sieht, erstellt ein Bild in ihrem Kopf und repräsentiert, wie sie aussieht. Wenn Ihre Navigation von Seite zu Seite von Ort zu Ort springt, wird dies einfach verwirrt, und die Website kann nicht verwendet werden.

Neben all den Technologien, die wir kennen gelernt haben, gibt es einen Standard, der Benutzern mit Behinderungen eine bequeme Möglichkeit bietet, mit Websites im Internet zu interagieren.

Bevor wir die Feinheiten verstehen, schauen wir uns an, wie es unter der Haube aus der Sicht des Browsers funktioniert. Nach dem Laden Ihrer Seite beginnt der Browser mit der Analyse des HTML-Markups und erstellt darauf basierend eine DOM-Struktur. Ich hoffe, Sie kennen diese Struktur, sie basiert auf der Anzeige der Daten im Browser, sie kann mit JS usw. geändert werden. Wenn der DOM-Baum erstellt wird, baut der Browser auf der Grundlage dieses Daten eine andere Datenstruktur auf - den Eingabehilfenbaum. Dieser Baum enthält Informationen, die für die Zugänglichkeit hilfreich sind. Assistive Technologien, zum Beispiel Bildschirmleser, übernehmen diese Informationen. Und bieten dem Benutzer eine bequeme Möglichkeit, mit der Website zu interagieren. Während dieser Interaktion kann sich das DOM ändern. Der Browser überwacht also die Änderungen im DOM und aktualisiert bei Bedarf die Zugriffsstruktur.



Dies ist eine isolierte Datenstruktur. Es kann nicht vom DOM aus darauf zugegriffen werden, es kann nicht mit JS angezeigt oder bearbeitet werden. Browser implementieren und verwalten diese Struktur vollständig. In diesem Baum werden Informationen zur Semantik von Elementen gespeichert, mit deren Hilfe unterstützende Technologien verstehen, wie Elemente von einer Seite interpretiert werden.

Der Zugriff auf diese Informationen ist jetzt nur mit Hilfe von Spezialwerkzeugen möglich. Eines dieser Elemente ist der DevTools Accessibility Inspector. Jetzt befindet sich der Inspector für Chrome-Eingabehilfen im Abschnitt für experimentelle Technologien, den Sie aktivieren können, indem Sie auf die Seite für Chrome-Flags gehen. Aktivieren Sie diese Technologien, wechseln Sie zu DevTools und aktivieren Sie das Bedienfeld Eingabehilfen. Sie schaut also in den Fall.



Dies zeigt verschiedene nützliche Informationen. Und es stellt sich sofort die Frage, woher diese Informationen kommen und wie können sie geändert werden?

Kleine Beispiele.



Nur ein natives Kontrollkästchen in einem Etikett. Es wird also im Eingabebaum angezeigt. Wir sehen, dass es sich um ein Objekt handelt, das über Felder, einen Ankreuzfeldtyp, einen Namen, der aus einem Label stammt, und einen Status enthält, der aktiviert und deaktiviert werden kann.



Jetzt erstellen wir ein benutzerdefiniertes Kontrollkästchen mit einem div, dessen Zustand durch den Stil gekennzeichnet ist. Aber vom Standpunkt des Browsers aus unterstützende Technologien wird es nur ein Text mit einer gewissen Bedeutung sein. Diese beiden Beispiele bestätigen auf anschauliche Weise, was ich zuvor gesagt habe: Wann immer möglich, sollten Sie native Elemente verwenden. Dies ist jedoch oft nicht möglich. Dann kommt der ARIA-Standard zur Rettung.

Die ARIA-Spezifikation fügt spezielle Attribute hinzu, die genau definieren, wie das Element in der Baumstruktur für Eingabehilfen dargestellt wird und welche Eigenschaften es haben wird. Die Hauptsache, die diese Spezifikation uns gibt, ist die Rolle, um die Art der Elemente zu beschreiben, Eigenschaften, um den Zustand zu beschreiben.

In Kürze werden wir uns die Rollen und Eigenschaften ansehen und dann anhand von Beispielen korrigieren. Beginnen wir mit dem Konzept der Rolle. Die Rolle ermöglicht es uns, Elemente auf der Seite zu klassifizieren. Es ist so eingestellt, dass es dem HTML-Element des Rollenattributs mit dem gewünschten Wert hinzugefügt wird.



Es gibt viele verschiedene Rollen im Standard, die in verschiedene Gruppen unterteilt sind. Zum Beispiel die Rolle von Widgets. Sie werden Elementen zugewiesen, die unabhängige Bestandteile der Benutzeroberfläche sind. Dies sind bekannte Schaltflächen, Optionsschaltflächen, Registerkarten und QuickInfos. Als nächstes sind die zusammengesetzten Rollen, die die Elemente anderer Rollen zusammenfassen. Offensichtlich besteht eine Radiogruppe aus Funkelementen oder ein Tablist besteht aus Registerkarten. Es folgen strukturelle Rollen und Orientierungspunkte. Diese Rollen werden großen semantischen Blöcken auf der Seite zugewiesen.

Neben den Rollen enthält der ARIA-Standard auch Zustände. Sie können beschreiben, welchen Status der Artikel aktuell hat. Zum Beispiel den Status für Widgets, sie zeigen an, dass das Element ausgeblendet, markiert, blockiert usw. ist.



Es gibt auch Zustände, die die Verbindung von Elementen anzeigen. Ein Element beschreibt beispielsweise ein anderes Element und steuert ein anderes Element. Staaten können auch bestimmte Bereiche deklarieren, in denen erwartet wird, dass Inhaltsänderungen auftreten. Diese Gebiete werden als Live-Regionen bezeichnet.

Rollen und Zustände sind viele. Alle von ihnen können in den Site-Spezifikationen gelesen werden.

Schauen Sie sich die Beispiele für die am häufigsten verwendeten Rollen an.



Lassen Sie uns unser benutzerdefiniertes Kontrollkästchen beenden. Wir nehmen das gleiche div, aber jetzt fügen wir die Checkbox-Rolle hinzu, sowie ein Attribut, das den Status angibt (aria-checked, true oder false). Jetzt müssen Sie die entsprechende JS hinzufügen und aus Sicht des Browsers Semantik wird dies ein ehrliches Kontrollkästchen sein. Andere Elemente können auf dieselbe Weise hergestellt werden. Zum Beispiel eine Schaltfläche, die als Schalter zum Wechseln zwischen Zuständen fungiert. Es hat eine eigene Switch-Rolle und ein Attribut, das seinen aktuellen Status angibt.

Ein Beispiel für eine zusammengesetzte Rolle. Es gibt eine Liste mit einem Tablistenelement, in dem sich Elemente mit Registerrollen befinden. Also sagen wir dem Browser, dass diese Elemente Tab sind.



Ein komplexeres Beispiel ist das mehrstufige Menü. Zusätzlich zu den verschiedenen Rollen, unter denen es eine strukturelle Rolle gibt - Navigation -, gibt es zusammengesetzte Rollen, die ineinander verschachtelt sind. Es gibt eine Reihe interessanter Zustände. Zum Beispiel zeigt aria-haspopup mit dem Wert true an, dass dieses Element ein Dropdown ist. Oder, zum Beispiel, aria-hidden mit einem Wert von true, der unterstützenden Technologien den Browser mitteilt, dass dieses Element derzeit ausgeblendet ist.

In dieser Folie wollte ich feststellen, dass das Hinzufügen des Zustands selbst, die Rollen das Verhalten des Elements und seine Funktionalität in keiner Weise verändern. Es gibt ein Element, Sie setzen es auf, schrieb JS und verwendet dann diese Attribute, um sein Verhalten zu beschreiben, das von assistiven Technologien interpretiert wird, die dem Benutzer eine bequeme Art der Interaktion bieten. Durch das Hinzufügen von aria-haspopup wird das Element nicht von alleine angezeigt. Durch das Hinzufügen von Aria-hidden wird das Element nicht aus der Seite ausgeblendet. Denken Sie daran.



Pro-Attribute, die die Beziehung zwischen Elementen herstellen. Mit diesem Attribut können Sie angeben, dass ein Element ein anderes Element steuert. In diesem Fall ist dies die Schaltfläche "Einstellungen anzeigen", mit der der Block darunter angezeigt oder ausgeblendet wird. Wir verwenden das Attribut aria-controls mit dem id-Wert des Blocks, den wir steuern. Ein ähnliches Beispiel, aber hier verweisen wir auf den Block, der unseren aktuellen Block beschreibt. Verwenden Sie das Attribut aria-descriptionby. In diesem Fall lesen Bildschirmleser uns den Inhalt vor und informieren den Benutzer durch Klicken auf diese Schaltfläche.



Es ist kein Geheimnis, dass jetzt fast alle Websites im Internet dynamisch sind, dh der Inhalt dieser Websites ändert sich, ohne die Seite neu zu laden. Und hier ergeben sich aus Sicht der Zugänglichkeitsprobleme. Wie können Hilfstechnologien, dieselben Bildschirmlesegeräte, benachrichtigt werden, dass auf der Seite eine Änderung aufgetreten ist? Um dies zu erreichen, führte aria das Konzept von Live-Regionen ein. Sie können entweder mithilfe der Alert-Rolle oder mithilfe des Attributs aria-live erstellt werden. Nun verfolgt der Bildschirmleser die Änderungen in diesen Blöcken und wenn eine Änderung eingetreten ist, liest er den neuen Inhalt dem Benutzer vor. Wenn Sie mit dem Wert assertive role = "alert" oder aria-live angeben, wird die Aussprache des neuen Inhalts sofort angezeigt. Wenn der Bildschirmleser nun den Inhalt der Seite liest, wird das Lesen unterbrochen und der Inhalt wird in die Live-Region eingelesen.

Wenn Sie möchten, dass die Benachrichtigung über neue Inhalte höflicher ist, müssen Sie eine Live-Region mit dem Attribut Aria-Live mit dem Wert Polite erstellen. Dann wird er warten, bis der aktuelle Inhalt ausgesprochen ist, und danach den neuen Inhalt sagen.



Es ist wichtig, sich an eine interessante Funktion zu erinnern. Damit Live-Regionen in verschiedenen Browsern unter verschiedenen Betriebssystemen arbeiten, ist es besser, diese statisch zu erstellen. Sie erstellen ein Element, in dem sich der Inhalt ändert, machen ihn leer, blenden ihn beispielsweise visuell aus und fügen, falls erforderlich, einfach neuen Inhalt hinzu und zeigen ihn an. Dann können Sie sich zu 100% sicher sein, dass alle unterstützenden Technologien und alle Browser unter allen Betriebssystemen das Gerät präzise und korrekt anzeigen und lesen.

Weitere Informationen zu Tastatursteuerung und -fokus. Für Benutzer, die beim Durchsuchen von Websites hauptsächlich oder nur die Tastatur verwenden, gibt es zwei Haupttastenkombinationen: Umschalt + Tab und Tab. Zum nächsten und vorherigen fokussierbaren Element wechseln. Wenn wir auf der Seite über den Fokus und seinen Übergang sprechen, ist es wichtig, die korrekte Reihenfolge des Fokusübergangs sicherzustellen.



Der Fokus liegt in der Reihenfolge des HTML-Markups. Da sich die Elemente im Markup befinden, wird der Fokus gesetzt. Wenn Sie die Position von Elementen visuell mithilfe einiger CSS-Eigenschaften ändern, z. B. mithilfe der absoluten Positionierung, der Gleitkommazahl oder der Auftragseigenschaft von Flexboxen und Gittern, ändern Sie die Position des Elements nur visuell. Im Markup bleibt es an derselben Stelle.



Ein kleines Beispiel. Die rechte Spalte ist rechts, wir lesen von links nach rechts, es scheint uns, dass es danach kommt. Und sollte sich erwartungsgemäß nach dem Hauptinhalt einlassen. Im Markup steht jedoch die rechte Spalte vor dem Hauptinhalt. Wenn eine Person die Site mit Hilfe eines Bildschirmlesegeräts aufruft oder einfach mit der Tabulatortaste durch diese navigiert, gelangt sie zuerst zur rechten und dann zur Hauptspalte. Die Person, die Ihre Schnittstelle irgendwie versteht, und eine blinde Person kann sehr verwirrt werden.

Um den Fokus fortzusetzen, möchte ich mich auf den Fokusring konzentrieren. Dies ist ein Strich um das fokussierte Element. Wir kennen sie alle und mögen wahrscheinlich nicht alles, weil sie unser Design verderben. Daher deaktivieren wir es auf der gesamten Site.



Damit verbieten wir Personen, die unsere Website sehen, sie aber über die Tastatur verwenden, um den aktuellen Ort des Fokus zu sehen. Es ist nicht klar, wo wir jetzt sind. Deshalb kann es nicht vollständig deaktiviert werden. Wenn Sie das Aussehen nicht mögen, definieren Sie es neu und brauchen Sie die Gliederungseigenschaft nicht zu verwenden. Sie können Box-Shadow oder Rahmen verwenden, sofern dies auf der Website deutlich sichtbar ist.

Ein weiteres tolles Feature. Möglicherweise haben Sie festgestellt, dass sich verschiedene fokussierte Elemente unter den gleichen Bedingungen unterschiedlich verhalten können. Zum Beispiel gibt es eine Eingabe und eine Schaltfläche. Wenn wir mit taba durch sie navigieren, sind beide im Fokus. Wenn wir jedoch mit der Maus auf die Eingabe klicken, wird der Fokus um sie herum angezeigt. Wenn wir die Taste drücken, wird der Fokus nicht angezeigt.

Warum funktioniert das, welchen Unterschied macht es? Browser verfügen über eigene interne Heuristiken, die festlegen, ob der Fokusring um ein Element angezeigt werden soll oder nicht. Der Zugriff auf diese Heuristiken kann durch einen solchen interessanten Pseudo-Selektor erhalten werden.



Sie wird auf Elemente angewendet, für die der Browser derzeit die Anzeige eines Fokusrings für erforderlich hält. Wenn Sie das Gegenteil tun möchten, zeigen Sie einen Strich um ein fokussiertes Element nur dann an, wenn der Benutzer mit der Tastatur durch die Website navigiert. Dann schreiben wir einen nicht ganz trivialen Selektor, der wie folgt gelesen werden kann: Wenn das Element fokussierbar ist, der Browser denkt, dass es in der Nähe ist Es ist nicht notwendig, den Fokus anzuzeigen, dann entfernen wir den Strich. Diese Technologie kann bei der Erstellung Ihrer benutzerdefinierten Komponenten verwendet werden. Aber wie üblich im Frontend funktioniert das ganze coole Zeug momentan nicht. Deshalb ist diese Technologie experimentell, jetzt ist sie in Browsern nicht verfügbar, sie kann nur mit einer Polyfill verwendet werden, ich werde am Ende der Präsentation einen Link dazu lassen.



Interaktive Elemente, Schaltflächen, Verknüpfungen und Eingabefelder fallen standardmäßig in die Reihenfolge, in der sie sich auf Tabus konzentrieren. Was tun, wenn wir unsere eigenen Elemente oder Elemente hinzufügen möchten, die nicht standardmäßig fokussiert sind? Hier kommt das tabindex-Attribut zur Rettung. Wenn Sie den Wert auf 0 setzen, wird das Objekt fokussierbar. Außerdem wird es zum Fokusfluss hinzugefügt. Der Thread, den wir durch Drücken der Tabulatortaste treffen.



Wir haben fokussierbare und unscharfe Elemente und ein Div zwischen ihnen. Wenn wir mit der Registerkarte durch die Site navigieren, gelangen wir zur ersten Schaltfläche und zur zweiten Schaltfläche. Wenn wir für den zweiten Block tabindex = 0 hinzufügen, wird er fokussierbar und erhält die Fokusreihenfolge, wird der zweite.



Wenn das Element mit tabindex = -1 festgelegt ist, wird es fokussierbar, der Fokus ist jedoch nicht in der richtigen Reihenfolge. Er kann sich jedoch auf die Verwendung von JS konzentrieren.



tabindex> 0 legt die tatsächliche Fokusreihenfolge fest. Mit drei nicht fokussierten Elementen können wir sie fokussierbar machen, und die Reihenfolge des Fokus wird durch diese Indizes explizit angegeben.

tabindex> 0 ist ein leistungsfähiges Werkzeug, dessen Verwendung jedoch nicht wünschenswert ist. Jede Änderung im Layout, Design kann diese Reihenfolge unterbrechen, und Ihre Benutzeroberfläche wird unvorhersehbar. Du kannst es also nicht tun. Kompetentes Fokusmanagement in besonderen Situationen. Ich werde ein Beispiel für zwei Komponenten geben, bei denen eine spezielle Fokussteuerung verwendet wird. Dieses Popup ist meiner Meinung nach vom vierten Bootstrap.



Jedes gute Popup zusätzlich zu den offensichtlichen Dingen - z. B. Schließen durch Drücken von ESC oder Schließen durch Klicken auf das Overlay - sollte den Fokus auf das Element zurückführen, von dem es ursprünglich kam. Es ist wichtig, dass der Fokus in einem guten modalen Fenster nicht darüber hinausgeht. Es spielt keine Rolle, ob es zyklisch ist oder auf dem ersten oder letzten Element ruht. Es ist wichtig, dass zu keiner Zeit eine Seite hinter einem modalen Fenster ausfallen kann.

Ein anderes Beispiel, Materialdesign, ist der Hauptinhalt und das Menü links. Hier ist eine ähnliche Situation, solange das Menü nicht angezeigt wird, sollten wir nicht mit einem Fokus darauf eingehen. Wir werden auf der Seite tabu, fallen nirgendwo hin. Sobald sich das Menü öffnet, wird der Fokus auf das erste Element gesetzt, und dann können wir uns auf den Rest konzentrieren. Alles, das Menü ist geschlossen, es ist träge für den Fokus, wir können uns in keiner Weise darauf einlassen. Damit es nicht passiert, dass der Benutzer nach ein paar Klicks auf die Registerkarte irgendwo fällt und die aktuelle Position des Fokus nicht sieht.

Diese Beispiele ähneln sich darin, dass Sie zu einem bestimmten Zeitpunkt Elemente auf der Seite erstellen müssen. Im Falle eines modalen Fensters ist dies die gesamte Seite dahinter. Bei einem Dropdown-Menü handelt es sich um ein ausgeblendetes Seitenmenü. Wir müssen diese Elemente für den Fokus inert machen, damit der Fokus nicht in sie fällt. Um dieses Problem zu lösen, gibt es einen sehr einfachen Weg - das inerte Attribut.



Es wird einfach dem Element zugewiesen und funktioniert offensichtlich. Wir setzen ein Inert für ein Element, es und alle seine Kinder werden für den Fokus träge. Dieses Ding ist cool und funktioniert wie jedes coole Ding jetzt nicht. Diese Technologie ist experimentell, für ihre Arbeit benötigen Sie eine Polyfill.



Andere Lösungen, die Sie mit JS verwenden können. Es gibt eine große Anzahl von Bibliotheken, um dieses Problem zu lösen. Einer davon ist der Focus Manager. Es implementiert zwei Methoden. Die Capture-Methode erfasst den Fokus auf ein Element. Die Freigabefunktion benötigt ein Argument, bei dem der Fokus nach der Freigabe zurückkehrt. Wieder erinnern wir uns an das modale Fenster, fokussieren uns auf dieses Element, die Schaltfläche oder was auch immer es ist, kehren wir zum Schließen des modalen Fensters zurück. Das ist cool und bequem und sollte gemacht werden.

Eine weitere Lösung für den Reaktor ist einfach eine Hülle, die verhindert, dass sich der Fokus über seine Grenzen bewegt. Sie importieren und verwenden - Sie müssen nicht einmal nachdenken.

Viele Bibliotheken modaler Fenster für den Reaktor (z. B. React Modal) verfügen bereits über diese Logik der Fokussteuerung.

Bildschirmleser sind die bequemste und zugänglichste assistive Technologie. Was sind Bildschirmleser?

Das erste Produkt von VoiceOver, das mit den Betriebssystemen von Apple geliefert wird, ist nicht nur macOS, sondern auch iOS und WatchOS. Es bietet native Funktionen für die Interaktion mit der Benutzeroberfläche für Menschen mit Behinderungen. Dies ist ein cooles Werkzeug, einfach zu bedienen, funktional, es gibt eine große Anzahl von Stimmen und Einstellungen, es kann sehr bequem für Sie sein, es anzupassen. Aber das Problem liegt auf der Hand, nur unter macOS.

Wenn Sie sich die Screenreader für Windows ansehen, steht NVDA an erster Stelle. Dies ist ein kostenloser Screenreader. Tatsächlich implementiert es dasselbe wie VoiceOver, jeder Bildschirmleser macht dasselbe, ist aber weniger funktional, weniger bequem und komplizierter einzurichten.

Die dritte Lösung für Windows ist der kostenpflichtige Bildschirmleser von JAWS. Eine coole, funktionale und leistungsstarke Sache, genauso anpassbar wie VoiceOver, aber Sie müssen dafür bezahlen.

Nur über Screenreader zu sprechen, macht wenig Sinn. Wir müssen sehen, wie sie funktionieren, um zu verstehen, was es ist. Deshalb werde ich nun am Beispiel von VoiceOver demonstrieren, wie ein Bildschirmleser Ihre Site lesen kann.

Die Einstellungen für den Bildschirmleser in macOS befinden sich auf der Registerkarte "Zugriff" oder "Universal Access". Es gibt einen VoiceOver-Abschnitt. Klicken Sie auf das Kontrollkästchen "Enable VoiceOver" oder die Kombination Cmd + F5. Ich bin sicher, wer Mohn verwendet, ich habe dies oft durch Zufall getan, dann habe ich lange gesucht, wo ich ihn abstellen kann. Drücken Sie und gehen Sie.

Willkommen bei macOS. Der Bildschirmleser schaltet sich ein und beginnt sofort zu sprechen. Alles, was er sagt, ist im schwarzen Rechteck darunter zu sehen. Wechseln Sie in diesem Menü zum Browser und klicken Sie auf die Registerkarte, um zum ersten Element auf der Seite zu gelangen.



Dies ist der Haupt-Yandex. Wir kommen zum ersten Element auf der Seite. Beachten Sie sofort, dass der Fokusring standardmäßig neu definiert ist, er ist im Yandex-Stil. Was sehen wir, wenn wir dieses Element treffen?

Erstens sagte der Bildschirmleser, dass es sich um einen Link handelt. Er sprach den Titel dieses Links aus. In der zweiten Zeile zeigte er, zu welchem ​​Element dieser Link gehört. Es gehört zu dem Block mit der Rolle des Komplementärs, es ist ein zusätzlicher Block auf der Seite. Die Zahl 2 besagt, dass es zusätzlich zu diesem Link noch ein Element gibt, dh es gibt zwei davon. Drücken Sie die Tabulatortaste, um zum zweiten Element dieses Blocks zu gelangen.



Bin ins Setup-Menü gegangen. Der Bildschirmleser hat die richtige Rolle gelesen - dies ist eine Popup-Schaltfläche. Denken Sie daran, dass dies Aria-haspopup ist. Diese Schaltfläche hat auch einen zusätzlichen Status, sie ist minimiert, und da es sich um eine Schaltfläche handelt, können Sie sie bequem mit der Eingabetaste oder der Leertaste anklicken. Drücken Sie die Leertaste:



Status hat sich geändert, fahren Sie fort.



Wir haben alle Links in diesem Popup durchgegangen. Bitte beachten Sie, dass er zu den angezeigten Links angegeben hat. Wir erinnern uns an das Fokusmanagement. Wir sagten, dass es bei solchen Elementen cool ist, wenn der Fokus nicht von außen herausfällt, sondern zyklisch herumgelaufen ist. Sagte - fertig. Bei diesem Element können wir nicht aus dem Fokus geraten, es ist cool und bequem.

Wir kehren zu den Einstellungen zurück, gehen auf der Seite weiter.

Wir schlagen den Nachrichtenblock. Nach dem Typ zu urteilen, ist dies eine Tablist. Sie wird ausgewählt und hat den gewünschten Status. Erwartungsgemäß erwarten wir, dass er sich mit Hilfe der Pfeile auf den anderen Registerkarten bewegt. Wenn Sie auf die Pfeile klicken, gehen wir in der Tat auf die Tags.



Gehe hinein.



Wir haben die Liste getroffen. Lesen Sie sofort die Anzahl der Elemente in der Gruppe aus. Dies ist praktisch, die Leute verstehen, wie viele Elemente sich in einer Gruppe befinden und wie weit Sie gehen können. Lesen Sie den Titellink selbst. Wir gehen weiter auf die Links.



Wir fallen in die Schaltfläche, die einen alternativen Text enthält. Wenn es nicht dort wäre, würden wir einfach nicht verstehen, was es ist, es gibt ein Symbol. Eine Person mit einem Screenreader sieht dieses Symbol jedoch nicht, also einen alternativen Text. Offensichtliche Rollen und Bedingung, dass diese Popup-Schaltfläche und so weiter.

Das Popup-Fenster hat sich geöffnet, schließt es über die Tastatur, überspringt den Nachrichtenblock.





Wir haben das Wetter, aber wenn es keinen alternativen Text für das Symbol gäbe, würden wir das aktuelle Wetter in St. Petersburg nicht verstehen. Obwohl es so klar sein kann.

Fahren Sie fort, da die Reihenfolge der Elemente nicht verwechselt wird, indem Sie auf die Registerkarte drücken, um die Markierung festzulegen.

Wenn die Seite jedoch groß ist, ist das Gehen mit Tab oder Shift + Tab nicht besonders praktisch. Daher bieten Bildschirmleseprogramme häufig praktische Funktionen zum Navigieren auf Ihrer Website. In VoiceOver wird ein solches Werkzeug als Rotor bezeichnet. Es wird durch Drücken von Strg + Befehlstaste + U geöffnet.



Hier ist ein Menü, das verschiedene Arten von Objekten auf der Seite enthält. Hier waren die ersten Sehenswürdigkeiten. Dies sind die gleichen Orientierungspunkte, besondere Rollen.



Dies bietet dem Benutzer eine bequeme Möglichkeit, direkt zu dem interessierenden Block zu gelangen. Neben den Landmarken gibt es auch Steuerelemente, Schaltflächen, Registerkarten und alles, auf das Sie klicken können, um Aktionen auf der Seite auszulösen.



Dies sind Schlagzeilen. Wir sprachen über die Wichtigkeit von Schlagzeilen. Hier sind alle Schlagzeilen der ersten Ebene, aber Sie können damit bequem zum Beispiel Staus oder Fernsehsendungen gehen. Links sind gleich.



Der Rotor ist wie VoiceOver sehr anpassbar, viele andere Elemente können hier hinzugefügt werden.

Für diejenigen, die das Tool in der Wirtschaft ausprobieren möchten, nützliche Tastenkombinationen.



Lassen Sie uns festlegen, worauf Sie bei der Überprüfung der Verfügbarkeit der Website besonders achten müssen, um die Verfügbarkeit der Website sicherzustellen. Beginnen wir mit den Elementen auf der Seite, dem Layout und der Semantik. Das Layout muss aus Sicht der Semantik und der Mikrosemantik Ihrer Elemente, der Makroelemente Ihrer gesamten Seite, gültig und korrekt sein. Bilder und Medieninhalte sollten ebenso wie Formulare und benutzerdefinierte Komponenten zugänglich sein. Sie haben gesehen, dass der Bildschirmleser häufig Rollen und Zustände verwendet, und dank der Rollen ist es möglich zu verstehen, was auf der Seite gerade passiert. Die Hauptsache ist, dass Ihre Website für alle Personen mit einem schlechten Monitor oder schlechtem Sehvermögen lesbar ist. Es ist notwendig, kompetente Gestaltungselemente einzusetzen. Nun, die Konsistenz. Die Site sollte bequem mit Tab oder Shift + Tab navigiert werden. Alle interaktiven Elemente müssen erreichbar sein.

Lassen Sie uns untersuchen, was uns bei der Überprüfung der Website auf Zugänglichkeit helfen wird. Screenreader. Sie haben gesehen, dass Sie, wenn Sie die Erreichbarkeit sicherstellen oder auf einer Website überprüfen und einfach mit einem Bildschirmleser öffnen möchten, sofort verstehen werden, wie diese Website von Personen gehört und verstanden werden kann, die sie nicht sehen.

Inspector für Barrierefreiheit. Mit seiner Hilfe ist es praktisch, zu beobachten, was sich unter der Haube der Website befindet, was die Semantik Ihres Satzes ist.

Registerkarte "Audits" in DevTools. Meiner Meinung nach erschien es mit dem 60. Chrome. Es ist praktisch, zuzusehen, was auf der Website falsch ist, was an welcher Stelle korrigiert werden kann.

Festgefahren, ähnlich wie bei Audits, - Registerkarte Axt. Dies ist eine Reihe von Tools, mit denen Sie einen automatisierten Test der Verfügbarkeit Ihrer Site durchführen können. In seiner einfachsten Form ist es als Browsererweiterung verfügbar. Laden Sie es einfach herunter, öffnen Sie die gewünschte Site und sehen Sie das folgende Bild. Sie haben eine Liste von Problemen, eine Beschreibung des Problems, den Ort, an dem sich das Problem befindet, und möglicherweise eine Möglichkeit, es zu lösen.



Axe wird auch als Web-Treiber für Selenium präsentiert. Wenn Sie einen Test der Erreichbarkeit Ihrer Testinfrastruktur durchführen möchten, verwenden Sie bitte. Schnell und bequem anpassen. Axe CLI - eigentlich wie die Browsererweiterung, nur in Ihrem Terminal. Unter der Haube befindet sich ein Phantom JS.

Hier sind vier zusätzliche Lernmaterialien. Wenn Ihnen das Thema Zugänglichkeit interessant erschien, können Sie lesen.

-Tutorial von Mozilla;
- Website-Webline mit Tipps zur Erreichbarkeit auf Russisch, sehr cool gestaltet;
- A11ycast - ein Video von den Jungs von Google auf YouTube, ein Podcast, es gibt viele coole Informationen;
- Inklusive Komponenten sind interessant, wie die verfügbaren Komponenten gezielt implementiert werden. Auf dieser Site finden Sie verschiedene Artikel, die Schritt für Schritt zeigen, wie die verschiedenen Konstruktionskomponenten implementiert werden, an die wir gewöhnt sind.

Ich hoffe, Sie verstehen, dass die Barrierefreiheit ein wichtiges Thema ist, das Sie für die Barrierefreiheit Ihrer Websites benötigen. Nur Sie können Menschen mit Behinderungen das Leben leichter machen.

Ссылки на материалы из презентации

ГОСТ Р 52872-2012
WCAG 2.0
Полифилл для inert
Полифилл для :focus-visible
Focus manager
React Focus Lock
Axe Core

Jetzt auch beliebt: