Die Verbesserung der Zugänglichkeit von 24 Möglichkeiten

0
89

Dachte ich vor kurzem über die Natur meiner Arbeit und die Aspekte, die ich am meisten genieße. In einer Rolle, die oft überspannen die reichen von design und Entwicklung, ob die Bearbeitung zu kopieren, die Bewertung der Gestaltung der Schnittstelle oder code-refactoring, ich bin gekommen, zu erkennen, dass meine Interessen liegen in den Akt der überprüfung und Verfeinerung.

Meine Arbeit am 24 Möglichkeiten, ist so ein Fall. Da Drew McLellan bat mich um eine Neugestaltung der Website im Jahr 2013, ich war schon als Teil des Teams, zu helfen, zu überprüfen, Bearbeiten und formatieren von Artikeln. Aber ich habe auch in der Lage gewesen, um zu erfüllen den Wunsch äußerte ich beim Start der Neugestaltung:

Ich bin ein großer Gläubiger in iteration und nicht die Behandlung eine website nie fertig. Ich hoffe, was dieses Jahr erschienen, kann als ein Fundament, und das design wird sich in den kommenden Jahren.

In den vergangenen Jahren, da die Werkzeuge haben sich verbessert und bewährte Verfahren gereift, ich habe gezwickt design und Refactoring des Codes und entwickelte eine Komponenten-Bibliothek in den Prozess.

Die 24 Möglichkeiten-Startseite

Ein Schwerpunkt Barrierefreiheit

Dieses Jahr habe ich das hören Leute wie Laura Kalbag reden über Barrierefreiheit im Sinne des universal design, und folgte blogs wie Heydon Pickering – Inclusive-Komponenten, die regelt, wie zu entwerfen und umzusetzen, gemeinsame Interaktionsmuster mit einer integrativen Denkweise. Plötzlich, das heikle Thema Barrierefreiheit hat gefühlt mehr ansprechbar und weniger dogmatisch.

Mit all diesem wissen verdaut, ich war gespannt, wie sich 24 Möglichkeiten ergehen würde, wenn unter dem Mikroskop. In diesem Artikel werde ich mich auf fünf Bereiche, in denen ich war in der Lage, Verbesserungen zu machen:

  • Seite Struktur
  • Kennzeichnung der Elemente
  • Die navigation mit der Tastatur
  • Hörerlebnis
  • Allgemeine usability

Bevor ich beginne, eine Anmerkung des Dankes. Nach einer ersten Reihe von änderungen, fragte ich meinen Freund und accessibility-Experte Francis Storr die Begutachtung meiner Arbeit. Er entdeckt eine Anzahl weiterer Probleme, teilweise das Ergebnis seiner Erfahrung in diesem Bereich, aber auch aus getestet, die die Website mit einer Reihe von verschiedenen unterstützenden tools.

Umdenken-Seite Struktur

Der ursprüngliche Entwurf hatte angenommen, ein mobile-first-Ansatz. Die navigation war deprioritized und platziert in Richtung der Unterseite der Seite. Um sicherzustellen, dass es erreicht werden konnte von oben von der Seite in nicht-JavaScript-Szenarien, habe ich ein überspringen navigation link. Wenn JavaScript verfügbar war, wurde diese Verbindung durch Kooptation zu enthüllen, navigation Schublade, die würde die Folie von der Oberseite oder von rechts, je nach der Breite des Viewports. Daraus entstand die folgende Seitenstruktur:

<header class=”c-banner”>…</header>
<a class=”c-Menü” href=”#menu”>Sprung-Menü</a>
<main class=”c-main”>…</main>
<nav class=”c-navigation” id=”menu”>
<div class=”c-traverse-nav”>…</div>
<div class=”c-navigation__Schublade”/>…</div>
</nav>
<footer class=”c-contentinfo”>…</footer>

Im Nachhinein war dies problematisch, in eine Reihe von Möglichkeiten:

  • Die Menü-Taste (.c-Menü) war nicht neben dem element, das es kontrolliert (c-navigation-drawer). Bewegt den Fokus um die Seite so verwirrend sein kann, vor allem, wenn es nicht richtig gehandhabt wird.
  • Die gesamte navigation auf der Website wurde zusammengefasst, obwohl jede Gruppe von links, die einem anderen Zweck dienten.
  • Die Schublade Verhalten stützte sich auf die mit einem link verhält sich wie eine Schaltfläche. Aber die erste Regel der ARIE Staaten:

    Wenn Sie können, verwenden Sie eine native HTML-element oder-Attribut mit der Semantik und Verhalten, die Sie benötigen, bereits integriert, statt Zweitverwertung eines Elements und das hinzufügen von ARIA-Rolle, Zustand oder Eigenschaft zugänglich zu machen, dann tun Sie so

    Im letzten Jahr habe ich aktualisiert, das JavaScript so, dass dieser link ersetzt durch einen button, doch dieser Komplexität war ein Hinweis, dass meine ursprüngliche Lösung war sub-optimal.

Hier ist die Struktur kam ich auf heute:

<header class=”c-banner”>

<a class=”c-banner__skip” href=”#main”>zum Inhalt springen</a>
</header>
<div class=”c-Menü”>
<button class=”c-Menü__button”>…</button>
<div class=”c-Menü__Schublade”>…</div>
</div>
<main class=”c-main” id=”main”>…</main>
<nav class=”c-traverse-nav”>…</nav>
<footer class=”c-contentinfo”>…</footer>

Bewegen Sie die navigation in Richtung der oben auf der Seite gemeint, den Knopf und die Schublade wurden nun neben einander. Die Menü-Taste ist nicht mehr mit zwei Gesichtern; es ist und wird immer sein a-Taste.

Ein Nachteil dieses Ansatzes ist, dass die navigation kann gehört werden bei jedem Besuch einer neuen Seite. Wieder, wir verwenden können, einen skip-link, aber diesmal eine, die Punkte auf den content-block (#main). Anstatt ausblenden Isoliertes element von einem bestimmten Benutzer, wird es sichtbar im Fokus.

Diese Struktur kann weniger ideologisch rein, aber es ist weit mehr pragmatisch. Dies wurde ein immer wiederkehrendes Thema. In der Tat, daß er jede Hoffnung auf die HTML5 outline-Algorithmus jemals wird unterstützt von den Browsern, die ich nicht mehr mit h1 für überschriften und folgte der Empfehlung, die überschrift Ränge sollten verwendet werden, um die Struktur eines Dokuments darzustellen. statt.

Die Verbesserung Der Tastatur Navigation

Als die am meisten interaktive Komponente auf der Website, das Menü war das nicht überraschend Fokus meiner Beurteilung. Der Entwurf bestimmt, dass der navigation drawer sollte sich Verhalten wie ein dialog, ein interface-pattern, die mit sich bringt eine Reihe von Annahmen. Diese sind im detail beschrieben in eBay-GEIST-Muster, aber im wesentlichen ein dialog, zieht den Fokus Weg von anderen Elementen auf der Seite und ist modal; nur Elemente innerhalb es kann betrieben werden, während es geöffnet ist.

Ich hatte vorher zusammengeschustert verschiedene bits von JavaScript zu handhaben Fokussierung (cobbling, die an verschiedenen stellen produziert die seltsamen bug, wie andernfalls zu zeichnen Fokus auf das erste element im dialog), aber vernachlässigt hatte, um anzuzeigen, das Menü der Rolle. Mit festen diese Themen (hinzufügen role= “dialog”, wenn das Menü offen ist), Francis wies darauf hin, dass Screenreader könnte immer noch Zugriff auf links ausserhalb der dialog, wenn er offen war. In macOS VoiceOver beispielsweise das drücken von CTRL + OPT + CMD + L, um die navigieren Sie links im Menü, wäre in der Tat verkünden, jeder link auf der Seite.

Die Lösung war, daneben alles, was außerhalb der dialog als “inert”. Rob Dodson beschreibt dies ausführlich in seinem video Zugänglich Modalen Dialogen. Die Umsetzung dieser kann ein bisschen fummelig, aber ein Vorschlag zur Einführung eines inerten Attribut wäre dies einfacher zu verwalten. In der Zwischenzeit sieht der Vorschlag ein polyfill, so dass Sie können diese Funktion verwenden, heute.

Ich habe festgestellt, dass durch das nachdenken über eine Schnittstelle in Bezug auf die gemeinsame Interaktionsmuster, und wie man Sie betreiben sollte, um allgemein verstanden wird, hat mir geholfen, vermeiden von Komplexität, und schreiben Sie robuster code. In der Tat, ein Schritt in die Welt der Zugänglichkeit hat, entdeckt eine fülle von nützlichen Ressourcen, mit gut geschriebenen JavaScript-Beispiele viel. Angesichts meiner schwierigen Beziehung mit der web-Programmiersprache, diese haben sich von unschätzbarem Wert.

Richtig Kennzeichnungselemente

Eine gute Menge der Barrierefreiheit kommt es auf die Kennzeichnung der Dinge, die sich auf die visuelle Erscheinung allein, um Inhalte zu vermitteln. Ähnlich wie das alt-Attribut ermöglicht es uns, zu beschreiben, Bilder, aria-label (und Ihre Beziehungen) erweitern Sie diese Fähigkeit auch auf andere Elemente.

Navigation-Komponente, die es Benutzern ermöglicht, sich zu bewegen zwischen den Artikeln einer Serie.

Hier ist das markup war ich mit in der Navigations-element, das Benutzern erlaubt, traverse vorherigen und nächsten Artikel innerhalb einer Serie:

<div class=”c-traverse-nav”>
<a rel=”prev” href=”/2016/wir-brauchen-zu-reden-über-technical-debt/”
Daten-Sequenz-title=”Wir Müssen Reden, Über Technische Schuld”>
<svg width=”20″ height=”20″ viewBox=”0 0 200 200″ role=”img”>
<path d=”M50 100l85 85 7-7-78-78 78-78-7-7″/>
</svg>
<span class=”u-hidden”>Vorheriger Artikel</span>
</a>

<a rel=”next” href=”/2016/was-der-Kuckuck-ist-inclusive-design/”
Daten-Sequenz-title=”Was zum Teufel Ist Inclusive Design?”>
<span class=”u-hidden”>Nächster Artikel</span>
<svg width=”20″ height=”20″ viewBox=”0 0 200 200″ role=”img”>
<path d=”M150 100l-85 85-7-7 78-78-78-78 7-7″/>
</svg>
</a>
</div>

Während ich hatte die text-Inhalte für diese links, diese Komponente noch eine Reihe von Fragen:

  • Kein Hinweis wurde gegeben, als die Rolle, die diese verbindungen spielen und Ihre Beziehung zu einander.
  • Mit Rolle=’img’ auf die SVG-icons, aber nicht die jedem zugänglich sind Namen, war ähnlich, einschließlich der Bilder ohne alt-Attribute.
  • Nützliche Informationen, in diesem Fall der Titel der vorherigen und nächsten Artikel, war versteckt in ein data – Attribut. Dieses Attribut wurde in der stylesheet-Inhalt hinzufügen, der angezeigt wird, in animierten ‘klappen’, die auf erscheinen hover:

.c-traverse-nav a[rel=prev]:hover::after {
Inhalt: ‘Previous: ‘ attr(Daten-Sequenz-Titel);
}

.c-traverse-nav a[rel=next]:hover::after {
Inhalt: “Weiter: ‘ attr(Daten-Sequenz-Titel);
}

Sinnvolle Inhalte in CSS? Das sollte eine rote fahne. Ich überarbeitete diese Komponente wie folgt:

<nav class=”c-traverse-nav” aria-label=”Artikel”>
<a rel=”prev” href=”/2016/was-der-Kuckuck-ist-inclusive-design/”
aria-label=”Vorherige: Wir Müssen Reden, Über Technische Schuld”>
<svg width=”20″ height=”20″ viewBox=”0 0 200 200″ justierbares=”false” aria-hidden=”true”>
<path d=”M50 100l85 85 7-7-78-78 78-78-7-7″/>
</svg>
</a>

<a rel=”next” href=”/2016/was-der-Kuckuck-ist-inclusive-design/”
aria-label=”Weiter: Was zum Teufel Ist Inclusive Design?”>
<svg width=”20″ height=”20″ viewBox=”0 0 200 200″ justierbares=”false” aria-hidden=”true”>
<path d=”M150 100l-85 85-7-7 78-78-78-78 7-7″/>
</svg>
</a>
</nav>

Das erste, was ich Tat, war, geben Sie diese Sammlung von links ein label. Ich ursprünglich wählen Sie die Artikel-navigation. Allerdings, bei der Prüfung VoiceOver ankündigen würde: navigation, Artikel, navigation. Als das nav-element beschreibt bereits die Rolle, wir müssen nur zusätzliche Informationen über die Art der navigation diese ist.

Zweitens, auf den Rat von Franziskus, fügte ich justierbares=’false’ für alle, die inline-SVG-markup. Dies wird durch einen bug im IE11, wo SVGs sind Tastatur Isoliertes standardmäßig.

Für die Angabe der SVG-icons, hatte ich zwei Möglichkeiten. Ich könnte entweder bewegen Sie den verborgenen text-Inhalten, um diese Symbole mit aria-label, oder entfernen Sie Sie aus der accessibility-tree vollständig mit aria-hidden. In Anbetracht der zweiten option, die ich feststellte, dass die Zusammenführung der versteckte text mit dem data – Attribut, und verwenden Sie diese zusammengefassten Informationen innerhalb einer aria-label-Attribut. Plötzlich, mein CSS wesentlich einfacher geworden:

.c-traverse-nav a:hover::after {
content: attr(aria-label);
}

Zugänglich markup ist nützlich markup.

In Anbetracht der Akustischen Erlebnis

Navigieren Sie die Website mit einem screen-reader führen, um mir ein paar andere kleine änderungen vorgenommen. Zum Beispiel, ein paar links auf der Website gehören ein nach-rechts-Pfeil, visual gedeihen, erstellt mit Hilfe der folgenden CSS:

.c-fortsetzen::after {
content: ‘203A’; /* Single Right-Pointing Angle Quotation Mark */
}

Allerdings, Bildschirm-Lesegeräte in der Regel verkünden generated content. Wenn diese links wurden verlesen, man würde Sie hören, Unsinn wie diese:

link mehr Artikel von drew single right-pointing angle quotation mark.

Hinzufügen sprechen: keiner hatte keinen Effekt (CSS-aurale Eigenschaften haben, die wenig Unterstützung). Aber ich könnte einen ähnlichen Pfeil mit CSS-borders:

.c-fortsetzen::after {
display: inline-block;
vertical-align: middle;
Höhe: 0.375 em;
Breite: 0.375 em;
Grenze: 0.1875 em solid;
border-color: currentColor currentColor transparent transparent;
transform: rotate(45deg);
Inhalt: “;
}

Weiter links vor und nach Verbesserungen. Während Sie ähnlich Aussehen, das überarbeitete design sehr viel besser klingt.

Ich habe auch Verbesserungen bei der Formatierung von Autorennamen in der Artikel-Zusammenfassungen. Ursprünglich wurden diese unterschieden sich von den rest der Auszug von styling Sie als text in Großbuchstaben. Francis wies darauf hin, dass einige Bild-Leser zu buchstabieren Großbuchstaben (unabhängig davon, ob Sie erscheinen in der HTML-oder verändert haben (durch CSS), wenn Sie nicht Zauber ein bekanntes Wort. Zum Beispiel VoiceOver und NVDA haben ärger mit Chris Coyier Nachname, so sein name verlesen werden, wie Chris, C-O-Y-I-E-R. Die einfache Lösung war, zu unterscheiden-Namen mit ermutigenden text statt.

Wenn ich ehrlich bin, habe ich schon etwas arrogant in der Vergangenheit, zu denken, dass durch die Verwendung von semantischem markup und progressive enhancement, ich brauchen sich keine sorgen zu viel über Barrierefreiheit. Während der Verwendung der richtigen Elemente, und erwägen, eine Schnittstelle, die nicht nur in visueller Hinsicht ist wichtig, das ist das absolute minimum. Ein Verständnis der verschiedenen unterstützenden Technologien und die Bereitschaft zu testen, mit Ihnen, ist genauso wichtig.

Die Beurteilung Von Allgemeinen Usability

Gedanken über Barrierefreiheit zu mir geführt Verbesserung der Allgemeinen usability, zu.

Für diese Jahre eine Reihe von Artikeln, die wir nicht mehr verlinkt der Autor die Webseiten von Artikel-Auszüge. Diese historischen überbleibsel war schlecht gelöst, bisher; wenn Sie geschehen, klicken Sie auf den Namen des Autors Sie genommen werden würde, um Ihre website, nicht der Artikel, den Sie erwarten würden. Auch der Kommentar zählt, die in Verbindung mit den Kommentar-Abschnitt auf der Artikel-Seite (die sich verbunden mit einer separaten Kommentare-Seite). Wahnsinn!

Nun, jeder Artikel hat einen link, der Artikel. Eine Homepage, die einmal beteiligt tabbing durch 24×3 links, jetzt ist Sie leiser und viel einfacher zu navigieren für alle.

Zu den weiteren Verbesserungen gehörten die Sicherstellung der Website responsive ist sowohl in der Höhe, als auch Breite, wodurch die navigation im Menü, können entlassen werden, wenn Sie auf außerhalb von Ihr, und eine überprüfung der Gesamtleistung. Diese könnten nicht berücksichtigt werden, die Barrierefreiheit verbessert wird, aber ich bin mir nicht so sicher. Zu vermuten wäre, zu denken, Barrierefreiheit ist ein völlig separates Anliegen. In der Tat, die änderungen, die zugunsten einer Gruppe von Anwendern wird in der Regel zum nutzen aller.

Etwas neues zu schaffen, wird immer die Aufmerksamkeit und Bewunderung, aber es gibt eine unter-gefeiert Adel zu verbessern, was bereits vorhanden ist. Obwohl nicht alle änderungen können visuell sein, Sie kann genau so viel Einfluss. Ich weiß, dass hatten wir uns entschieden, die Neugestaltung der Webseite in diesem Jahr, viele dieser Verbesserungen wären nicht gemacht worden. Ich hoffe, diese übersicht wird Sie ermutigen, zu prüfen, Ihre eigenen Projekte und denken über ähnliche änderungen, die Sie machen könnten.

Mit einem wachsenden Bewusstsein für die Probleme, und erweitern Sie Ihr wissen von den zur Verfügung stehenden Instrumenten ist eine wesentliche Voraussetzung des Arbeitens im web. Jedoch nicht halten, dass das wissen gespeichert, bis für die Zukunft, wenn Sie können, gehen Sie zurück und korrigieren Sie Ihre älteren Projekte zu.