mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 03.12.2016 21:13 Benutzername: Passwort: Auto-Login

Thema: Listen im Sinne der Barrierefreiheit einsetzen vom 13.02.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Listen im Sinne der Barrierefreiheit einsetzen
Autor Nachricht
DevEdge
Threadersteller

Dabei seit: 28.12.2005
Ort: Berlin
Alter: 42
Geschlecht: Männlich
Verfasst Mo 13.02.2006 14:42
Titel

Listen im Sinne der Barrierefreiheit einsetzen

Antworten mit Zitat Zum Seitenanfang

Im Sinne der Semantik sollte eine Liste die Funktion erfüllen, deren Bedeutung und dessen Sinn sie erfüllen soll. Nämlich der Darstellung und Aufzählung oder -listung von Inhalten. Der korrekte Einsatz und die Anwendung von Webstandards sollte keine zusätzliche Barrieren erzeugen, mit denen sich User im Umgang mit dem Web im Alltag auseinander zu setzen haben. Elemente wie Listen sind nur ein Teil dieses grossen Puzzle's. Sei es als georndete (ol), unsortierte (ul) oder definierte Liste (dl). Sie stellt ein von der Usability her unverzichtbares Element zur Strukturierung von Webseiten dar und kann deutliche Beziehungen zu den Inhalten von Seiten darstellen.

Ein Problem welches bei falscher oder fehlender Bezeichnung von Listen auftreten kann, wurde von Roger Hudson, Russ Weakley and Lisa Miller auf einer Konferenz im Dezember 2005 erläutert. Denn sie haben User von Screenreadern und Texteditoren einer Reihe von Tests unterzogen, um deren Verhalten in Bezug auf Webinhalte, deren Struktur, Reihenfolge im Sourcecode und Navigationen zu untersuchen. Das Thema "Structural labels" nimmt in dieser Präsentation einen nicht unwichtigen Teil ein, denn ihr Ergebnis der Untersuchung zeigt deutlich, dass selbst erfahrene User dieser Nutzungsgruppen enorme Schwierigkeiten haben, Seitennavigationen und lokale Navigationen auseinander halten zu können. Wenn Navigationen inhaltlich hintereinander und ohne entsprechende Auszeichnung präsentiert werden, sind diese oft unbrauchbar. Auch wenn die Links einer Liste andere Styles besitzen, bspw. auf Grund Ihrer Verlinkung als das Label ( bspw. Kategorien und Archiv im ersten Bsp. ). Für sehende Nutzer übersichtliche und einfach aufgebaute Seiten, können somit zu einer unüberwindbaren Hürde werden.

Code:

<ul>
 <li>Kategorien</li>
    <li>Browser</li>
    <li>CSS</li>
    <li>Webstandard</li>
    <li>XHTML</li>
 <li>Archiv</li>
    <li>Januar</li>
    <li>Februaur</li>
    <li>...</li>
    <li>...</li>
</ul>


Wichtig ist daher die Bestimmung einer Definition für Navigationen ( bspw. definition term – dt ) um Bereiche einer Liste besser unterscheiden zu können. Das zweite Beispiel kann auf Grund der Struktur auch einfach für eine Sitemap übernommen werden. Leider werden diese noch allzu häufig mittels Tabellen, Divs und Absätzen realisiert.

Code:

<h3>Kategorien</h3>
<ul>
  <li>Browser</li>
  <li>CSS</li>
  <li>Webstandard</li>
  <li>XHTML</li>
</ul>

<h3>Archiv</h3>
<ul>
 <li>Januar</li>
 <li>Februaur</li>
 <li>...</li>
 <li>...</li>
</ul>


Der Vorteil dieses Ansatzes ist es, dass die User sofort den „Inhalt“ der Liste ( die bspw. bei einem Blogroll enorm lang werden kann ) erkennt und gegebenenfalls bei Desinteresse überspringen kann. Besonders für User von Screenreadern sind endloslange Navigationen besonders schwierig zu handhaben, da jeder einzelne Navigationspunkt linearisiert, d.h. einer nach dem anderen gelesen werden.

In der BITV- Bedingung 13.6 wird die Gruppierung von Navigationselementen sowie die Bereitstellung einer Möglichkeit zum Überspringen der Navigationselemente gefordert. Die Vorteile dieser Bedingung wurden hier kurz angeschnitten und sollten in naher Zukunft im Sine aller User etwas häufiger zum Einsatz kommen als es bisher der Fall ist.

Fazit: Eine bessere Auszeichnung für Navigationen, die im Sinne der Semantik und der Usability eindeutige Vorteile schafft und die für mehr Logik im Dokument sorgt, macht die Seitengestaltung unkomplizierter und flexibler.


Zuletzt bearbeitet von DevEdge am Di 14.02.2006 15:08, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 44
Geschlecht: Männlich
Verfasst Di 14.02.2006 09:55
Titel

Re: Listen im Sinne der Barrierefreiheit einsetzen

Antworten mit Zitat Zum Seitenanfang

DevEdge hat geschrieben:
Besonders für User von Screenreadern sind endloslange Navigationen besonders schwierig zu handhaben, da jeder einzelne Navigationspunkt linearisiert, d.h. einer nach dem anderen gelesen werden.


Ich kenn mich mit Screenreadern nicht aus. Tritt dieses Problem auch auf wenn man die Listen mit untergeordneten Listen anlegt?

Etwa so:
Code:
<ul>
  <li>Kategorien
    <ul>
      <li>Browser</li>
      <li>CSS</li>
      <li>Webstandard</li>
      <li>XHTML</li>
    </ul>
  </li>
  <li>Archiv
    <ul>
      <li>Januar</li>
      <li>Februaur</li>
      <li>...</li>
      <li>...</li>
    </ul>
  </li>
</ul>

Was dann etwa so aussieht:
    • Kategorien
      ◦ Browser
      ◦ CSS
      ◦ Webstandart
      ◦ XHTML

    • Archiv
      ◦ Januar
      ◦ Februar
      ◦ ...
      ◦ ...
  View user's profile Private Nachricht senden
Anzeige
Anzeige
DevEdge
Threadersteller

Dabei seit: 28.12.2005
Ort: Berlin
Alter: 42
Geschlecht: Männlich
Verfasst Di 14.02.2006 11:50
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn die "oberste" Liste einen Titel bekommt, brauchst du innerhalb der zweiten Ebene ja keine "Überschrift", mehr da der Menupünkt ( hier Kategorien oder Archiv ) der ersten Ebene diese bildet. Wenn du aber auch für die zweite oder dritte Ebene jeweils einen Titel haben möchtest, kann bspw. h3 hier auch verwendet werden. Wichtig ist einfach die Umschreibung der Liste in der Form, das sofort erkannt wird welchen Inhalt diese besitzt.

Als Info hier mal einen recht nützlichen Link.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Suche Infos bzgl. Flippingbook im Sinne von KnitBook
Illustrator CS5 - ich dreh am Rad im wahrsten Sinne
Barrierefreiheit?
flash und barrierefreiheit
Barrierefreiheit im Internet
[FAQ] Barrierefreiheit
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.