Kleine Veränderungen Können einen Großen Einfluss auf Ihre Website für Barrierefreiheit

0
84

Für einen Anfänger, der Zugänglichkeit kann entmutigend sein. Mit all den besten Absichten in der Welt, die Lernkurve für die Entwicklung von kompatiblen, voll zugänglich, Webseiten und apps ist riesig. Es ist auch schwer zu finden die richtige Beratung, denn es ist eine sich ständig verändernde und zunehmend überfüllten Landschaft.

Ich habe diesen post verfasst, um Ihnen einige Tipps, auf die kleinen Dinge können einen großen Unterschied machen, während Sie hoffentlich nicht auf Ihren Entwicklungsprozess zu viel.

Lassen Sie uns Tauchen Sie ein!

Dokument Struktur und Semantik

Es wohl nicht kommen, so viel von einer überraschung, dass die Strukturierung Ihrer HTML in einer organisierten, semantische Art und Weise wird einen großen Unterschied machen. Screenreader angewiesen auf ein gut strukturiertes Dokument, um eine kohärente Erzählung, so stellen Sie sicher, dass Sie über die Elemente, die HTML5-Spezifikation bietet, effizient und effektiv.

Wenn Sie sich unsicher sind, wie markup, die Ihre Arbeit korrekt, überprüfen Sie Ressourcen, wie HTML5 Arzt, Code Academy und natürlich CSS-Tricks. Sie können auch Artikel wie “Schreiben von HTML mit accessibility in mind” und “Semantische Struktur”, um Sie gehen in die richtige Richtung.

Schauen wir uns drei konkrete Dinge, die helfen können, ermöglichen einen gut strukturierten und semantischen Dokument.

Verwenden Sie ein Einzelnes <main> – Element

Ein gutes Beispiel für ein Gebäude zuständig, die semantische Struktur der Dokumente ist nur ein <main> – element. Diese dienen als Wegweiser für die wichtigsten Inhalte der Seite für Ihre Benutzer.

Vergeben Sie eine ID für Sie und bieten einen skip-link in der Haupt – <header> etwa so:

<header role=”banner”>
<h1>Ihr Seitentitel</h1>
<a href=”#main-content”>Skip to main content</a>
</header>

<!– Weiter unten im Dokument –>
<main id=”main-content”>
<!– Setzen Sie Ihr Hauptteil des Inhalts im hier und anderen wirklich wichtigen Sachen –>
</main>

Dieser kleine trick sollte helfen, Ihre screen-reader-Benutzer in einem großen Weg, weil Sie können gehen Sie voran und überspringen Sie die Phantasie bits und Tauchen Sie ein in Ihre wichtige Inhalte. Es ist auch gut für Tastatur-Benutzer für den gleichen Grund.

Ein weiterer netter touch ist, um hinzufügen :focus-Stil auf der skip-link, dass macht es sichtbar. Versuchen Sie durch drücken der tab-Taste auf dieses post. Recht ordentlich, richtig?

Verwenden Sie Die Elemente Entsprechend

So, <button> – Elemente sind ein Schmerz in den Hintern, um Stil richtig? Das bedeutet nicht, sollten Sie fügen Sie Ihren JavaScript-Ereignisse eine <div> oder ein <a href=”#”> obwohl. Sehen Sie, wenn Sie einen <button>, erhalten Sie die Tastatur-events kostenlos. Sie hilft auch bei der screen-reader-Benutzer, denn es werde verkünden, das element richtig. Schauen Sie sich dieses Beispiel:

Dokument.getElementsByTagName(‘button’)[0].addEventListener(‘click’, evt => {
alert(‘Oh, hey there!’);
});

Wenn ein Benutzer auf das konzentriert-Taste und drücken Sie die enter-Taste, die Veranstaltung wäre Feuer. Das macht sowohl Ihnen und den Nutzern das Leben ein bisschen einfacher. Es lohnt sich, richtig?

Finden Sie die Stift-Schaltfläche, klicken Sie auf Beispiel von Andy Bell (@hankchizljaw) auf CodePen.

Holen Sie Sich Ihre Überschriftenhierarchie Gesperrten

Es ist wirklich für screen-reader-Benutzern das navigieren auf einer Seite mit der überschrift Struktur. Das heißt, wir sollten Ihnen helfen, und erstellen Sie eine schöne Hierarchie für Sie. Werfen wir einen Blick auf ein standard-blog-post:

<main id=”main-content”>
<Artikel>
<!– Der Titel der Seite wird oben in der Haupt – <header> in diesem Beispiel –>
<h2>My awesome blog post</h2>
<p>Vestibulum id ligula porta felis euismod semper.</p>
<p>Vestibulum id ligula porta felis euismod semper.</p>

<h3>Ein sub-Abschnitt von diesem post</h3>
<p>Vestibulum id ligula porta felis euismod semper.</p>

<h4>Unterpunkt Unterpunkt</h4>
<p>Vestibulum id ligula porta felis euismod semper.</p>
</article>
</main>

Mit diesem Beispiel kann der Benutzer navigieren Sie zu dem start von “My awesome blog post” und haben dann die Möglichkeit, zu überspringen, um sub-Sektionen und verschachtelte sub-Abschnitte einfach. Sie können auch zurückspringen. Es ist nur eine nette Art zu helfen, Sie konsumieren die Inhalte, die Sie produziert haben, die so einfach wie möglich.

Es kann empfohlen werden, dass eine Seite ein einziges <h1> – element, auch wenn die W3C-HTML5-Spezifikation sagt, Sie können viele. Ich persönlich Stimme mit der Verwendung eines einzigen <h1>, aber Sie können viele, so lange wie Sie Folgen eine schöne Struktur und Hierarchie. Das ist der Schlüssel hier.

Holen Sie Sich Ihre Farbe Den Kontrast Recht

Zu den WCAG 2.0 AA konform sind, müssen Sie ein Kontrast-Verhältnis von 4:5:1 für normalen text. Dies ist Ihre Absätze, Schaltflächen, navigation, etc. Sie müssen gehen, für ein Verhältnis von 3:1 für größeren text, wie überschriften. Ich würde sagen, das sollte Ihr minimum, da es unglaublich ist, erreichbar mit tools wie Tota11y, Kontrast und die WebAim Gegensatz checker. Können Sie immer noch viel Farbe balance und variation in Ihrem design zu.

Der Grund, dass der Kontrast so wichtig ist, weil es so viel Veränderung in der Umgebung, die Sie wahrscheinlich nicht einmal in Betracht, wie das helle Sonnenlicht und die schlechte Qualität zeigt. Fügen Sie diese, um eine Sehbehinderung oder, sagen wir, ein Migräne-und Sie sind möglicherweise verursacht Probleme für Ihre Benutzer.

Immer der Kontrast Recht haben, eine riesige, positive Wirkung in einem breiten Spektrum der Benutzer.

Verantwortlich Beschriftungen

Wir haben alle Gebäude, die eine Liste von Elementen mit einer nicht-deskriptiven, sondern auch optisch Ansprechend ist “Mehr” – button, richtig? Mehr was obwohl? Wir müssen verantwortlich mit diesem und einigen Kontext.

Ein Weg dies zu erreichen ist durch die optisch versteckt beschreibenden text mit CSS-und ausblenden der nicht-beschreibenden text von Screenreadern. Es ist verlockend, zu verwenden display: none;, aber Screenreader ignorieren können Elemente mit diesem Satz, so müssen wir kreativer sein. Ich so etwas wie diesen kleinen Helfer:

.visuell-hidden {
display: block;
height: 0px;
Breite: 0px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
visibility: hidden;
}

Mit diesem CSS-Code in Ort, können wir etwas wie das hier tun:

<a href=”/link-auf-Ihre-Seite”>
<!– Dieser ist versteckt von einem screen-reader, aber sichtbar, visuell –>
<span aria-hidden=”true”>Mehr</span>

<!– Dies ist sichtbar auf einen Bildschirm-Leser, aber optisch versteckt –>
<span class=”visually-hidden”>Lesen Sie Weiter: “Ihre post-Titel hier”</span>
</a>

Der sehende Benutzer sehen nur “Mehr” und Benutzer von Bildschirmleseprogrammen hören “Lesen Sie Weiter: ‘Ihre post-Titel hier.'” Beide Benutzergruppen zufrieden sind.

Sie können auch erreichen die oben, indem Sie mit einer aria-label auf den <a> – tag. Dies überschreibt den text innerhalb eines screen-reader:

<a href=”/link-zu-deiner-Seite” aria-label=”Weiter zu Lesen:” Ihre post-Titel hier'”>
Mehr
</a>

Kleine Typographie-Verbesserungen Mit Großer Wirkung

Es lohnt sich immer zu erinnern, dass Menschen mit Sehbehinderungen oder Lernschwierigkeiten könnte versuchen, Lesen Sie Ihre Inhalte, so dass einige kleine Optimierungen, um Ihre Typografie kann einen langen Weg gehen.

Ein Inhalt, wie ein Artikel sein sollte-Größe von 16px (oder equivalent unit) auf ein minimum. Es ist auch Wert zu erhöhen Ihre line-height auf rund 1,5 zu. Der Abstand zwischen den Zeilen kann helfen, die Leser mit einer Legasthenie zu verstehen, Ihre Inhalte besser. Die Kombination von Größe und Raum ist auch ideal für ältere Menschen und/oder short-of-sight-Menschen. Auch kleine Zusammenfassungen und beiseite Inhalt sollte mindestens 12px (oder equivalent unit). Alles, was kleiner als, entfremden Benutzer, die kämpfen, um zu Lesen.

Ein weiterer trick ist das hervorheben wichtiger Worte und Phrasen, wenn Ihr Inhalt ist sehr Komplex. Davon profitiert nicht nur die Benutzer, die etwas langsamer bei der Bearbeitung der Inhalte, aber es hilft auch Menschen, die gerne Scannen über einen Artikel, wie ich es Tue.

Schließlich sind auf diesem Abschnitt, würde ich Ihnen raten, vorsichtig zu sein mit Ihrer font-Auswahl. Schriftarten mit komplexen Ligaturen und Dekorative Elemente können wirklich störend, also vielleicht beschränken Sie die Verwendung der-Taste, große überschriften nur. Es wurde auch darauf hingewiesen, dass sans-serif-Schriften sind besser für die Leser mit einer Legasthenie. Lesen Sie diesen Artikel, um mehr darüber und andere text-Formatierung-Tipps.

Erweitern-Tastatur-Unterstützung

Es gibt ein paar wenige Anpassungen, die Sie tun können, um zu helfen, Benutzer, die in Erster Linie verwenden Sie Ihre Tastatur zum navigieren Ihrer website.

Sagen hast du eine kleine Taste, zeigt ein Dialog, wenn Sie auf es klicken. Sollten Sie fügen Sie einen Ereignis-die escape-Taste, die es versteckt. Hier ist ein Beispiel-snippet:

Dokument.addEventListener(‘keyup’, (evt) => {
if(evt.keyCode === 27) {
// Ausführen was auch immer code versteckt Dialog
}
});

Finden Sie die Stift-Taste Escape-demo von Andy Bell (@hankchizljaw) auf CodePen.

Ein weiteres zwicken Sie tun können, um unsere Tastatur-Navigation Kumpels ist nicht versteckt, den Fokus von Ihnen. Browser geben uns darauf konzentrieren, Staaten kostenlos mit outline. Ich weiß, es kann hässlich Aussehen, aber heiß-es ist verdammt nützlich für Tastatur-Benutzer. Wenn Sie möchten, um loszuwerden, das Blaue Leuchten, bekomme ich es—nur bitte verwenden Sie die :focus-pseudo-Selektor hinzufügen eines offensichtlichen Zustand zu ändern, um es statt. Hier ein Beispiel:

.Ihre-element {
Hintergrundfarbe: rot;
}

.Ihre-element:focus {
outline: none; /* wiederherstellen der Standardeinstellungen */
box-shadow: 0 0 0 3px black; /* Eine sehr offensichtliche Zustand ändern */
}

Verlassen Sie sich nicht auf Farbe Allein, um zu Kommunizieren Zustand Ändert

Let ‘ s Ende auf einem wirklich wichtig ist. Farbe sollte nicht verlassen werden, allein um die Kommunikation der Zustand ändert. Nehmen Sie dieses Szenario als Beispiel:

Du hast eine Taste, die Beiträge einer form. Sie schrieb einige nette JavaScript-das macht es gehen Grau, während es sendet die Daten. Es dann entweder grün oder rot, je nachdem, was der status ist.

Für Farbenblinde Benutzer, dies ist ein Alptraum. Zu Ihnen, die Schaltfläche ist möglicherweise kaum verändert genug für Sie zu bemerken, so können Sie einfach weiter klicken und klicken, während immer wirklich frustriert. Dies ist nicht ideal.

Also, anstatt sich auf die Farbe, lassen Sie uns zu verbessern, die mit einer status-Nachricht, unterstützt Sie die Schaltfläche Status auf Antwort.

Finden Sie den Stift Verbesserten Zustand zu ändern, Kommunikations-demo mit Andy Bell (@hankchizljaw) auf CodePen.

Das Muster ist ein guter Weg, um schnell zu kommunizieren, um den Benutzer, dass sich etwas geändert hat und der Einsatz von Farbe, text und Ikonographie deutlich kommuniziert, ändern. Die Schaltfläche deaktivieren, während die Antwort verarbeitet wird, wird auch eine große Hilfe für den Benutzer.

Zusammenfassung

Diese kleinen Tipps sollten einen großen Unterschied machen, um Ihre Nutzer, und ich hoffe, Sie Tauchen ein in Ihre Projekte und implementieren einige von Ihnen.

Sie sollten auch halten Sie das lernen über die Zugänglichkeit. Ich empfehle, für Leute wie Heydon Pickering, Scott O ‘ Hara, Laura Kalbag, und Rob Dobson auf . Ich empfehle auch, dass Sie überprüfen Sie Ressourcen, wie Integrative Komponenten und der A11y-Projekt.

Je größer Eure Erkenntnis wird, desto besser sind Ihre Webseiten und Produkte werden für ein viel breiteres Publikum. Das kann nur eine gute Sache sein, richtig?