header img

Web Content Accessibility Guidelines

Wahrnehmbarkeit von Inhalten

Textalternativen und alternative Beschreibungen für alle zeitbestimmten oder sonstigen Inhalte.

fehlende alt Attribute finden

➽ Benutzen Sie die Web Developer Bar, um alternativen Text aller Bilder anzeigen zu lassen: Images - Replace Images With Alt Attributes. Alternativ binden sie folgende Regelsätze in einer CSS-DAtei zum Testen ein:

/* Wenn ALT Attribut leer ist*/ img[alt=""] {border: 3px dotted red !important;}
/* wenn altattribut am bild nicht vorhanden */
img:not([alt]) {border: 5px solid red !important;}

geben Sie Bildern immer alternativen Text

Warum? Wenn kein alternativer Text bereitgestellt wird oder falsch angegeben ist, wird jeder, der die Bilder nicht sehen kann, entweder die Information verpassen oder in sinnloser Information ertränkt. Oft wird das alt-Attribut missverstanden. Es dient dazu, aussagefähigen, informativen Text bereitzustellen, der als eine Alternative benutzt werden sollte, falls ein informationelles Bild oder ein anderes graphisches Objekt nicht angezeigt werden kann. Das alt-Attribut ist für img– oder area-Elemente vorgeschrieben. Informative Bilder sollten eine kurze Beschreibung des Bildes besitzen. Wenn Dekorative Bilder im Markup platziert werden müssen sollten Sie einen leeren alternativen Text besitzen. Dekorative Bilder sollten idealerweise via CSS eingebunden werden!

Das Title-Attribut

➽ Das Universalattribut TITLE ermöglicht es, an fast jedem Element erweiterte Beschreibungen zu hinterlegen. Tags wie <a> und <abbr> bekommen immer das Titleattribut.

<abbr title="Search Engine Optimizing">SEO</abbr>

Bei einigen Formularelementen wie LABEL und INPUT kann das Title-Attribut zum besseren Benutzbarkeit beitragen.

Verweise mit Titel-Attribut und aussagekräftigen Linktexten

Warum? Links sind nützlicher, wenn sie beschreibend sind. Die meisten sehenden Menschen scannen Webseiten, um einen schnellen Überblick zu erhalten, und Links sind oft ein wichtiger Bestandteil dieses Inhaltes. Klare Links machen das Scannen schneller. Blinde und sehbehinderte Menschen können eine Seite nicht so scannen, Sie müssen stattdessen von Link zu Link springen oder eine Liste aller Links erzeugen lassen, daher hilft beschreibender Linktext. Beschreibende Links sind weiterhin wichtig für Suchmaschinen, so dass dieser Aspekt von Zugänglichkeit zu guter SEO gehört. Links sollten sinnvoll sein, wenn sie ohne Kontext gelesen werden. „Klicken Sie hier“ oder „hier“ eignen sich nicht als gute Linktexte, da sie keinerlei Informationen über das Linkziel geben. Linktexte, die aus einem ganzen Absatz bestehen, wie man es oft auf Zeitungswebseiten sieht, enthalten zu viel Information und sollten vermieden werden. Es gibt Ausnahmen. Linktexte wie „Lesen Sie mehr“ oder „Lesen Sie weiter“ können in Nachrichtenauflistungen oder ähnlichem in Ordnung sein, solange das Titelattribut benutzt wird, um Links zu unterscheiden.

Relative Maßeinheiten

➽ Für die Angabe der Font-size in CSS greifen sie am besten zu Prozent, EM oder REM. Elemente deren Schriftgröße in EM und ggf. auch Breiten-, Höhen- und Abstandwerte in EM angegebenwurde, passen sich mit jeder Schriftgrößenänderung an. Die Maßeinheit Pixel verhält sich absolut auch wenn Sie relativ zur Bildschirmauflösung dargestellt wird.

erhöhen Sie die Schriftgröße und verwenden Sie relative Maßeinheiten

Warum? Weil viele Leute größeren Text benötigen oder wollen, um ihn komfortabel lesen zu können. Sie könnten sehbehindert sein, älter als 40 oder mögen es einfach, sich beim Surfen zurück zu lehnen. Falls die Schriftgröße mit relativen Einheiten deklariert ist, funktioniert die Veränderung der Schriftgröße in allen Browsern. Falls die Schriftgröße in Pixeln festgelegt wurde, können Benutzer des Internet Explorer für Windows die Schriftgröße nicht ändern ohne vorher nicht die Einstellungen des Browsers zu verändern, was nur sehr wenige Personen tun. Selbst wenn die Schriftgröße in einer relativen Einheit festgelegt wurde können immer noch Probleme beim Vergößern des Textes entstehen. Das Layout muss in die Betrachtung einbezogen werden, dass Benutzer die Textgröße um einige Nummern hochschrauben. Viele Layouts werden schnell unnutzbar, wenn die Schrift vergrößert wird. Offensichtlich bricht jedes Layout letztendlich, aber ein gutes Layout sollte in der Lage sein, zusammen zu halten, wenn der Text um einige hundert Prozent erhöht wird. Es muss nicht so gut aussehen wie mit normaler Textgröße, aber der Inhalt sollte nicht verschwinden oder unlesbar werden.

Dokumenttitel

➽ Prüfen Sie, dass jedes Dokument einen eindeutigen und beschreibenden Titel hat, der keine übermäßige Zeichensetzung beinhaltet.

jedes Dokument erhält einen individuellen Seitentitel

Warum? Dokumenttitel sind aus verschiedenen Gründen wichtig: Oftmals werden sie von Hilfsmitteln als Erstes beim Laden einer Seite wiedergegeben, sie werden in der Browsertitelleiste angezeigt, in Favoriten und beim Druck eines Dokumentes. Beschreibende Dokumenttitel sind hilfreich für jeden. Sie sind ebenso für Suchmaschinenlistings wichtig. Es gibt keine klar definierten Regeln, welche Zeichen als Trennzeichen in Titels verwendet werden sollten. Trotzdem sollten Dokumenttitel auf keinen Fall Zeichen beinhalten, die dekorativen Zwecken dienen, zum Beispiel „:: Titel ::“ oder „…== Titel ==…“. Jedes Interpunktionszeichen könnte vom Screenreader laut vorgelesen werden, was das Lesen der Titel sehr nervtötend macht.

Farbschema testen

➽ Probleme die bei Farbsehschwächen auftreten können Sie am einfachsten durch einen Graustufenkonvertierung simulieren. Wenn sie sich unsicher sind ob die optischen Kontraste ausreichen verwenden Sie Tools um die Kontrastwerte zu prüfen.

achten Sie auf Farbkontraste

Warum? Wenn der Unterschied von Farbton und Helligkeit zwischen Vorder- und Hintergrundfarben nicht groß genug ist, können viele Besucher den Text nur schwer lesen. Dies kann an Farbfehlsichtigkeit oder einem Monochrom- oder Graustufenbildschirm liegen. Oder sie haben, wie ich, ein perfektes Sehvermögen, einen wirklich guten Monitor, der 24-bit Farben darstellt, und trotzdem Probleme, da die Seite einen hellgrauen Text auf weißem Hintergrund benutzt. Ein einfacher Weg, zu testen, ob der Unterschied von Farbton und Helligkeit zwischen Vorder- und Hintergrund groß genug ist sind Farb Kontrast Testtools wie Jonathan Snooks Color Contrast Checker oder Lea Verou - Contrast Ratio Test. Entweder geben Sie den Hexidezimalwert für Vorder- und Hintergrundfarbe ein oder schieben die Regler, um eine direkte Rückmeldung über Kontrast und Farbdifferenz zu bekommen. Sie können auch Ihren Monitor auf Graustufen oder monochrom umstellen, um sicherzustellen, dass der Text immer lesbar ist. Solten Sie dennoch mit ungünstigen Kontrastverhältnissen arbeiten müssen, kann es Helfen Text zu vergrößern oder mehr Freifläche zu dem kritischen Inhalt selbst zu schaffen. Beachten Sie die Grundregeln der Farblehre und psychologische Wirkung von Farben.