KS Webdesign - Der Blog » Behinderte http://webdesign-passau.com/wordpress Wed, 18 Apr 2012 07:28:02 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Behinderte mit einbeziehen 1 http://webdesign-passau.com/wordpress/behinderte-mit-einbeziehen-1/ http://webdesign-passau.com/wordpress/behinderte-mit-einbeziehen-1/#comments Tue, 29 Jun 2010 12:23:51 +0000 Klaus http://webdesign-passau.com/wordpress/?p=523 Weiterlesen →]]> Wieviele von uns behaupten ihre Sites sind barrierearm und wie oft gehen Anspruch und Wirklichkeit auseinander?

Dabei ist i.d.R. kein böser Wille im Spiel sondern Unwissenheit.

Vielleicht kann ich euch da mit ein paar simplen Tips hilfreich zur Seite stehen:


Schriftgröße in em oder Prozent

In diesem Artikel habe ich das schon einmal beschrieben.

Skiplinks

Damit wird dem Besucher die Möglichkeit gegeben Bereiche der Website zu überspringen, um direkt zur Navigation oder zum Inhalt zu springen.

Oben auf der Seite werden die Skiplinks idealerweise unter der h1-Überschrift plaziert. Man sollte sich da auf maximal drei beschränken, um keine Verwirrung zu stiften. Am Ende der Seite (im Fussbereich) gibt es die Skiplinks noch einmal, diesmal um zu den jeweiligen Bereichen zurückzuspringen.

Beispiel:

  • <div id="kopf">
  • <h1>Hauptüberschrift</h1>
  • <ul>
  • <li class="skiplink"><a href="#inhalt">Zum Inhalt springen</a></li>
  • <li class="skiplink"><a href="#navigation">Zur Navigation springen</a></li>
  • </ul>
  • </div>

Wenn die Navigation direkt nach der Hauptüberschrift kommt reicht ein Skiplink zum Inhalt imho aus. Die Bereiche die angesprungen werden sollen brauchen id’s, um sie anspringbar zu machen.

Die Skiplinks können für normale Besucher per CSS ausgeblendet werden:

  • .skiplink {
  • position:absolute;
  • top:-9999px;
  • left:-9999px;
  • width:0px;
  • height:0px;
  • display:inline;
  • }

Solche Codeschnipsel könnt ihr in einer Vorlagendatei speichern, damit sie bei Bedarf per copy/paste rasch eingefügt und angepaßt werden können.

Nach oben

Skiplinktabs für Durchtabber

Menschen mit motorischen Einschränkungen haben oft Probleme mit der Mausbedienung, deshalb hangeln sie sich oft mit der Tab-Taste durch eine Seite. Diese Tabs kann man ganz einfach sichtbar machen.

Um auch die Skiplinks dabei ans Licht zu holen ergänzen wir den Quelltext derselben um eine Klasse und fügen noch etwas CSS dazu:

Quellcode:

  • <div id="kopf">
  • <h1>Hauptüberschrift</h1>
  • <ul>
  • <li class="skiplink"><a href="#inhalt" class="skiplinktab">Zum Inhalt springen</a></li>
  • <li class="skiplink"><a href="#navigation" class="skiplinktab">Zur Navigation springen</a></li>
  • </ul>
  • </div>

CSS dazu:

  • .skiplinktab:focus,
  • .skiplinktab:active {
  • position:absolute;
  • top:9999px;
  • left:9999px;
  • display:inline;
  • width:13em;
  • height:auto;
  • background-color:#fff;
  • color:#000;
  • padding:0.6em;
  • border:2px solid #000;
  • }

Die vorher aus dem Bild geschobenen Skiplinks werden beim Betätigen der Tab-Taste eingeblendet. Das funktioniert zumindest im Firefox und im Internet Explorer.

Nach oben

Text,- und Hintergrundkontrast mit CCA prüfen

ca. 8-10% der männlichen Bevölkerung leidet mehr oder weniger unter einer Farbfehlsichtigkeit. Viele Ältere sehen nicht mehr so gut und haben beim Lesen Probleme, wenn der Kontrast zwischen der Schriftfarbe und der Hintergrundfarbe zu gering ist.

Mit dem Colour Contrast Analyzer könnt ihr schnell checken, ob da alles in Ordnung ist.

Für jedes label ein for

Um eine logische Bezeihung zwischen einem Eingabefeld (input) und der entsprechenden Beschriftung (label) herzustellen sollte label mit dem for-Attribut versehen werden.

Beispiel:

  • <label for="absender">Ihre E-Mail-Adresse</label>
  • <input type="text" name="absender" id="absender" />

for von label und id des input-Feldes sind gleich und die logische Beziehung damit hergestellt.

title-Attribute bei Links nur mit Bezug zum Link!

Wenn der Link ein title-Attribut mit ensprechendem Text besitzt dieser dieser Text einen direkten Bezug zum Link haben. Ältere Screenreader lesen den Linktext nicht mehr vor, wenn es ein title-Attribut gibt.

Dropdown- oder Flyout-Menüs nicht mit display:none; oder visibility:hidden; gestalten.

Die Links, die auf diese Art gestaltet sind, werden von den meisten Screenreadern nicht mehr vorgelesen.

Ein erklärender Link dazu. Eine alternative Formatierungsmöglichkeit ohne diese Nachteile gibt es.

Nach oben

Zusammenfassung des Tabelleninhaltes durch das Attribut summary

Dadurch kann sich der Screenreaderuser einen Überblick über den Inhalt der Tabelle verschaffen.

Kopf,- und -Fusszeilen für Tabellen definieren

Erleichtert ebenfalls die Lesbarkeit für die Screenreaderuser.

Wechselnde Seitentitel

Das jede Seite einen spezifischen Seitentitel erhalten sollte ist eigentlich selbstverständlich. Dies erhöht die Usability für alle Besucher.

Valider Quelltext

Nicht valide Seiten verlassen sich auf die Fehlerkorrekturmechanismen der Browser oder Screenreader. Das ist deshalb sicher suboptimal.

Zum Schluß noch ein allgemeiner Hinweis, um die Usability für alle zu verbessern:

Definiert eine druck.css!!

Die Browser haben eine Druckfunktion mit deren Hilfe man sich die aufgerufene Seite auch ausdrucken kann. Da ist es doch einfach ärgerlich wenn alle Bilder oder das Menü mit ausgedruckt werden. Weisser Text auf schwarzem Hintergrund kann für viel Freude beim Besucher sorgen, wenn das dann auch so ausgedruckt wird.

Die Tips erheben keinen Anspruch auf Vollständigkeit, aber helfen vielleicht dem einen oder anderen. Solltet ihr noch Tips zu diesem Thema haben, nur heraus damit!

Nach oben

]]> http://webdesign-passau.com/wordpress/behinderte-mit-einbeziehen-1/feed/ 6 Skiplinks und Skiplinktabs http://webdesign-passau.com/wordpress/skiplinks-und-skiplinktabs/ http://webdesign-passau.com/wordpress/skiplinks-und-skiplinktabs/#comments Mon, 07 Sep 2009 08:02:27 +0000 Klaus http://webdesign-passau.com/wordpress/?p=245 Weiterlesen →]]> Warum bieten wir Menschen, die auf ein Bildschirmvorlesegerät (Screenreader) angewiesen sind und solchen, die sich aufgrund motorischer Einschränkungen mit der Tab-Taste durch eine Website hangeln, nicht ein kleines bißchen Komfort?

Skiplinks am Anfang einer Seite, mit denen man direkt zum Inhalt und/oder zur Navigation springen kann. Das Gleiche am Ende einer jeden Seite, damit man wieder zurück zur Navigation und/oder zum Anfang Inhalt springen kann.

Damit die Durchtabber auch in den Genuß dieser Skiplinks kommen, ist es doch im Grunde nur eine Kleinigkeit die Skiplinks mit etwas CSS für diese Menschen sichtbar zu machen, wenn sie beim Durchtabben an den entsprechenden Stellen ankommen.

Zuerst das XHTML:

  • <div id="kopf">
  • <h1>Hauptüberschrift</h1>
  • <ul>
  • <li class="skiplink"><a href="#inhalt" class="skiplinktab">Zum Inhalt springen</a></li>
  • <li class="skiplink"><a href="#navigation" class="skiplinktab">Zur Navigation springen</a></li>
  • </ul>
  • </div>
  • <-- Ende #kopf -->
  •  
  • <div id="fuss">
  • <ul>
  • <li class="skiplink"><a href="#navigation" class="skiplinktab">Zurück zur Navigation</a></li>
  • <li class="skiplink"><a href="#inhalt" class="skiplinktab">Zurück zum Anfang Inhalt</a></li>
  • </ul>
  • </div>
  • <-- Ende #fuss -->

Es sollten nicht mehr als drei Skiplinks oben und unten sein, sonst wird es etwas unübersichtlich.

Legt euch einfach eine skiplink.htm an und speichert sie in eurem Vorlagenordner ab. Bei Bedarf können die Skiplinks einfach rauskopiert werden.

Das CSS dazu:

  • .skiplink {
  • position:absolute;
  • top:-9999px;
  • left:-9999px;
  • width:0px;
  • height:0px;
  • }
  • .skiplinktab:focus,
  • .skiplinktab:active {
  • position:absolute;
  • top:9999px;
  • left:9999px;
  • width:13em;
  • background-color:#fff;
  • color:#000;
  • padding:0.6em;
  • border:2px solid #000;
  • }

Damit die Skiplinktabs nicht immer ganz oben links, bzw. ganz unten links im Browser erscheinen solltet ihr #kopf und #fuss position:relative; mit auf den Weg geben, damit sich die absoluten Skiplinks daran orientieren können.

Je nachdem wo die Skiplinktabs im #kopf oder #fuss erscheinen sollen müssen die Werte für top/left angepaßt werden.

Die beiden CSS-Blöcke könnt ihr in euren vorlagen.css gespeichert werden, wo sie bei Bedarf nur noch rauskopiert werden müssen.

Das funktioniert zumindest im Firefox und Internet Explorer einwandfrei.

Wenn ich mich im WWW so umschauen, werden diese einfachen Maßnahmen um Menschen mit körperlichen Einschränkungen etwas Komfort beim Erkunden einer Website zu bieten leider so gut wie nie ergriffen.

]]> http://webdesign-passau.com/wordpress/skiplinks-und-skiplinktabs/feed/ 8 Webdesigners Ignoranz 1 http://webdesign-passau.com/wordpress/webdesigners-ignoranz-1/ http://webdesign-passau.com/wordpress/webdesigners-ignoranz-1/#comments Thu, 20 Aug 2009 08:36:07 +0000 Klaus http://webdesign-passau.com/wordpress/?p=131 Weiterlesen →]]>
  • outline auf none setzen, damit Menschen mit motorischen Einschränkungen, die sich mit der Tastatur durch eine Seite hangeln müssen, nicht sehen können wo sie gerade sind. Eine gute Gelegenheit für ein schönes Wo bin ich-Quiz.
  • Keine Skiplinks und Skiplinktabs oben und unten auf der Seite, mit denen man direkt zum Inhalt und/oder zur Navi und am Ende der Seite wieder zurückspringen könnte. Blinde sollen selber sehen, wie sie klarkommen.
  • Die Laufweite der Zeilen sind nur von den Bildschirmrändern begrenzt, liegen also nahe unendlich. Dadurch hat man vertikal viel Platz gespart, und kann lange lesen ohne scrollen zu müssen.
  • Die erste Schriftgröße immer in Pixel angeben, so maximal 8-11 Pixel und line-height auf normal lassen, damit alles schön kompakt und in sich geschlossen wirkt.
  • Texte möglichst durch Bilder ersetzen und keine Image Replacement-Technik anwenden. Der Code soll schließlich nicht unnötig aufgebläht werden und Menschen bei denen die Grafiken ausgeschaltet sind kann man eine schöne, minimalistische Alternative der Seite präsentieren.
  • Den Kontrast zwischen Schrift,- und Hintergrundfarbe unbedingt klein halten.Hellgraue Schrift auf weissem Hintergrund ist besonders edelneutral. Wer’s mehr farbig liebt, dem sei z.B. besonders hellblaue Schrift auf hellgrünem Hintergrund ans Herz gelegt. Nicht zu knallig, eine vornehm, dezente Farbigkeit ausstrahlend, damit die Älteren unter uns nicht gleich zurückprallen.
  • Ratschlägen, wie man Menschen mit körperlichen Einschränkungen den Zugang zur Seite erleichtert mit höflicher Ignoranz begegnen. Sind eh nicht meine Zielgruppe und für die paar auf die das zutrifft gibts ja noch genug andere Seiten im Netz. Ich kanns schließlich nicht jedem recht machen.

    • Ein sarkastischer Rückblick auf meine Erfahrungen mit Hilfestellungen für andere zum Thema Zugänglichkeit.

    Persönlich mußte ich leider feststellen, das Ältere den Ratschlägen die Zugänglichkeit betreffend aufgeschlossener gegenüberstehen als Jüngere.

    Thomas hat übrigens in seinem Blog einen ähnlichen Artikel geschrieben, den ich sehr lesenswert finde: Blogdesign für Profis

    ]]>     http://webdesign-passau.com/wordpress/webdesigners-ignoranz-1/feed/ 0