accessBlog:

04 Mai 2004

Navigationsmenüs sind neben der Qualität der Inhalte und den interaktiven Angeboten der Garant für den Erfolg eines Internetauftritts. Übersichtliche, zugängliche und benutzerfreundliche Menüs haben entscheidenden Einfluss auf die Orientierung, die Verweildauer von Besuchern und damit auf die Erreichung der Ziele eines Angebotes. Wie Sie benutzbare und ansehnliche Navigationen mit sauberem HTML und ein wenig CSS erstellen können, zeigen Stefan Blanz und Eva Papst in unserer neuen Serie: Barrierefreie Navigationsmenüs.

Permalink
Tags: , , ,

Kommentare zu dieser Meldung: 23

Permalink Ingmar Friedrichsen meinte am 04.05.2004:

Dumme Frage, aber welche Browser bzw. Screenreader sind eigentlich von diesem "brauche Trennzeichen Bug" betroffen?

Permalink Wolfgang Wiese meinte am 04.05.2004:

Zum Absatz "Ungeordnete oder nummerierte Liste?":
ich würde hier eine Kombination vorschlagen, welche bei uns (nach der Idee von clkm) im Einsatz ist:
Alle Oberebenen eines Menüs verwenden <ul> .. </ul>.
Nur die letzte, gerade aktive Ebene, also die, in der man sich gerade befindet wird mit <ol> ..</ol> durchnummeriert.
Zu sehen beispielsweise auf der Seite http://www.rrze.uni-erlangen.de/hilfe/
Die Oberpunkte sind per <ul> formatiert, die aktiven Punkte über <ol>.
Die shat den Vorteil, daß man auch mit einem Screenreader immer auch hörbar erkennen kann, ob man sich in einer aktiven Unterebene befindet, dessen Unterpunkte gerade gelesen/gezeigt werden, oder weiter oben.

Permalink Sebastian Gruber meinte am 04.05.2004:

Zum Thema Aufklappmenü, vor allem dem Überspringen von Zweigen, möchte ich auf cookiecrook.com hinweisen.

Permalink Tomas Caspers meinte am 05.05.2004:

Ingmar, so eine dumme Frage ist das nicht, denn ohne eigene Erfahrung mit den gängigen Screenreadern kann der durchschnittliche Webentwickler ja gar nicht wissen, wie komisch die manchmal vorlesen. Aber dafür gibt es ja die Richtlinien, in denen dann soetwas steht. Allerdings ist das ein Punkt, bei dem wirklich langsam die Hersteller der Screenreader gefragt sind, ihre Produkte endlich einmal auf die Höhe der Zeit zu bringen.
Der Bug, auf den die Richtlinien Bezug nehmen, äussert sich dadurch, daß in verbreiteten Programmen wie JAWS oder HPR Texte, obwohl sie in klar gekennzeichneten (und damit meiner Meinung nach ausreichend voneinander getrennten) Block-Level-Elementen oder Listeneinträgen stehen, ohne hörbare Pause ineinander nuscheln. Wie gesagt, meiner Meinung nach ein Bug, der behoben gehört und der nicht zur Folge haben darf, daß nun Millionen Webseiten umgebaut werden müssen, nur weil einige Softwares eine recht eigenwillige Interpretation der Standards haben.

Permalink Nina meinte am 05.05.2004:

Ich habe mir den Artikel durchgelesen und auch die Hörproben angehört. Klingt so ein Screenreader wirklich derart schrecklich? Wenn ich bedenke, dass da eine einfache Liste (Navigation) schon so furchtbar kompliziert angesagt wird, verneige ich mich vor allen Nutzern derartiger Geräte die tatsächlich in der Lage sind damit im Web zu surfen ...
Gibt es eigentlich in Berlin einen Verein/eine Organisation bei der man seine Seite mit so einem Gerät testen lassen kann? Oder kommt man sonst irgendwie an sowas ohne es gleich kaufen zu müssen? Ich möchte die von mir betreuten Seiten gerne barrierefrei gestalten und denke, dass ich das noch ein Stück besser kann, wenn ich sie dann unter anderem auch direkt mit derartigen Geräten/Software(?) testen könnte.
Für weitere Hilfe bin ich dankbar :)

Permalink Tomas Caspers meinte am 05.05.2004:

Hallo Nina,
versuch's mal beim 'Käpt'n Browsers MMC', Wilhelmstraße 52 in Mitte.

Permalink daniel meinte am 06.05.2004:

warum wird dieses menü eigentlich nicht auf efa verwendet
genügt ein menü wie auf efa auch schon um eine seite barrierefrei zu gestallten

Permalink Tomas Caspers meinte am 06.05.2004:

Weil das Tutorial 3 Tage jünger als der Relaunch ist :-)

Permalink Harald Kampen meinte am 09.05.2004:

Ich habe in diesem Artikel nichts über Bilder als Trennzeichen gefunden. Wie sieht das in der Praxis aus, wenn ich <img src="bild" alt="." title="."><a ....>Link</a> als Trenner einsetze?
Nochwas: macht es Sinn, alt und title in so einem Fall zu setzen?
Wie gehen Screenreader damit um?

Permalink Stefan meinte am 10.05.2004:

Hallo Harald Kampen,
das Tutorium bietet eine Möglichkeit barrierefreier Navigationsmenüs an, auch andere Lösungen sind denkbar. Die Anwendungen und Positionen hierzu sind dann eher "Stilfragen". Bilder als Trennzeichen können allerdings in Screenreadern zu zusätzlichen Ansagen ("Grafik..") führen und den Hörfluss unnötig "aufblähen". Das hängt aber vom verwendeten Gerät und dessen Einstellungen ab.

Permalink Bernd meinte am 19.05.2004:

Hallo,
leider finde ich im Artikel keinen Hinweis wo das Menü (ohne css) angezeigt werden
sollte. Besser oben wie bei einfach-fuer-alle oder
geht auch die Lösung die unter
http://barrierefrei.e-workers.de/workshops/getafix/index.html
angegeben ist?

Permalink Stefan meinte am 19.05.2004:

Hallo Bernd,
das Tutorium beschäftigt sich nur mit den Navigationsmenüs als Teilelement eines Internetauftrittes. Die Einbindung in ein komplettes Navigtionskonzept hängt letztlich von den Projektanforderungen ab.
Aber in der Regel ist folgende Faustregel hilfreich: Erst Sprungmarken, dann der Inhalt, dann die Navigation.
Viele Grüße
Stefan

Permalink ole janson meinte am 15.07.2004:

Mir hat das Tutorial weiter geholfen. Ich muss zur Zeit unser CMS barrierefrei machen und bin für jedes Anleitung dankbar!
Freu mich schon auf euer Tutorial "Layouten mit CSS".
Das schreibt Ihr doch noch, oder?

Permalink Karen meinte am 18.08.2004:

Heißt dass, es gibt keine barrierefreie Lösung für drop-down- Menüs (also die, bei denen sich das Untermenü erst öffnet, wenn die Maus drüber fährt) ohne javascript?

Permalink Uwe meinte am 07.09.2004:

Den Großteil des Artikels finde ich absolut überzeugend. Nur ein Punkt, im wahrsten Sinne des Wortes, stört mich massiv. Im Rahmen von barrierefreiem Webdesign wird von einer Trennung von Inhalt und Design gesprochen, da stört es mich massiv das ich Punkte nach den Links einfügen soll um diese anschliessend wieder mit CSS auszublenden. In dem Fall werden die Punkte zum Inhalt obwohl sie eigentlich nur die Aufgabe haben das "Hör-Design" zu beeinflussen. Für mich stellt daher die Lösung mit den Punkten ein Paradebeispiel für nicht-barrierefreie Seiten dar.

Permalink Babette Borries meinte am 12.09.2004:

Hallo,
das Tutorial finde ich sehr gut.
Einen kleinen Fehler habe ich gefunden: unter http://www.einfach-fuer-alle.de/artikel/menues/tag1/
fehlt im Beispiel am Ende der mit 26. gekennzeichneten Zeile ein </li>
Gruß, Babette Borries

Permalink Jan Bengia meinte am 06.10.2004:

Hallo,
ich schließe mich Uwe an: Die Sache mit den Punkten ist ein Unding. Da hilft auch dieses CSS-Gefuddel nichts. Nur weil das mal auf den gängigen Browsern hinhaut mit dem Verstecken, sagt das ja noch lange nichts über andere Geräte aus. Z.B. Textbrowser, Handys, etc.
Der Punkt ist als Inhalt ausgezeichnet, ist aber leider keiner. Haut nicht hin.
Zudem stört mich noch eine Kleinigkeit: Der Hinweis, dass Links nicht auf sich selbst verweisen sollten, mag ja allgemein richtig sein. Aber in dem speziellen Fall von Menüs sollte man den Link trotzdem bei aktivierten Menüpunkt beibehalten. Ich zumindest ärgere mich immer sehr, wenn ich eine Seite nicht noch mal laden kann (sei es aufgrund von weiternavigieren per Content-Menü, sei es aufgrund von Ladefehlern..).
vg
Jan

Permalink Stefan meinte am 29.10.2004:

Hallo,
nach längerer Abwesenheit einige aktuelle Anmerkungen zum Tutorium.
Zunächst eine neue Einsicht: Das Tutorium empfiehlt den Einsatz eines Doppelpunktes nach der letzten Zahl in der Nummerierung. Neue Tests und Erfahrungen haben die Einsicht ans Licht gefördert, dass man auf selbige verzichten kann. Sie sorgen für unnötig lange Sprechpausen in Vorlesegeräten und liefern auch sonst keine wirklich relevante Information.
Um vielleicht doch irgendwann mit dem trennenden Punkt auf den selbigen zu kommen: richtig ist, dass er im Sinne der Standards weder Inhalt noch Layout ist.
Die praktische Notwendigkeit steht aber nicht wirklich in Frage, so dass man hier vielleicht auch mal die Fünfe gerade sein lassen sollte. Man/frau muss sie ja nicht einbauen . ;-)
Viele Grüße
Stefan

Permalink Fritz Weisshart meinte am 10.11.2004:

nochmal die Sache mit dem Punkt:
Die vielen hidden spans machen mir Bauchschmerzen. Irgendwann wird das möglicherweise von Google als Spam abgestraft (diskutiert wird dieses Thema jetzt schon heftig), und dann haben wir eine hübsche Barriere eingebaut: kein Mensch findet die Seite mehr.

Permalink Fritz Weisshart meinte am 15.12.2004:

und nochmal "Verstecken":
(wie schon zur Formatierung des Trennzeichen-Punkts angemerkt)
Leider wird das Verstecken von Inhalten so häufig zur Suchmaschinenoptimierung mißbraucht, daß ich mir sicher bin, dass Google und Co. versuchen werden, diesen Mißbrauch zu unterbinden.
Und eine Formatierung mit Positionierung außerhalb des Anzeigebereichs (mit negativen Werten für x und/oder y) ist recht leicht zu finden, wenn erst einmal das CSS ausgewertet wird.
Und wenn solche Konstrukte dann von Google abgestraft werden, dann werden viele Webseiten von Google einfach nicht mehr gelistet, unter anderem alle Seiten, die die hier vorgeschlagene Formatierung verwenden.
Eine gruselige Vorstellung!

Permalink Tomas Caspers meinte am 15.12.2004:

Das sind dann aber doch ein paar "wenn" zuviel, um für die heute gängige Praxis von Bedeutung zu sein, oder?
Mit der gleichen Wahrscheinlichkeit könnte man auch die Vermutung anstellen, daß Google in drei Monaten den Betrieb einstellen könnte und das angenommene Problem deswegen gar nicht erst auftauchen wird.

Permalink Fritz Weisshart meinte am 15.12.2004:

@ /T
in diversen SEO Foren würdest Du zu dieser Thematik mehr finden.
z.B. bei http://www.abakus-internet-marketing.de/foren/viewforum/f-3.html
Und da ich es für unumgänglich erachte, in Google entsprechend gelistet zu sein, werde ich alles vermeiden, was zu einer Abstrafung mit folgendem Delisting führen könnte.
PS: Wenn Google und Co. ihren Betrieb einstellen sollten, dann wäre das Web nicht mehr das gleiche, und diese Diskussion ebenso obsolet wie ein großer Teil unserer täglichen Arbeit im Web.

Permalink Arnd meinte am 11.09.2005:

Hallo EfA,
vielen Dank für Eure Neuauflage des Tutorials zu Navigationsmenüs.
Auf der Seite Tag3 schreibt Ihr daß ein "Teil der Screenreader" display:none auch nicht vorliest - welche
SR betrifft das im Einzelnen?
Zu Jaws: Ich konnte das nicht nachvollziehen! Das hier:
.unsichtbar
{
display:none;
}
@media aural
{
.unsichtbar
{
display:block;
}
}
bewirkte das gewünschte Verhalten: Vorgelesen, aber nicht angezeigt. Getestet mit IE6 und Jaws6.0. Und zwar entweder direkt im <style>-Bereich oder im Screen-CSS, nur <link ... media="aural" /> wurde nicht erkannt. Habe ich da was entdeckt oder was übersehen? :-)
Zum Thema Google: Gibt es denn zuverlässige Hinweise, daß Google Seiten abwertet, die Elemente mit "display:none" enthalten? Und unter welchen Bedingungen?
Arnd

Kommentar abgeben?

 


Tipp: HTML ist nicht zulässig; Webadressen können Sie so: [url=domain.de]Text[/url] eingeben.