Die Verbesserung der Web-Benutzererfahrung für Sehbehinderte

Question

Ich wurde zu einem letzte Episode von Hansel wo Scott Hanselman besprach Barrierefreiheit in Web-Anwendungen und es hat ich in meinen eigenen Anwendungen über die Zugänglichkeit zu denken.

Wir alle wissen, wie wichtig semantischen Markup in unseren Web-Anwendungen, wie es um die Zugänglichkeit betrifft, aber was andere einfache Erweiterungen, die die Benutzererfahrung für behinderte Nutzer zu verbessern gemacht werden können?

In der Folge gibt es eine Reihe von Zeiten war, wo ich meine Stirn schlug und sagte: „Natürlich! Warum habe ich das nicht getan?“ Insbesondere sprach Scott über eine Website, die einen versteckten Link oben eine Webseite platziert, auf dem „zum Inhalt“. Der Link wird nur für Personen sichtbar, Screenreadern verwenden und es erlaubt, ihre Screenreader Vergangenheit Menüs und anderen sekundären Inhalt zu springen. Es ist so offensichtlich, dass die Verbesserung und dennoch einfach es ist nicht daran zu denken.

Es gibt mehr zu Zugänglichkeit und die allgemeine Benutzerfreundlichkeit als nur gültiges XHTML erstellen und einen Tag aufgerufen wird.

Was sind einige Ihrer einfachen Tricks für die User Experience für die Vision Verbesserung beeinträchtigt?

Answer 1

Schauen Sie sich Fangs

Fangs ist ein In-Browser-Tool für Firefox, die emuliert was für ein Bildschirmleseprogramm „sieht“, wenn eine Webseite besuchen. Seine Funktion ist einfach: die Ausgabe ein Transkript von dem, was ein Bildschirmlesegerät wird an einen Benutzer ausgelesen, wenn eine Webseite besucht wird. Es ist ein hilfreiches Werkzeug für die schnelle Analyse, wenn Sie Ihre Inhalte effektiv strukturiert haben, so dass es ist verständlich und nutzbar durch sehbehinderte Personen, ohne dass Sie lernen, eine Screen-Reader-Anwendung zu verwenden (und Kauf) wie JAWS oder Windows Augen.

Answer 2

zugängliche Seiten zu schaffen, ist etwas, das über schwer zu glauben, wenn man es nie getan haben. Allerdings, wenn Sie die grundlegenden Konzepte lernen, es ist sehr einfach, in 95% der Fälle zu tun. Ich werde meistens wiederholen, was andere gesagt haben, aber:

1. Verwenden Sie nur Tabellen für tabellarische Daten
2. Stellen Sie sicher, dass Sie die semantischen Werkzeuge, um Sie über HTML zur Verfügung verwenden. Das bedeutet, unter Verwendung von TH mit einem Attribut scope. Mit anstelle von und anstelle von . Verwenden Sie die Akronym und Abk -Tags. Verwenden Sie Definitionslisten. Ich kann auf diese Dinge erweitern, wenn jemand wünscht.

3. Eines der wichtigsten Dinge ist, die Label -Tag auf Eingabefelder zu verwenden. Für jedes Eingabefeld, Optionsfeld, Kontrollkästchen und Texteingabe sollten Sie haben:

   Benutzername:

4. Fügen Sie ein „überspringen Navigation“ oder „zur Navigation“, je nachdem, wo große Brocken von Text sind. Wenn Sie auf eine Regierung Site arbeiten sollte dies zur zweiten Natur sein, dass alles, was Sie erstellen können Sie sich wiederholende Informationen überspringen.

5. Sie Farben nicht zur Betonung verwenden.

6. Stellen Sie sicher, dass alle Ihre Text geändert werden kann. Diese ziemlich Mittel verwenden "px" nicht in Ihrem CSS.

7. Ich werde wieder betonen dies: semantischen Seiten erstellen Mit H Tags für Ihre Titel.. Verwenden Sie ul / li für die Navigation.

8. Mit dem alt Attribute auf alle Bildern. Wenn Sie einen Abstandhalter gif haben ... naja .. nicht. Andernfalls erklären, was das Bild ist von und was seine Bedeutung für den Inhalt ist es verknüpft ist. nicht „ein Diagramm“ als Alt-Tag verwenden. Verwenden Sie "Chart of YTD Finanzen: $ 5,000 Q1, Q2 $ 4.000, $ 8.000 Q3". Oder etwas ähnliches

9. Geben Sie Untertitelung oder Transkripte für alle Audio- und Videokomponenten

Der Schlüssel hier ist die mit visuellem zu schaffen, Hören und Motor Beeinträchtigungen die gleiche Erfahrung wie die mit Standard körperlichen Fähigkeiten. Wenn Sie nicht Registerkarte in ein Feld kann, kann ein Bildschirmleser nicht. Wenn Sie nicht auf den Text neben einem Kontrollkästchen klicken können, wird der Bildschirmleser weiß nicht, der Text in die Kontrollkästchen in Beziehung steht.

Sie sollten Ihre Website ohne Sheets (Ctrl-Shift-s häufig anzeigen, wenn Sie Firefox und die Web Developer Toolbar ), um zu sehen, ob die Seite Sinn macht. Wenn es keinen Sinn für Sie als sehenden einzelnes macht, wird es keinen Sinn, jemand mit einem Screenreader machen.

Answer 3

Es ist schon eine Weile, da ich in einem Job bin, wo wir in Abschnitt 508, mussten haften aber hier ist, was ich erinnere mich, dass durch die anderen Plakate nicht berührt ...

1. Verwenden Sie nur Tabellen für Daten. Verwenden Sie keine Tabellen für das Layout, wenn Sie es vermeiden können.
2. Bei der Verwendung von Tabellen für Daten, die Spaltenüberschriften in TH-Tags verschachtelt sein sollten und Sie sollen Titel und Umfang Attribute verwenden. Ihre Tabellen-Tags sollten die Zusammenfassung Attribut verwenden.
3. Die Bilder sollten alle einen Wert für das Alt-Attribut haben, das beschreibt, was im Bild vor sich geht und wenn das Bild keinen Zweck dient (es ist ein Shim-Bild oder etwas ähnliches), dann sollte das alt-Attribut auf leere Zeichenfolge festgelegt werden.
4. Versuchen Sie, einen Text-zu-Sprache-Leser und / oder navigieren Sie nur über die Tastatur und / oder Stylesheets auszuschalten. Ich glaube, Sie JAWS kaufen müssen, aber ich bin sicher, dass es da draußen frei Screen-Reader sind. Sie brauchen eine Website über einen Bildschirmleser zu erleben, wirklich zu verstehen, wie schwierig die meisten Web-Seiten ohne die Signale zu navigieren sind, die Leser Bildschirm interpretieren.

Answer 4

„Vision beeinträchtigt“ schließt Farbenblindheit. Früher habe ich mit jemandem arbeiten, nicht von grün zu gut rot unterscheiden konnte, so dass alle Anwendungen, die eine Ampel Stil-Schnittstelle verwendet wurden, waren sehr schwierig für ihn zu verwenden. In der Industrie arbeiten wir in, Warnungen in Reihen waren farbcodiert, so ein andere Form der Anzeige war nützlich für ihn, wie eine zusätzliche Spalte in der Zeile mit dem Text des Alarmtypen ( „Notfall“, „Warnung“ etc. ).

Answer 5

Das größte Problem mit Screenreadern ist in der Regel Tabellen Dinge auf Ihrer Seite zu positionieren. Screenreadern nicht wirklich diejenigen behandeln. Setzen Sie Sachen in divs in Ihrem HTML und steckt sie in einer sinnvollen Reihenfolge. Positionieren Sie dann die divs auf Ihrer Seite mit CSS. Verwenden Sie Tabellen Inhalt anzuzeigen, die in einer Tabelle sein sollten.

Answer 6

Der Code für viele Web-Seiten ist so strukturiert, wie:

1. Header
2. Top Navigation
3. Linke Navigation
4. Inhalt
5. Footer

Wenn auf diese Weise strukturiert ist, dann ist die versteckte Link für „Hauptinhalt“ von Vorteil ist. Doch mit CSS-Layout, können Sie in der Lage sein, diese neu zu ordnen, so dass Sie:

1. Inhalt
2. Header
3. Top Navigation
4. Linke Navigation
5. Footer

Sie dann CSS-Positionierung verwenden und schwimmt diese verschiedenen Elemente um auf dem Bildschirm zu bewegen, um die Seite mit der Art und Weise machen Sie sehen es aussehen soll.

Der Hauptvorteil eine Webseite auf diese Weise zu strukturieren ist, dass, wenn der Browser das CSS nicht unterstützt, dann wird der Inhalt zuerst auf der Seite. Neben Screen-Reader, ist dies von Vorteil für mobile Geräte und Suchmaschinen.

Answer 7

Für teilweise sehbehinderten wir sicher, dass Text machen müssen, ist nicht excessivly klein und Kontraste im Wesentlichen die Hintergrundfarbe. Wir sollten auch sicherstellen, dass Text relative Größe Einheiten unter Verwendung von wie em resizable ist ‚s anstelle von absoluten Einheiten wie Pixel ‘ s (obwohl, meiner Meinung nach, ist dies immer weniger ein Problem als Browser zunehmend Zoomen über den Text Redimensionierung begünstigende).

Für Nutzer von Screenreadern, ist es hilfreich, eine gute Vorstellung von der Art und Weise Screen-Reader verwendet werden actualy zu erhalten. Der folgende Artikel stellt guidlines basierend auf Beobachtungen von Blinden das Surfen im Web Screen-Reader verwendet wird; es ist jetzt ein wenig veraltet, sondern gibt Ihnen ein gutes Gefühl für das, was Benutzer von Screenreadern helfen wird, und was nicht:

http://redish.net/content/papers/interactions.html

Darüber hinaus hat die amerikanische Stiftung für Blinde ein Bereich ihrer Website rel="nofollow gewidmet der Beratung für Web-Entwickler, wie für sehbehinderte Benutzer gerecht zu werden.

Neben den sehbehinderte, brauchen wir Menschen mit Behinderungen zu berücksichtigen, die sie von der Verwendung einer Maus zu verhindern, und auch solche mit neurologischen Behinderungen. Wenn jemand Ressourcen zur Verfügung stellen kann Ratschläge geben, wie für diejenigen Personen gerecht zu werden, das wäre toll.