Inhalt der aktuellen Seite

Accessibility - Barrierefreiheit

Barrierefreiheit bedeutet für Internetseiten vor allem, dass sie technisch so gestaltet sein sollen, dass sie immer zugänglich sind. Egal ob der User mit einem PC, Handy, Screenreader oder PDA die Seite aufruft. Außerdem sollte der verwendete Browser keine Einschränkung darstellen und auch für Menschen mit Behinderungen sollte die Seite zugänglich sein.
Dass sich daraus natürlich ein gewisser technischer Mehraufwand ergibt, ist jedem klar, aber ich denke er lohnt sich und man selbst erwartet ja im Grunde auch, dass Webseiten einem immer zugänglich sind, egal wie man sie betrachtet.
Im Folgenden habe ich ein paar Punkte zusammengetragen, die zu barrierefreien Internetseiten beitragen können - also quasi ein paar Grundlagen.

1. Genereller Seitenaufbau

   Dass man keine Tabellenlayouts mehr verwenden sollte, ist - denke ich - inzwischen bei jedem angekommen. Wer sein Layout mit CSS aufbaut, hat auch gute Chancen, dass es vernünftig auf mobilen Geräten angezeigt wird. Außerdem sollte auf die Verwendung von relativen Angaben (Prozent oder em) bei Höhen- und Breitenangaben geachtet werden. Wenn der Schriftgrad einer Seite geändert wird, skaliert so der gesamte Inhalt mit und Menschen mit einer Sehschwäche können auf zusätzliche Hilfen, wie eine Bildschirmlupe, verzichten.

2. Quelltextstruktur

   Cascading Style Sheets bieten uns die Möglichkeit, die Inhalte unserer Seite frei zu positionieren, ungeachtet ihrer Position im Quelltext. Aus diesem Grund sollte der Inhalt im Quelltext einer logischen Struktur folgen, beispielsweise zuerst die Navigation, anschließend der Inhalt und am Ende erst die Werbung, so bekommt auch jemand, der keine Stylesheets verwendet, eine logisch aufgebaute Internetseite angezeigt, Screenreader haben so auch die Chance vernünftig strukturiert den Inhalt der Seite wiederzugeben.
   Man sollte dabei allerdings auch bedenken, Links mit Sprungmarken vor der Navigation direkt zum Inhalt einzubauen, wer möchte sich schon bei jeder Unterseite immerwieder die Navigation vorlesen lassen, wenn einen doch nur der Inhalt interessiert? Die Links lassen sich dann mittels CSS aus dem Sichtfeld ziehen (text-indent: -9000px;), da sie meist nur für Screenreader oder bei Betrachtung ohne CSS interessant sind.

3. Formulare - label-Tag

   Um Formulare auch verständlich zu machen, ohne CSS und die Zugehörigkeit von einer Auswahlbox und dem dazugehörigen Text, gibt es das label-Tag. Man vergibt beispielsweise dem Radiobutton eine Id und der entsprechende Text wird vom label-Tag umschlossen (verkürztes Beispiel):
   <input type="radio" id="eins" /><label for="eins">Auswahl</label>
   Das label-Tag hat außerdem den Vorteil, dass man zur Auswahl nicht direkt auf den Radio-Button klicken muss, sondern aufgrund der logischen Zuordnung ein Klick auf den Text reicht.

4. Formulare - fieldset- und legend-Tag

   Mittels des fieldset-Tags kann man einzelne Bereiche eines Formulares strukturieren, beispielsweise bei einem online Pizza-Bestelldienst die Bereiche "Belag" und "Versandadresse" sinnvoll unterteilen. Ob man diese Unterteilung sichbar machen möchte, kann man dann immernoch mittels CSS entscheiden. Dass legend-Tag gibt eine Überschrift für diesen Bereich an, wie diese Überschrift dargestellt wird ist browserabhängig.

5. Formulare - Tab-Index

   Viele Leute die häufig im Internet unterwegs sind, nutzen gerne die Tastatur - auch bei der Navigation durch die Webseite. Mittels der Tabulator-Taste (links neben dem Q) kann man verschiedene Bereiche einer Seite anspringen, beispielsweise Links. Bei Formularen kann man so von Formularfeld zu Formularfeld springen, der sogenannte Tab-Index legt fest, in welcher Reihenfolge die Felder angesprungen werden, das ist auch hilfreich um eine logische Reihenfolge festzulegen, falls im Quelltext eine andere vorliegt. Um den Tab-Index zu bestimmen, ergänzt man einfach im input-Feld das Attribut tabindex und vergibt eine Zahl (numerisch), am besten angenfangen bei eins.

6. Tabellen

   Man kann Tabellen ein paar nützliche Zusatzinfos mitgeben. Einerseits ist das die Tabellenbeschriftung - ähnlich der Formularbeschriftung. Nach dem einleitenden table-Tag notiert man das caption-Tag und darin die Tabellenüberschrift. Die Darstellung dieser Information ist wieder browserabhängig.
   <table>
<caption>Preisliste</caption>
   Andererseits gibt es noch das summary-Attribut, was direkt im table-Tag notiert wird. Wie der Name schon verrät gibt man hier eine kurze Zusammenfassung an, worum es in der Tabelle geht.

7. alt-Attribut

   Wenn man Bilder einbaut, sollte man darauf achten, das alt--Attribut zu verwenden. Es dient dazu, einen alternativen Text an zu zeigen, falls die Grafik nicht geladen werden kann, gerne wird dieser Text auch von Screenreadern ausgelesen, man sollte also darauf achten nicht solche Texte wie "Bild1" zu benutzen.
   Allerdings kann man sich das alt-Attribut sparen, wenn eine Grafik rein dekorative Zwecke hat oder beispielsweise als Abstandshalter fungiert (nicht mehr unbedingt eine aktuelle Methode, aber immernoch weit verbreitet).

8. Bilder mit Textinhalt

   Häufig werden auch heutzutage noch gerne grafische Buttons eingesetzt oder Werbegrafiken, die wichtigen Text enthalten - beispielsweise wenn die Navigation aus grafischen Buttons besteht. Man kann hier einerseits das alt-Attribut verwenden, aber auch mit CSS lässt sich eine gute Lösung finden.
   Man hat ein div-Tag, dem mittels CSS eine Hintergrundgrafik gegeben wird - das Navigationsbutton. Nun schreibt man zwischen das öffnende und schließende div den Text, welcher auch auf dem Button zu lesen ist. Mittels CSS zieht man den Text allerdings außerhalb des Sichtbereiches. Somit hat man bei Darstellung mit CSS ein schönes Button, bei ausgeschaltetem CSS die reine Textinformation.
   <div id="button_web">Webdesign</div>
   Das entsprechende CSS:
   #button_web {
  background:url(grafik/button.gif) no-repeat;
  text-indent: -9000px; }

9. title-Attribut

   Das title-Attribut ist ein Universalattribut und kann in nahezu jedem Tag eingesetzt werden - besonders beliebt ist es jedoch bei Links und Bildern. Es bietet eine Zusatzinfo zum markierten Bereich und die meisten Browser stellen den Inhalt als Tooltipp dar, wenn der Mauszeiger kurz über einem mit title-Attribut versehenen Tag ruht. Ein weiteres sinnvolles Einsatzgebiet ist beispielsweise bei der Markierung von Abkürzungen (s.u.).

10. Sprachen

    Wenn man zwischendurch Wörter aus anderen Sprachen verwendet, sollte man diese Wörte entsprechend kennzeichnen, Screenreadern hilft es, die Betonung und Aussprache korrekt wiederzugeben. Praktischerweise verwendet man das lang-Attribut im <span>-Tag, beispielsweise:
    "... im <span lang="en">World Wide Web</span> sind Anglizismen gebräuchlich...".
    Man verwendet das <span>-Tag, da es keine Auswirkungen auf die Formatierung des Textes hat und ein Inline-Element ist, also auch keinen Zeilenumbruch hervorruft.

11. Abkürzungen

    Abkürzungen sollte man ebenfalls entsprechend kennzeichnen und am besten noch mittels des title-Attributs auflösen. Es gibt im Grunde zwei "Arten" von Abkürzungen. Einerseits welche, die mittels Punkt abkürzen ("z.B.", "u.A."), diese werden durch <abbr> gekennzeichnet, ein Beispiel:
    "...ein Land Afrikas ist <abbr title="zum Beispiel">z.B. </abbr> Äthiopien."
    Andererseits welche, die aus den Anfangsbuchstaben mehrerer Wörter eine Abkürzung bilden, die meistens auch ein aussprechbares Wort ergeben, beispielsweise UNO. Diese Abkürzungen werden in der Regel nicht mit Punkten abgekürzt - man nennt sie Akronyme. Dementsprechend ist das HTML-Tag auch <acronym>.

social bookmarks

• Archiv
• Vorstellung
• Berichte
• Webdesign
  • HTML-Kurs
  • SEO
  • Optimierungen
  • XML mit PHP
  • UTF-8 mit PHP
  • Barrierefreiheit
  • JS: Pic-Opener
• Tipps
• Wissen
• Gästebuch