Thema: WAI

insgesamt 5 Artikel (Seite 1 von 1)

WAI-ARIA

04.03.2010 | 0 Kommentare | Kategorie: WAI

WAI-ARIA nutzt eigene Tags um Elemente auszuzeichnen und damit Hilfsprogrammen deren Aufgabe mittzuteilen so kann z.b. einer Liste die Rolle Menü zugewiesen werden um einem vorhandenen Screenreader mitzuteilen, dass es sich bei dieser Liste um eine Menü handelt und der Screenreader wird dies dem Benutzer mitteilen.

WAI-ARIA wird von allen aktuellen Browsern (bis auf IE) und Screenreadern erkannt und verwendet. Validieren lassen sich mit ARIA-Tags ausgestattete Seiten bis lang allerdings nicht.

Um WAI-ARIA – Angaben in Programmen und Webseiten zu testen hilft das Windows-Tool MSAAVerify:

http://www.codeplex.com/MsaaVerify

Barrierefreie Formulare

04.03.2010 | 0 Kommentare | Kategorie: WAI

Werden einige Grundlagen beachtet ist die barrierefreie Umsetzung von HTML-Seiten und vor allem Webformularen kein Problem.

Richtlinien

fieldsets zum Gruppieren von zusammengehörigen Formularteilen benutzen
legend zum Beschriften von Fieldsets benutzen
jedes Formularfeld besitzt einen ihm zugeordneten Label
title für Formularelemente und Buttons benutzen
:focus für Formularelemente definieren
:hover und :focus für Buttons definieren
legend und labels dürfen per CSS falls visuell nicht benötigt ausgeblendet werden

Beispiel

<form action="site.htm" method="post" name="searchform">
  <fieldset>
    <legend>Searchform</legend>
    <label for="searchword">Searchword</label>
    <input type="text" id="searchword" name="searchword" title="enter Searchword" value="" />
    <input type="submit" name="search" title="search now" value="search" />
  </fieldset
</form>

Screenreader

04.03.2010 | 0 Kommentare | Kategorie: Anwendungen, WAI

Ein Screenreader ermöglicht blinden oder stark sehbehinderten Personen die Benutzung eines Computers in dem dieser Bildschirminhalte vorliest. Unten finden Sie eine Liste mit den gängigsten kommerziellen und nicht kommerziellen Programmen.

kommerziele Screenreader

OpenSource Screenreader

Barrierefreie Links mit CSS

04.03.2010 | 0 Kommentare | Kategorie: CSS, WAI

Um Links nicht nur per Maus-Hover sondern auch per Focus mit der Tastatur hervorzuheben muss für jeden link a:hover und a:focus definiert werden. IE6 kann kein a:focus, dafür wird a:active bei erhaltenem Focus angewandt.

Generell können die Pseudo-Klassen :hover und :focus auf alle HTML-Elemente angewandt werden, wobei :focus nur bei Links und Formularelementen zum Einsatz kommt. Zu beachten ist: IE6 kennt kein :focus und IE7 kennt :focus nur für Links.

:hover - mit der Maus über dem Element

:focus - Element hat focus

:active - Element ist angeklickt

Hover Grafiken mit CSS erstellen

04.03.2010 | 3 Kommentare | Kategorie: CSS, WAI

Die meisten Hover-Effecte auf Grafiken werden mittels JS gelöst. Diese Lösung basiert rein auf CSS. Dabei enthält der betreffende Link als Inhalt das Ausgangs-Icon. Per CSS wird dieses ausgeblendet und als Hintergrundgrafik das selbe Icon noch einmal gesetzt. Dieses kann dann simple per :hover oder :focus und CSS ausgewechselt werden.

HTML

<a href="#edit" title="hovericon" class="link_icon">
  <img src="icon.gif" alt="edit"/>
</a>

CSS

a.link_icon img {
  visibility: hidden;
}
a.link_icon {
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(icon.gif);
}
a.link_icon:hover, a.link_icon:focus {
  background-image: url(icon_hover.gif);
}

top