XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Barrierefreiheit (http://xhtmlforum.de/forumdisplay.php?f=78)
-   -   Barrierefrei + Semantisch | WEBkrauts gefordert ;-) (http://xhtmlforum.de/showthread.php?t=36965)

ulle 22.09.2005 23:34

Barrierefrei + Semantisch | WEBkrauts gefordert ;-)
 
Moin,

Ihr wißt ja wie ich bin, immer ein wenig respektlos und fern der eingetretenen Wege... lange Rede gar kein Sinn.

Stellt Euch vor Ihr bewegt Euch in einer WEBsite mit einer 3 Stufigen Navigation. Das macht der Mensch mit dem totalen Augenfehler (Blind) natürlich auch gerne. Nur wie bringen wir diesem Mensch nun am besten die Navigation rüber? Er bekommt sie Vorgelesen - klar. Aber kann er sich alles vorstellen was er hört? Was wenn diese Stufen nicht alle geschachtelt sind, da wird es wohl schwierig.

Ich habe einfach eine WEBsite gebaut, diese hat eine visuelle Darstellung , diese ist aber für die Diskussion egal/unwichtig. Wichtig ist das eine Navigationsstufe alleine steht, die 2. und 3, ist geschachtelt. So wie wir es wohl in vielen WEBsites finden.

CODE am besten kopieren und im Browser anschauen. Die WEBsite die nun dargestellt wird befindet sich in der 3.Ebene URLAUB / SCHWEIZ / GESCHICHTEN. Wenn Ihr es seht ist es Euch klar. Aber was müßtet Ihr hören damit es genauso klar ist ??

Nun einfach mal die Druckansicht aufrufen, nun seht Ihr das was ein Screenreader wohl vorlesen wird.

Und das möchte ich zur Diskussion stellen :arrow:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/

*                        {
                        margin:  0;
                        padding: 0;
                       
                        border-collapse:collapse;
                        border-spacing: 0;
                        }

html[xmlns]        {
                        height : 100%;
                        padding-bottom : .005em;
                        }

                       
html,
body                {
                        color:                #000000;
                        background:        #FFFFFF;
                        line-height: 1.45;
                        }

body                {
                        font-size:  100.01%;
                        font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
                       
                        padding: 0 0 0 1em;
                        }

                       
.containing-float:after
                        {
                        content: ".";
                        visibility: hidden;                       
                        height:    0;
                        display: block;
                        clear: both;
                        }

                       
.containing-float
                        {
                        display: inline-table;
                        /* fuer alle Browser;
                        * verbergen IE-Mac \*/
                        display: block;
                        /* ende verbergen IE-Mac */
                       
                        height: auto ! important;
                        /* verbergen IE-Mac \*/
                        height: 1%;
                        /* ende verbergen IE-Mac */
                        }


#menu                {
                        width: 50em;

                        margin: 1em 1em 1em 0;                       
                        padding: 0 0 2em 0;
                       
                        background-color: #FFFFFF;
                        }

       
#menu ul        {
                        list-style-type: none;

                        margin: 0;
                        border-bottom: 2px solid #666666;
                        padding: 1em 0 0px 2em;
                       
                        font-size: .8em;       
                        line-height: 1.3;
                       
                        background-color: #EEEEEE;
                        }

       
#menu li        {
                        float: left;

                        margin: 0 .7em 0 0;
                        }
                       
#menu li strong,
#menu li.on a,
#menu li a        {                       
                        display: block;

                        width: auto ! important;
                        width: 1px;
                       
                        margin: 0;
                        border: 1px solid #555555;
                        border-bottom: 0 none;
                        padding: 0 .5em;
                       
                        color: #666666;
                        background-color: #FFFEEE;
                       
                        text-decoration: none;
                        font-weight: bold;
                       
                        white-space: nowrap;       
                        }
                       

#menu li a:hover,
#menu li a:focus,
#menu li a:active,
#menu li.on a:hover,                       
#menu li.on a:focus,                       
#menu li.on a:active                       
                        {
                        color: #000000;
                        background-color: #FFFF00;
                        }
                       
#menu li.on a,
#menu li strong       
                        {
                        position: relative;
                        top: 2px;

                        margin: 0 .5em;
                        border: 2px solid #000000;
                        border-bottom: 0 none;
                       
                        color: #000000;
                        background-color: #FFFFFF;
                       
                        cursor: default;
                        }

                       
#sub-menu        {
                        float: left;
                        width: 9em;

                        margin: 0 6em 0 0;
                        border-left: 2px solid #555555;               
                        padding: 1em 0 2em 0;
                       
                        background-color: #FFFFFF;
                        }

#sub-menu ul       
                        {
                        list-style-type: none;

                        margin: 0;
                        padding: 0;
                       
                        font-size: .8em;       
                        line-height: 1.3;
                       
                        background-color: #EEEEEE;
                        }

#sub-menu ul ul
                        {
                        position: relative;
                        left: 3em;
                       
                        font-size: 1em;
                        }
                       
#sub-menu li strong,
#sub-menu li.on a,
#sub-menu li a       
                        {                       
                        display: block;

                        height: auto ! important;
                        height: 1px;
                       
                        margin: 0;
                        border: 1px solid #555555;
                        padding: 0 .5em;
                       
                        color: #666666;
                        background-color: #FFFEEE;
                       
                        text-decoration: none;
                        font-weight: bold;
                        }
                       
#sub-menu li.on a
                        {
                        background-color: #FFFBBB;
                        }

#sub-menu li a:hover,
#sub-menu li a:focus,
#sub-menu li a:active,
#sub-menu li.on a:hover,                       
#sub-menu li.on a:focus,                       
#sub-menu li.on a:active                       
                        {
                        color: #000000;
                        background-color: #FFFF00;
                        }
                       
#sub-menu li strong       
                        {
                        color: #000000;
                        background-color: #FFFFFF;

                        border: 1px solid #000000;
                        border-right: 0 none;                       
                        padding: .2em 0 .2em 1.5em;
                       
                        cursor: default;
                        }

                       
/* Barrierefrei-Screenreader-CODE */
#menu em,
#menu dfn,
#menu h4,
#sub-menu em,
#sub-menu dfn,
#sub-menu h4
                        {
                        /*
                        * display: none;
                        * visibility: hidden;
                        *
                        * koennen nicht benutzt werden da Screenreader
                        * es nicht vorlesen würden !!
                        * (also ab ins Nirvana)
                        */
                        position: absolute;
                        top:  -1000px;
                        left: -1000px;
                       
                        width:  0;
                        height: 0;
                       
                        overflow: hidden;
                        display:  inline;
                       
                        line-height: 0;
                        }

       

/*]]>*/
</style>

</head>
<body>


<div id="menu" title="Hauptmenu"><h4>Navigation (1.Ebene)</h4>
        <ul class="containing-float">
                [*]<dfn>1 </dfn><span lang="en">Home</span>.
                [*]<dfn>2 </dfn>Rezepte.
                <li class="on"><dfn>3 </dfn>Rubrik geöffnet:Urlaub.
                [*]<dfn>4 </dfn>Familie.
        [/list]</div>


<div id="sub-menu" title="Untermenu"><h4><span lang="en">Sub</span>-Navigation (2.Ebene und eingebetete 3.Ebene)</h4>
        <ul>
                [*]<dfn>3.1 </dfn>Spanien.
                [*]<dfn>3.2 </dfn>Italien.
                <li class="on"><dfn>3.3 </dfn>Rubrik geöffnet:Schweiz.
                        <ul>
                                [*]<dfn>3.3.1 </dfn>Bilder.
                                [*]<strong title="Standort"><dfn>3.3.2 </dfn>Standort:Geschichten.[/b]
                                [*]<dfn>3.3.3 </dfn>Orte.
                                [*]<dfn>3.3.4 </dfn>Berge.
                        [/list]               
               
                [*]<dfn>3.4 </dfn>Daheim.
                [*]<dfn>3.5 </dfn>Sonstwo.
        [/list]</div>


<h1>Geschichten der Schweiz</h1>




        Die helvetischen Stämme der Tiguriner und der Toygener
        traten mit dem Zug der Kimbern und Teutonen 107 v. Chr.
        in die Geschichte ein. Nach einer siegreichen Schlacht
        unter ihrem König Divico gegen die Römer unter Lucius
        Cassius Longinus wurden die Toygener 102 v. Chr. mit den
        Teutonen bei Arausio vernichtet, die mit den Kimbern und
        Ambronen nach Italien gewanderten Tiguriner........
</p>


</body></html>

weiterführender Link (einfach-fuer-alle.de)

beeviz 23.09.2005 02:02

Was möchtest Du denn da genau diskutieren? ich finds sehr gut gelöst. Hut ab!

ulle 23.09.2005 09:28

Ich möchte Diskutieren über:

1.
Den gewählten TAG/Inhalt [i] :
Ich bin der Meinung das der Hinweis (Rubrik geöffnet) nicht fehlen sollte, aber bisher noch nirgends empfohlen wurde. Es könnte ja auch eine Text/Inhalt zwischen dem Haupt-Menü und dem Sub-Menü sein.
Der Punkt ist das geforderte Trennzeichen zwischen den LINKs. Der gewählte TAG soll eine andere Betonung erzwingen. Gleichzeitig wird das Markup durch den [i] minimiert, gegenüber einer <span class="hidden">.

2.
Zitat:

[*]<strong title="Standort"><dfn>3.3.2 </dfn>Standort:Geschichten.[/b]
Den gewählten TAG [i] innerhalb des [b]:
Ich verspreche mir dadurch 2 verschiedene Betonungen.
Ist der Titel im [b] sinnvoll ? Oder wäre hier nicht [aktuell angezeigt WEBsite] sinnvoller?

Geschütztes Leerzeichen - oder besser nicht so wie im dfn-Element?

Das h4-Element, könnte auch nur ein em-Element sein?



Übrigens - wer die WEBkrauts noch nicht kennt !! (Google)

ulle 23.09.2005 11:59

Zitat:

Zitat von ulle
Das h4-Element, könnte auch nur ein em-Element sein?

Zitat:

Zitat von w3c
EM:
Kennzeichnet Betonungen.

STRONG:
Kennzeichnet stärkere Betonungen.

DFN:
Kennzeichnet die definierende Instanz des eingeschlossenen Terms.


"EM und STRONG werden benutzt, um Betonungen zu kennzeichnen"

Quelle: HTML 4.01-Spezifikation (deu)

Je länger ich darüber nachdenke, desto sinnvoller erscheint mir auch die Menü-Überschrift (h4) lieber als "phrase elements" (em) auszuzeichnen.

Zumal die Überschriften Hirachie des Dokuments durch h4 gestört wird, da meist die h1/h2/h3 im Elementen-Fluss nach der Navigation folgen.

Weiterer Vorteil wäre eine gleichmäßige Betonung für alle Menü/Navigations Oriendierungshilfen, da ja nur auf em und dfn reduziert :idea:

Dieter 23.09.2005 14:00

Hi, Ulle,

hier kommt es zu folgendem Problem:
sobald ich (oder ein Anderer) Deinen Code kopiere und daraus eine Seite erstelle, die ich mir zur besseren Veranschaulichung Deiner Lösung dann auch wirklich anschaue, bin ich danach nicht mehr in der Lage, den die Seite nicht sehen könnenden blinden User zu simulieren!

Du musst diesen Test mit einer Person, die diese Seite NICHT kennt machen!

Ansonsten finde ich Deinen Denkansatz sehr interessant; aber wie gesagt, auf Praxistauglichkeit kannst Du so etwas NICHT allein theoretisch testen (lassen)!

ulle 23.09.2005 14:12

Hmmm... Du meinst da Du die visuelle Ansicht gesehen hast bist Du vorbelastet?

Abgesehen davon sind ja die Verfahren schon getestet und empfohlen, mir geht es ja um "meine" weiteren Ansätze. Wir wissen das em,dfn und strong beim vorlesen anders betont werden. Ich denke mal es wird vorgelesen wie es in der Druchvorschau zu sehen ist.

@Dieter - Du hast Dir die Site auch in der Druckansicht angeschaut?

Dieter 23.09.2005 14:25

Hallo, Ulle!

Ich habe irgendwann feststellen müssen, dass der schlechteste Tester derjenige ist, der eine Seite kennt. Er ist umso schlechter bzw. ungeeigneter, je besser er die Seite kennt. Das heisst, der Macher einer Seite scheidet in aller Regel als Tester per se aus. Ebenso ausscheiden muss jeder, der sich eine Seite testweise intensiv angesehen hat! Und ich habe intensiv hingeschaut! :lol:

Zitat:

Du hast Dir die Site auch in der Druckansicht angeschaut?
Ja, im FF 1.06 und im IE 6.

ulle 23.09.2005 14:49

Lieber Dieter,

Du selbst benutzt folgendes Markup:
Code:

<h1>Navigation</h1>

<h2>Allgemeines</h2>
<ul>[*]<a href=.........


##########oder


<span class="unsichtbar">.</span>


##########oder

[*]<span class="current" title="Sie befinden sich hier:">&gt; Hinweise </span>

Das sind unteranderem genau die Dinge die ich alternativ Diskutieren möchte, und Du beziehst Dich nur auf den echten Test.

Was/Wo ist da die Sematik?

Als WEBkraut kommst Du mir nicht so leicht davon. ;)

Dieter 23.09.2005 14:58

Ulle,

mir ging es beim Testen nicht so sehr um [i], [b] oder <span> - das sind ja lediglich mehr oder weniger taugliche Mittel zum Zweck.

Was mir viel wichtiger erscheint, ist die Frage, ob sich einem blinden User die Aufteilung der Navigation erschliesst und ob er seinen "Standort" absolut und innerhalb der Hierarchie erkennen kann. Und dies unvoreingenommen zu beurteilen ist dann nicht mehr möglich, wenn man die Seite optisch bereits erfasst hast!

Dieter 23.09.2005 15:07

Im übrigen ist das hier
Zitat:

<span class="current" title="Sie befinden sich hier:">&gt; Hinweise </span>
ein Tooltipp für Mausbenutzer; "title" bei <span> wird so gut wie von keinem Screen Reader interpretiert.

Pablo 23.09.2005 15:29

Wie wärs: Mit nem Screenreader vorlesen lassen, aufnehmen, abspeichern und zum download stellen.
Dann kann ich es mir besser vorstellen. Außerdem könnte ich das dann noch n paar anderen Leuten vorspielen, die die Seite nicht kennen.

@ulle: Interessante Idee. Ich werde mir überlegen, dass auf meiner Seite auch einzufügen, da ich auch viele Verschachtelungen habe...
Aber wie liest ein Screenreader eine verschachtelte Liste vor?

ulle 23.09.2005 15:35

Zitat:

Zitat von Dieter Krautkraemer
......
mir ging es beim Testen nicht so sehr um [i], [b] oder <span> - das sind ja lediglich mehr oder weniger taugliche Mittel zum Zweck.

Mehr oder weniger -- genau darum geht es mir, <span> oder [b] (sematik), <hx> oder [i] !

Eine Überschrift der ersten Stufe (h1) sollte in meinen Augen Analog zum Site-Titel stehen und nur einmal pro Site vorkommen (sematik) und nicht eine Navigation ausweisen. /[i] wird betont, ein wertfreier <span> nicht.

Übrigens habe ich den Hinweis (Rubrik geöffnet) aus dem LINK entfernt und davor gesetzt, erscheint mir auch sematisch sauberer. Des weiteren habe ich die Überschriften entsprechend meiner Gedankengänge weiter oben ersetzt.

Hier ist der geänderte CODE-Teil (entsprechend ersetzen):
Code:



/* Barrierefrei-Screenreader-Menue-Orientierung-CODE */
#menu em,
#menu dfn,
#sub-menu em,
#sub-menu dfn
        {
        /*
          * display: none;
          * visibility: hidden;
          *
          * koennen nicht benutzt werden da Screenreader
          * es nicht vorlesen würden !!
          * (also ab ins Nirvana)
          */
        position: absolute;
        top:  -1000px;
        left: -1000px;
         
        width:  0;
        height: 0;
         
        overflow: hidden;
        display:  block;
         
        line-height: 0;
        }

   

/*]]>*/
</style>

</head>
<body>


<div id="menu" title="Hauptmenu">Navigation (1.Ebene)
        <ul class="containing-float">
                [*]<dfn>1 </dfn><span lang="en">Home</span>.
                [*]<dfn>2 </dfn>Rezepte.
                <li class="on">Rubrik geöffnet:<dfn>3 </dfn>Urlaub.
                [*]<dfn>4 </dfn>Familie.
        [/list]</div>


<div id="sub-menu" title="Untermenu"><span lang="en">Sub</span>-Navigation (2.Ebene und eingebettete 3.Ebene)
        <ul>
                [*]<dfn>3.1 </dfn>Spanien.
                [*]<dfn>3.2 </dfn>Italien.
                <li class="on">Rubrik geöffnet:<dfn>3.3 </dfn>Schweiz.
                        <ul>
                                [*]<dfn>3.3.1 </dfn>Bilder.
                                [*]<strong title="Standort"><dfn>3.3.2 </dfn>Standort:Geschichten.

Code:


                                [*]<dfn>3.3.3 </dfn>Orte.
                                [*]<dfn>3.3.4 </dfn>Berge.
                        [/list]               
                [*]<dfn>3.4 </dfn>Daheim.
                [*]<dfn>3.5 </dfn>Sonstwo.
        [/list]</div>


Dieter 23.09.2005 16:07

Hi, Ulle,

das hier
Zitat:

Eine Überschrift der ersten Stufe (h1) sollte in meinen Augen Analog zum Site-Titel stehen und nur einmal pro Site vorkommen (sematik) und nicht eine Navigation ausweisen.
kann so nicht stehen bleiben!

Überschriften kannst Du ja abgestuft in der Wertigkeit von 1 bis 6 verwenden. Damit sollen gewichtete Hierarchien hergestellt werden.

So kannst Du zum Beispiel über eine Navigation eine <h1> setzen, eine weitere <h1> dann über den Inhalt. Damit machst Du deutlich, dass hier zwei gleichberechtigte und gleich wichtige Elemente ein und derselben Seite ihren jeweiligen Anfang haben. Das nach diesen jeweils verwendeten <h1> die nachfolgenden Überschriften wiederum innerhalb "ihres Bereiches" sinnvoll gewichtet sein müssen, ist klar!

ulle 23.09.2005 16:22

Ja hat denn die Navigation die gleiche Gewichtung wie der Inhalt, oder müßte die Navigation nicht komplett aus der Überschriften Hirachie heraus gehalten werden. (So wie in meinem verbesserten Markup)

Navigation :arrow: Organistion der WEBsite

Inhalt :arrow: Inhalt

Dieter 23.09.2005 16:49

Tja, Ulle,

da sprichst Du etwas an, dass man als grundsätzliches Problem ansehen sollte! Denn genau genommen sollte jede Seite tatsächlich nur eine Überschrift erster Ordnung haben. Aber: wo gehört die denn hin? Im Grunde genommen über allem, also vor dem Inhaltsverzeichnis der Seite (Navigation) und natürlich auch vor dem Inhalt. Doch das geht nicht wirklich, denn ein Element auserhalb von <body> steht für die Vergabe einer <h1> nicht zur Verfügung! Und <title> bei den Meta-Angaben kann diese Funktion nicht erfüllen!

Bleibt uns die zweite sinnvolle Variante, das Gewichten der verschiedenen Seitenteile untereinander. Und hier kann man die Vorteile der hierarchisch strukturierten Überschriften voll ausspielen. Jetzt kann man, optisch wie akustisch nachvollziehbar, die (Bestand)Teile einer Seite (Navigation als Inhaltsverzeichnis, Inhalt, Footer als weitere Orientierungshilfe) gleichberechigt auszeichnen, gleichzeitig gegeneinander abgrenzen und deren jeweilige Inhalte dann noch mal untereinander abgrenzen und gewichten.

ulle 24.09.2005 21:25

Weitere Überlegung:

Sollte die eingefügte Sprachpause, der Punkt, innerhalb des LINKs stehen oder besser danach. Auch hier erscheint mir die Pause nach dem LINK sinnvoller.


Dieter 24.09.2005 21:44

Hallo, Ulle!

Der Punkt soll innerhalb des Links stehen, er soll ihn abschließen!

Genau deshalb macht er in einigen Browsern (z. B. IE5/5.5, etc.) ja Probleme, weil die älteren Geräte zum Teil Schwierigkeiten haben, Inline-Elemente (<span>) in einem Inline-Element <a...>) korrekt darzustellen. Und nicht immer hilft der Trick mit der zusätzlichen Leertaste!

Der Punkt soll deshalb am Ende des Links, also innerhalb von <a ...> kommen, weil er das Ende eines Satzes markiert. Auch, wie Du eventuell einwenden wirst, wenn der Satz nur aus einem Wort besteht - wie das zum Beispiel in einem Navigationsmenü ja sehr häufig vorkommt!

netspy 24.09.2005 22:44

Ein Satzzeichen sollte nie am Ende eines Links stehen, da dieses Zeichen nicht zum Linktext gehört.

Mario

terrikay 25.09.2005 11:31

Zitat:

Zitat von Aarakast
Wie wärs: Mit nem Screenreader vorlesen lassen, aufnehmen, abspeichern und zum download stellen.
Dann kann ich es mir besser vorstellen. Außerdem könnte ich das dann noch n paar anderen Leuten vorspielen, die die Seite nicht kennen.

Gute Idee!

Ich hab das mal gemacht. Testkandidat war der neueste JAWS 6.2 ohne besondere Konfiguration - einfach nur die Demoversion gestartet. Die Demoversion läuft immer 40min. und ist nach Neustart des Computers immer wieder verwendbar (Schleichwerbung, dem eigenen Browserpark noch einen hinzuzufügen ;) )!

Hier mal Ulles Menü (Quelltext 1. Post): Ulles Testdatei 1

Hier das Gleiche ohne die Punkte dazwischen: Ulles Testdatei 2

Ehrlich gesagt höre ich da keinen Unterschied. Hörbare Pausen gibt es mit den Punkten IMHO nicht. Es kann natürlich sein, dass das mit anderen Screenreadern (IBM Homepage-Reader ist auch gängig) anders ist.

Hier nochmal eine abgespeckte Version: ganz einfach- ohne Punkte - ohne versteckte Zahlen - auch die Sprachauszeichnung bei <lang="en>Sub</en>-Navigation ist weg. Bitte vergleichen: Ulles Testdatei 3

Die Stimme ist schnell furchtbar einschläfernd, ich beneide die blinden User wirklich nicht.

Pablo 25.09.2005 15:48

Diese armen blinden Menschen!

Ich muss sagen, ich habe kaum etwas verstanden...
Weder vom Menü (konnte ich mir nichts wirklich vorstellen) noch vom Text der Teilweise vorgelesen wird... Sehr schwer zu verstehen.
Aber die dritte Datei konnte ich am besten verstehen (Übung?)

Und was mir noch aufgefallen ist: Ich habe mir mit der Zeit einen schweizerischen Akzent in die Stimme gedacht. Keine Ahnung wieso ;)

Auf jeden Fall scheint mir das "Rubrik geöffnet" sinnvoll. Nur der Doppelpunkt sollte u.U. weg?!

ulle 26.09.2005 11:45

@terrikay DANKE


--------------


Ich finde auch dass es eine mittlere Katastrophe ist!

Selbst ich, der diese Übungsseite verbrochen hat, kann mir nicht wirklich etwas darunter vorstellen.


Was bleibt:

1. Die Erkenntnis Formulierungen auszuschreiben:

:arrow: 2. Ebene ~ Ich hörte: 2 Punkt Ebene

besser ist wohl:

:arrow: zweite Ebene ~ : zweite Ebene


Des weiteren sollte man auch mit Satzbauzeichen sinnvoll umgehen. Also weg mit den Klammern.



2. Die von einfach-fuer-alle vorgeschlagene Definition <dfn> hat mich nun auch nicht überzeugt:

:arrow: <dfn>3.3.1</dfn> ~ aber gut dies kann ich nicht beurteilen



3. Welcher Elementen-Typ für die Screenreader Informationen genommen wird ist wohl auch egal, zumindest habe ich keine verschiedenen Betonungen heraus gehört. Und ob nun ein Punkt im LINK oder nach dem LINK als Sprachpause eingefügt wird, zumal ich keine Sprachpause vernommen habe, unterliegt wohl nur noch der Sematik. Übrigens lies sich der IE von mir nicht überzeugen die Sprechpausen . auserhalb des LINKs nicht visuell darzustellen, d.h es wird in der Sub-Navigation jeweils eine Zeile eingefügt. siehe folgendes Markup:

Code:

<div id="menu" title="Hauptmenu">Navigation erste Ebene
        <ul class="containing-float">
                [*]<dfn>1 </dfn><span lang="en">Home</span>.
                [*]<dfn>2 </dfn>Rezepte.
                <li class="on">Rubrik geöffnet:<dfn>3 </dfn>Urlaub.
                [*]<dfn>4 </dfn>Familie.
        [/list]</div>


<div id="sub-menu" title="Untermenu"><span lang="en">Sub</span>-Navigation zweite Ebene und eingebettete dritte Ebene
        <ul>
                [*]<dfn>3.1 </dfn>Spanien.
                [*]<dfn>3.2 </dfn>Italien.
                <li class="on">Rubrik geöffnet:<dfn>3.3 </dfn>Schweiz.
                        <ul>
                                [*]<dfn>3.3.1 </dfn>Bilder.
                                [*]<strong title="Standort"><dfn>3.3.2 </dfn>Standort:Geschichten[/b].
                                [*]<dfn>3.3.3 </dfn>Orte.
                                [*]<dfn>3.3.4 </dfn>Berge.
                        [/list]               
                [*]<dfn>3.4 </dfn>Daheim.
                [*]<dfn>3.5 </dfn>Sonstwo.
        [/list]</div>


<h1>Geschichten der Schweiz</h1>



 
  Die helvetischen Stämme der Tiguriner und der Toygener
  traten mit dem Zug der Kimbern und Teutonen 107 v. Chr.
  in die Geschichte ein. Nach einer siegreichen Schlacht
  unter ihrem König Divico gegen die Römer unter Lucius
  Cassius Longinus wurden die Toygener 102 v. Chr. mit den
  Teutonen bei Arausio vernichtet, die mit den Kimbern und
  Ambronen nach Italien gewanderten Tiguriner........
</p>

entsprechender CSS-Selector:
Code:

/* Barrierefrei-Screenreader-Menue-Orientierung-CODE */
#menu em,
#menu dfn,
#sub-menu em,
#sub-menu dfn
        {
        /*
          * display: none;
          * visibility: hidden;
          *
          * koennen nicht benutzt werden da Screenreader
          * es nicht vorlesen würden !!
          * (also ab ins Nirvana)
          */
        position: absolute;
        top:  -1000px;
        left: -1000px;
         
        width:  0;
        height: 0;
         
        overflow: hidden;
        display:  block;
         
        line-height: 0;
        }


Dieter 26.09.2005 13:03

@ulle:

Die Elemente [b] und [i] stehen zwar für stark betont und betont, aber die Browser legen diese Anweisung (zumindest bisher) rein optisch aus. Bei akustischer Wiedergabe ist von einem Unterschied, zum Beispiel zu einem nicht konturierten <span> nichts feststellbar!

In diesem Zusammenhang ist eher noch zu befürchten, dass zukünftige Browser das optische Hervorheben von [b] und [i] eher noch forcieren und das Verstecken per CSS noch weiter erschweren als jetzt!

@netspy/Mario:

Semantik ist ja die Lehre von der Bedeutung der Wörter und Zeichen einer Sprache. Im Bereich der Informationsverarbeitung bezeichnet die Semantik die eindeutige Beziehung zwischen dem Kommando einer Programmier- oder Auszeichnungssprache und der elementaren Funktion, die der Computer als Reaktion auf das Kommando ausführt.

Zur Semantik gehört aber auch die Syntax, also die korrekte Schreibweise einer Zeichenfolge, die Wörter oder ganze Sätze ergibt. Damit aus Wörtern sinnvolle und verständliche Sätze gebildet werden können, werden auch Satzzeichen zum Markieren bestimmter Abschnitte benötigt. So gehört in unserer Sprache an das Ende eines Satzes ein Punkt (oder ein Ausrufe- oder Fragezeichen).

Da ich einen Listeneintrag in einem Menü als Satz ansehe, ordne ich diesem Satz den Punkt direkt zu; dass heisst in unserem Fall, der (optisch verdeckte) Punkt befindet sich innerhalb des Links.

Das Kommando, dass sich für das ausführende Programm (hier: Screen Reader) daraus ergibt, ist "Sprechpause". Für dieses Kommando selbst ist es tatsächlich egal, ob es innerhalb oder ausserhalb des Links kommt; Hauptsache, es wird überhaupt gegeben!

Denn der Link wird letztendlich ganz zwangsläufig auch begrenzt durch das Ende des Listeneitrags () - was aber keine automatische Sprechpause bedeutet.

netspy 26.09.2005 13:46

Zitat:

Zitat von Dieter Krautkraemer
@netspy/Mario:

Danke für die ausführliche Erklärung von Semantik und Satzbau :)

Listen sind jedoch im Allgemeinen nun mal keine Sätze, weshalb auch keine Satzzeichen dahinter kommt. Ein Satz hat in der deutschen Rechtschreibung eine bestimmte Struktur und "Home." erfüllt diese nicht. Deshalb wird dahinter auch kein Punkt gesetzt. Selbst wenn es aber so wäre, würde der Punkt nicht mit zum Linktext gehören, da der Linkttext nun mal nur "Home" ist. Das ist auch deshalb wichtig, da Links durchaus mehrmals auf der Seite vorkommen könnte und ein Browser dann Probleme hätte, "Home", Home." und "Home," als ein und denselben Link zu erkennen.

Was die Sprechpausen angeht, dafür sind aurale Stylesheets zuständig und wenn Voicebrowser nach einem Listenpunkt keine Pause machen, dann bau sie einfach selbst ein:
Code:

li { pause-after: 20ms; }
Mario

ulle 26.09.2005 14:18

Zitat:

Zitat von netspy
Was die Sprechpausen angeht, dafür sind aurale Stylesheets zuständig und wenn Voicebrowser nach einem Listenpunkt keine Pause machen, dann bau sie einfach selbst ein:
Code:

li { pause-after: 20ms; }

Stellt sich die Frage: Warum überhaupt Punkte als Srechpause, bzw. welches Markup auch immer eingebaut wird um einem Screenreader zu helfen.

Gehen wir also weg vom zusätzlichen Markup, bleiben bei sauberer Semantik und nutzen besser CSS Aural style sheets.

Wenn wir nun davon ausgehen das Menschen die auf einen Screenreader angewiesen sind, diesen in der neusten Version nutzen, müßte dieser doch genau ein solchen Sheet verstehen/vorlesen.

Dieter 26.09.2005 18:14

@netspy/Mario:
Zitat:

Danke für die ausführliche Erklärung von Semantik und Satzbau
Ich wollte Dich damit nicht belehren, sondern nur deutlich machen, auf welcher Grundlage wir uns bewegen!

Ich habe übrigens nicht behauptet, dass Listen Sätze sind; der Listeninhalt aber kann sehr wohl ein Satz sein!

Dass ein Link mehrfach auf einer Seite vorkommen kann, stellt auch dann kein Problem dar, wenn es lediglich im Linktext zu unterschiedlicher Schreibweise durch den Punkt kommt. Denn dafür, dass der Browser die richtige Seite findet, ist immer noch das per Anker benannte Linkziel zuständig.

@netspy und Ulle:
Es hat bisher leider keinen Sinn, sich auf aurale Stylesheets zu verlassen. Die Unterstützung für diesen Medientyp ist so gut wie Null! Genau deshalb ist man doch gezwungen, auf "Tricks" wie den mit der erzwungenen Sprechpause mittels verdecktem Punkt zurückzugreifen.

ulle 26.09.2005 18:25

Zitat:

Zitat von Dieter
auf "Tricks" wie den mit der erzwungenen Sprechpause mittels verdecktem Punkt zurückzugreifen.

Ich habe keine Sprechpause festgestellt !!


Auch hier wieder das alte Lied, wir machen Hacks/zusätzliches Markup - und die Hersteller der Ausgabe-Software (Browser/Screenreader) halten sich an keine Standards.

Dieter 26.09.2005 18:56

Zitat:

Ich habe keine Sprechpause festgestellt !!
Ich schon - mit JAWS 5.1.

Neben Deiner Demo-Datei habe ich in den letzten Tagen ausführlich verschiedene Varianten ein und derselben Datei getestet. Mal mit Punkt an verschiednen Stellen im MarkUp, mal ohne Punkt. Fazit: es ist schnuppe, wo der Punkt sitzt, wichtig scheint lediglich zu sein, dass er vorhanden ist. Dies deckt sich im übrigen exakt mit den Angaben anderer Readertester.

Ich muss allerdings zugeben, dass die per Punkt erzwungenen Sprechpausen arg knapp bemessen sind - um eine umfangreiche und eventuell hierarchisch auffgeteilte Navigationsstruktur zu "sehen", reicht das wohl kaum aus!

Zitat:

Auch hier wieder das alte Lied, wir machen Hacks/zusätzliches Markup - und die Hersteller der Ausgabe-Software (Browser/Screenreader) halten sich an keine Standards.
Das hier ist das gleiche Problem wie bei den Macken im optischen Bereich; nur würde sich hier ein "Abwälzen der Verantwortung" auf die Browserhersteller sehr viel stärker negativ auf die betroffenen User auswirken als dies bei optischer Anzeige der Fall ist! Da hilft dann vorläufig nur eins: im Sinne der betroffenen User per MarkUp ausbessern und bei den Herstellern und öffentlich über die Hersteller meckern!

netspy 26.09.2005 18:58

Zitat:

Zitat von Dieter Krautkraemer
Ich wollte Dich damit nicht belehren, sondern nur deutlich machen, auf welcher Grundlage wir uns bewegen!

Ich denke mal, dass mir die Grundlagen klar sind. ;)

Zitat:

Zitat von Dieter Krautkraemer
Ich habe übrigens nicht behauptet, dass Listen Sätze sind; der Listeninhalt aber kann sehr wohl ein Satz sein!

Ich bezog mich auf deine Aussage "Da ich einen Listeneintrag in einem Menü als Satz ansehe,..." und da bin ich anderer Meinung. Dass ein Listeninhalt auch ein Satz sein kann, hab ich ja nicht bestritten.

Zitat:

Zitat von Dieter Krautkraemer
Dass ein Link mehrfach auf einer Seite vorkommen kann, stellt auch dann kein Problem dar, wenn es lediglich im Linktext zu unterschiedlicher Schreibweise durch den Punkt kommt. Denn dafür, dass der Browser die richtige Seite findet, ist immer noch das per Anker benannte Linkziel zuständig.

Es geht nicht um dDas Linkziel, sondern darum, dass sich blinde Webseitenbesucher zum Navigieren auch mal alle Links vorlesen lassen und wenn ein und derselbe Link mit verschiedenen Linktexten vorhanden ist, ist das eher suboptimal.

Zitat:

Zitat von Dieter Krautkraemer
Es hat bisher leider keinen Sinn, sich auf aurale Stylesheets zu verlassen. Die Unterstützung für diesen Medientyp ist so gut wie Null!

Das kann ich nicht beurteilen. Allerdings ist die Unterstützung von Voicebrowsern vielleicht auch deshalb noch schlecht, weil aurale Stylesheets auf Webseiten kaum angewendet werden.

Zitat:

Zitat von Dieter Krautkraemer
Genau deshalb ist man doch gezwungen, auf "Tricks" wie den mit der erzwungenen Sprechpause mittels verdecktem Punkt zurückzugreifen.

Tricks mit einem Punkt oder ähnliches machen vermutlich mindestens genauso viele Probleme, wie sie evtl. nützen.

Mario

Dieter 26.09.2005 19:05

@mario:
Zitat:

Das kann ich nicht beurteilen. Allerdings ist die Unterstützung von Voicebrowsern vielleicht auch deshalb noch schlecht, weil aurale Stylesheets auf Webseiten kaum angewendet werden.
Leider ist es genau anders herum! Dieser Medientyp wird nicht angesprochen, weil die nötige Unterstützung dafür fehlt!

Und mittlerweile gibt es schon eine ganze Menge von Websitecodern, die diesen Medientyp beherrschen würden, das darfst Du gerne glauben! :lol:

Der Punkt ist ja auch kein "Hack" im eigentlichen Sinn; er ist in vielen Fällen oft nur das, was dort, wo er sich tummelt, auch hingehört, nämlich ein ganz ordninärer Punkt, das Zeichen zum Satzende. Nachteile hat er deshalb keine zu bieten. Es sei denn, Du hältst den sichtbaren Punkt bei deaktiviertem CSS für einen gravierenden Nachteil.

Dieter 26.09.2005 19:11

@ulle:

Dein Beitrag hier hat mich dazu bewogen, meine Art der Naviagtion noch mal zu überprüfen und in einem Testdurchlauf mal gegen eine völlig andere Art auszutauschen. Aber nachdem ich auf ein hierarchisch untergliedertes Menü ähnlich Deinem umgestellt hatte, war ich kuriert.

Stell Dir diese Seite hier http://www.koblenz-metternich.de/vereine.php in einem solchen Menü eingebunden vor und sage mir, ob Du Dir dies dann vorlesen lassen willst!? :lol:

(Sprunglinks in einem Menü als Sonderthema gefällig? ) :)

Dieter 26.09.2005 19:32

@Mario:
Zitat:

Es geht nicht um dDas Linkziel, sondern darum, dass sich blinde Webseitenbesucher zum Navigieren auch mal alle Links vorlesen lassen und wenn ein und derselbe Link mit verschiedenen Linktexten vorhanden ist, ist das eher suboptimal.
Ich glaube, hier unterliegst Du einem Irrtum!? Der Punkt wird ja nicht vorgelesen, er "veranlasst" lediglich eine kleine Sprechpause!

Insofern sind vom vorgelesenen Text her "Home." und "Home" absolut identisch!

netspy 26.09.2005 19:59

Zitat:

Zitat von Dieter Krautkraemer
Ich glaube, hier unterliegst Du einem Irrtum!? Der Punkt wird ja nicht vorgelesen, er "veranlasst" lediglich eine kleine Sprechpause!

Insofern sind vom vorgelesenen Text her "Home." und "Home" absolut identisch!

Hier reden wir wohl aneinander vorbei. Mir geht es bei dem Punkt hauptsächlich darum, ob er innerhalb des Links oder außerhalb steht. Da ist es nun mal so, dass Satzzeichen am Ende eines Linktextes grundsätzlich nicht mit in den Linktext kommen. Ansonsten kommen in dem Dokument nämlich die schon erwähnten Linktexte "Home." und "Home" vor und das sollte man möglichst vermeiden.

Davon abgesehen halte ich von einem extra Punkt nur als Pausezeichen aber auch nichts. Wenn ein Screenreader[*]Home[*]Weiter ohne Pause hintereinander weg liest, sollte man lieber mal einen Bug an den Hersteller melden.

Mario

Dieter 26.09.2005 20:50

Zitat:

Davon abgesehen halte ich von einem extra Punkt nur als Pausezeichen aber auch nichts. Wenn ein Screenreader[*]Home[*]Weiter ohne Pause hintereinander weg liest, sollte man lieber mal einen Bug an den Hersteller melden.
Davon (vom Punkt!) muss man nicht begeistert sein - da sind wir uns ja einig! Er bedeutet (unter anderem) ja auch Mehraufwand beim Erstellen einer Seite.

Die zahlreichen und seit Jahren anhaltenden Reklamationen bei den Herstellern dieser Programme fruchten ja auch so allmählich. Aber bei sehr vielen Usern sind diese Programme aus Kostengründen sehr lange im Gebrauch und werden nicht regelmäßig durch neuere Versionen ersetzt. Wobei es je nach Programm für einen stark sehbehinderten oder blinden User sehr schwer bis unmöglich ist, die neue Programmverion selbst aufzuspielen und dann einzurichten.

Das Einrichten dieser Programme ist eine sehr mühsame und ebenso zeitaufwendige Angelegenheit; da bügelt man nicht mal schnell den FF 1.07 über den 1.06 drüber! Alle userspezifischen Einstellungen in den Menüs und Submenüs müssen angehört, sortiert und eingestellt werden. Und der erwünschte Effekt muss zur Probe gegengehört werden. Und notfalls noch mal eingestellt!

Und bis diese Art von Programmen soweit ist, dass sie leicht installiert und leicht eingerichtet werden können und so sinnvolle Features wie Sprechpausen an geeigneten Stellen "ab Werk" aufweisen - so lange sollten wir den Usern, die damit arbeiten müssen, mit "Punkten" oder ähnlichen, leicht zu realisierenden Hilfen zur Seite stehen!

terrikay 26.09.2005 20:56

Zitat:

Zitat von netspy
Das kann ich nicht beurteilen. Allerdings ist die Unterstützung von Voicebrowsern vielleicht auch deshalb noch schlecht, weil aurale Stylesheets auf Webseiten kaum angewendet werden.

Die ist sicher auch deshalb schlecht, weil Voicebrowser normalerweise Aufsätze für den Internet Explorer sind - und damit nur das können, was der IE ihnen übermittelt.

Mir gefallen die Punkte auch nicht. Sie sind IMHO semantisch nicht korrekt. Im neuesten JAWS hört man auch nichts davon. Komisch, dass mit älteren Versionen ein Unterschied zu hören ist. Kannst du das auch mal aufnehmen, Dieter?

Dieter 26.09.2005 21:02

Zitat:

Kannst du das auch mal aufnehmen, Dieter?
Wenn Du mir sagst, wie - gerne! :lol:

ulle 26.09.2005 21:04

Zitat:

Zitat von Dieter Krautkraemer
Stell Dir diese Seite hier http://www.koblenz-metternich.de/vereine.php in einem solchen Menü eingebunden vor und sage mir, ob Du Dir dies dann vorlesen lassen willst!? :lol:

Und was ist mit der Zugänglichkeit für Normaluser, der Klick auf einen Verein, und sieht die Information (prima) - nur muß er um zum nächsten Verein zu kommen erst mal eine Site zurück.
Zu allem Überfluss hat der Screenreader User keinen Link mehr in der Navigation, der ihm sagt "Standort". D.h. die Bindung zur Navigation ist verloren, ob das besser ist :idea:

Zitat:

Zitat von Dieter Krautkraemer
(Sprunglinks in einem Menü als Sonderthema gefällig? ) :)

Danke, schon gelöst - Du weißt ja bei Skiplinks arbeite ich mit dem label-Tag ;)

Dieter 26.09.2005 21:23

Ulle,

eine solche Menge von Links lässt sich doch nicht auf sinnvolle Art im Menü unterbringen!

Und die "Bindung" ans Navigationsmenü wird auf der Seite oben (und bei langen Seiten auch unten) so hergestellt:
Code:

<p class="schalter">
        zur&uuml;ck zur &Uuml;bersicht &raquo;Vereine&laquo;</p>

Diese Art der Navigation ist übrigens auch readertauglich!

ulle 26.09.2005 21:37

@Dieter

Zitat:

Diese Art der Navigation ist übrigens auch readertauglich!
Nachdem die gesamte Site erstmal durchgelesen wurde.

Naja, ich sehe dass die Vereine gegliedert sind, 6 Verschiedene, das brühlt ja nach einer mehrstufigen Navigation.
Wie begegnest Du denn zukünftiger weiterer Rubriken in Deiner ersten Navigationsstufe, die ja auch bei Dir die einzige Stufe darstellt. Dann wird jede dargestellte Seite mit allen Navigationspunkten Deiner dann sehr überladenen ersten Stufe dargestellt/vorgelesen.

Ziel der Übung war ja genau das Thema, und WEBsites die ohne diese Verschachtelung auskommen sind dann wohl eher kleine Projekte. Aber diese Zeiten sind vorbei, CMS wohin man schaut. Also sollte ein vernüftiges Verfahren her das allen hilft.



So und nun nochmal zu Eingangsfrage:

Wie mache ich mehrstufige Navigationen sinnvoll zugänglich?

Dieter 26.09.2005 22:07

Zitat:

Nachdem die gesamte Site erstmal durchgelesen wurde.
Nein! Durch die durchgängige Strukturierung mit Überschriften und Absätzen kann die Seite von Readernutzern ganz schnell "durchsprungen" werden!


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:15 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020