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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:14 Uhr.

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

© Dirk H. 2003 - 2023