Was sind die Mindestschritte, die ich ausführen muss, um sicherzustellen, dass meine Website zugänglich ist?


35

Ich versuche, einem sehr wichtigen Standard zu folgen, den ich bis vor kurzem ignoriert habe. Ich möchte sicherstellen, dass meine Seiten einem großen Teil von Menschen mit Behinderungen zugänglich sind. Ich konzentriere mich hauptsächlich auf Tutorials, die text- und bildintensiv sind, aber keine Videos / Flashs oder Animationen.

Was ist eine Checkliste, die ich befolgen kann, um sicherzustellen, dass viele Menschen mit Behinderungen gute Erfahrungen mit der Nutzung meiner Website machen können, und welche Behinderungen sollten mir am besten bewusst sein?

Ich weiß, dass ich unmöglich allen gefallen kann. Ich habe die W3C-Richtlinien durchgearbeitet , bin mir jedoch nicht ganz sicher, welche Standards für mich gelten. Ich erstelle keine Webanwendungen, sondern erstelle hauptsächlich Wikis wie Informationsaustausch, Blogs und gelegentliche Foren.


uxexchange.com?
Bobby Jack

Antworten:


18
  • Stellen Sie sicher, dass jedes Bild Alternativtext enthält.
  • Stellen Sie sicher, dass Ihr Farbschema für Menschen mit Farbenblindheit geeignet ist.
  • Bieten Sie ein kontrastreiches Layout oder ein großes Textlayout für Sehbehinderte an.
  • Stellen Sie sicher, dass Ihre Links sinnvoll sind, wenn Sie außerhalb des Kontexts lesen (dh schreiben Sie nicht einfach "hier klicken").
  • Stellen Sie sicher, dass Ihre Website weiterhin die volle Grundfunktionalität bietet, wenn der Benutzer keine JavaScript-Unterstützung hat.

Das W3 bietet auf seiner Website einige grundlegende Tipps zur Barrierefreiheit . Joe Clark stellt eine kostenlose Online-Version seines Buches "Building Accessible Websites" mit vielen nützlichen Informationen zur Verfügung.


1
Es gibt verschiedene Einschränkungen für die 'Alt Text'-Regel. Leider habe ich mit Leuten zusammengearbeitet, die das als feste Regel behandeln - dh JEDES Bild MUSS ein alt-Attribut haben. Dann fügen sie einem Logo-Bild Dinge wie "Unser Firmenlogo" und einem mit einem Twitter-Konto verknüpften Bild "ein großes blaues T" hinzu.
Bobby Jack

Mit dem Alt-Tag glaube ich, dass JEDES Bild eines haben sollte. Wenn Sie mit einem Screenreader arbeiten, müssen Sie ihm mitteilen, was zu tun ist. Wenn Ihr Bild nur visuell ansprechend ist und keinen anderen Wert hat, verwenden Sie alt = "", damit der Bildschirmleser es zu ignorieren weiß. Wenn es sich bei Ihrem Bild um ein Diagramm oder eine Kopfzeile handelt, müssen Sie die Informationen in das ALT-Tag aufnehmen, damit der Bildschirmleser sowie Personen, die Bilder deaktivieren, dies nicht verpassen.
ph33nyx

8

Das Erstellen Ihrer Auszeichnungssemantik ist ein enormer Schritt in Richtung Barrierefreiheit. Wenn Ihre Website ohne CSS navigiert werden kann und der Inhalt Sinn ergibt, ist alles andere nur eine visuelle Sauce!


1
Und noch viel mehr Spaß am nackten CSS-Tag :)
Tim Post

2
Haha, natürlich! Im Ernst, viele Menschen gehen davon aus, dass Barrierefreiheit nur mit Design zu tun hat. Das genaue Gegenteil ist der Fall. Wenn Sie Ihre Inhalte so gestalten können, dass sie ohne Design funktionieren, kann eine Maschine (und damit ein Mensch) immer darauf zugreifen es.
Toby

7

Erstens bedeutet der "Behinderte" nichts!

Schauen Sie sich also einige Personengruppen an, die Sie überprüfen müssen, ob Sie Ihre Website sind.

Eine arme Person, die nur ein Notizbuch mit einem kleinen Bildschirm hat

Sie müssen nur überprüfen, ob Ihre Website verwendet werden kann, wenn das Browserfenster klein ist, ohne dass dies zu Schmerzen führt.

Eine farbenblinde Person

Kann jemand Ihre Website verwenden, ohne die Farbe von Symbolen usw. zu sehen, und sich vorstellen, dass Sie auf einem Schwarzweiß-Monitor darauf zugegriffen haben?

Eine Person mit schlechter Seite.

Wenn Sie die Schriftgröße im Browser ändern, wird der gesamte Text auf Ihrer Site größer, und das Layout bleibt in Ordnung. Kann die Site auch noch auf einem kleinen Monitor verwendet werden?

Verwendet Ihre Site ein kontrastreiches Layout, wenn nicht, ist es für den Benutzer einfach, zu einem kontrastreichen Layout zu wechseln?

Eine Person, die die Maus nicht benutzen kann

Kann eine Person, die Ihre Website noch nie benutzt hat, auf alle Funktionen / Informationen nur über die Tastatur zugreifen? (Funktioniert die Tabulatortaste auf nützliche Weise?)

Jemand mit schlechten Lesekenntnissen

Sie sprechen so oft wie möglich einfaches Englisch?

Jemand, der nicht gut darin ist, neue Dinge zu lernen.

Basiert das Design Ihrer Website auf einer anderen Website, die Ihre Benutzer bereits verwenden können?

Eine blinde Person.

Dies ist das Schwierigste und das meiste, was Sie lesen, ist nicht von Nutzen !!
Schließen Sie zuerst alle anderen Zugriffsprobleme ab, da es viel mehr Menschen mit Sehschwäche gibt oder die die Maus nicht benutzen können, als Menschen mit Sehschwäche.

Verstehen Sie als nächstes Ihre Ziele , z. B. wenn es sich bei Ihrer Website um eine Hotelbuchungswebsite handelt, ist es möglicherweise besser, eine gebührenpflichtige Telefonnummer für die Buchung anzugeben und dann nur die Hotelinformationen zugänglich zu machen.

Die meisten Blinden finden es sehr schwierig, eine interaktive Website zu verwenden, die sie zuvor noch nicht benutzt haben, auch wenn die Website gut gestaltet ist.

Sollten Sie also keine Weboption bereitstellen? (Telefon? Eine Person, die sie besucht, um beim Ausfüllen des Formulars usw. zu helfen?)

Erstens kann Ihre Website ohne Bilder verwendet werden? (Alternativtext ist eine Möglichkeit, dies zu tun)

Kann Ihre Site auf diese Weise verstanden werden, wenn die Sprachsoftware die Site von oben nach unten liest?

Es ist sehr schwierig, eine Site mit komplexer Navigation für eine gebundene Person benutzerfreundlich zu gestalten, und eine gebundene Person kann nicht wissen, dass ein Teil der Seite von JavaScript aktualisiert wurde und erneut gelesen werden muss.

Das Ändern der Farbe von Elementen für Statusänderungen ist ebenfalls keine gute Option.

Die einzige Möglichkeit, zu lernen, wie eine Website für Bindungspersonen funktioniert, besteht darin, zu sehen, wie eine Bindungsperson auf einigen Websites einen Bildschirmleser verwendet. Keiner der Standards ist gut genug, er sagt nur, was Sie nicht tun sollten, aber die Einhaltung reicht nicht aus (es sei denn, Sie erhalten nur statischen Text wie eine Zeitungsseite).


1
Ich liebe den ersten Satz in dieser Antwort! (und natürlich auch die anderen Sätze)
Tim Post

5

Auf dieser Website erhalten Sie einen schnellen Überblick über die Einhaltung der Richtlinien: http://wave.webaim.org/

Es verrichtet einen ähnlichen Job wie das alte "Bobby" -System, das vor ein paar Jahren heruntergefahren wurde.


3

Die niederländische Regierung verwendet diese Website, um ihre Websites auf Barrierefreiheit zu testen. Werfen Sie einen Blick ... Sie können auch Ihre Website betreten, um den aktuellen Status auf Barrierefreiheit zu testen ...

http://www.webrichtlijnen.nl/english/


2

Ich fand, dass Mark Pilgrims frei herunterladbares Buch Dive into Accesibility ein nützlicher Bezugspunkt zu diesem Thema ist. Es ist aus dem Jahr 2002, aber immer noch sehr relevant. Ratschläge wie "Verwenden Sie würdevollen Abbau" werden nicht alt.



1

Ich denke, Sie müssen diese Website http://www.totalvalidator.com oder das verfügbare Firefox-Plugin verwenden. Es verfügt über mehrere Validierungen für Behinderungen und kennzeichnet alles, was fehlt.


1

Die Antwort # 1 ist einfach: schreibe gültiges, semantisch korrektes HTML / CSS !!! Alle obigen Vorschläge sind gut. Hier ist eine Checkliste, die ich vor ein paar Jahren geschrieben habe und die Ihnen einige Dinge zeigt, die Sie auf allen Websites überprüfen sollten: https://forge.iowa.gov/wiki/index.php/Web_Checklist . Es wird davon ausgegangen, dass Sie die Web Developer-Symbolleiste in FF haben, diese ist jedoch kostenlos und einfach zu beziehen.

Ein paar einfache Dinge, die ich fühle, können einen echten Unterschied machen:

Verwenden Sie für Formulare unbedingt das LABEL-Tag. Es macht einen größeren anklickbaren Bereich für Dinge wie Optionsfelder und bindet die Dinge auch für Bildschirmleser zusammen.

Eine andere Sache, die meiner Meinung nach häufig missbraucht wird, sind die Tags h1, h2, h3 .... Bei richtiger Verwendung können Sie jemandem dabei helfen, einfach durch Ihre Seite zu navigieren. Wenn wir sie einfach nur stylen und ohne Weiteres verwenden, ist dies für Bildschirmlesegeräte und andere mauslose E / A-Geräte sehr irreführend.

Es ist auch schön, jemandem, der auf Ihrer Seite navigiert, ohne all Ihre schönen CSS-Dateien und Bilder, das Überspringen von sich wiederholendem Code zum Inhalt zu ermöglichen. Dies wird normalerweise über einen SKIP-Link erreicht, der im CSS verborgen ist. Zum Beispiel, <a href="#skipnav" class="noshow">Skip past navigation to content.</a>um das Überspringen einer längeren Navigation zu ermöglichen.

Wie von Tony angegeben, ist einer der besten Tests, alle Schnickschnack Ihrer Seite zu entfernen und zu prüfen, ob es immer noch Sinn macht.


Zum Thema ALT - Tags ... jedes Bild sollte einen ALT - Tag. Wenn das Bild Inhalt hat, sollte es etwas Beschreibendes im ALT-Tag haben. Wenn es sich nur um Dekoration handelt, verwenden Sie leere Anführungszeichen, alt=""um anzuzeigen, dass Screenreader wie JAWS sie einfach weitergeben können.
ph33nyx
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.