HauptseiteDesign ohne Barrieren
Webdesign-Richtlinien für bruecke-kruecke.de

Die goldenen Regeln fuer schlechtes HTMLZu aller erst empfehle ich dringend die Lektüre "Die goldenen Regeln fuer schlechtes HTML" von Stefan Karzauninkat.

Einfach-fuer-Alle.de, Seiten der "Aktion Mensch" für barrierenfreies Webdesign.
Sehr ausführliche und gute Seiten, auch wenn weite Teile der Seiten im wesentlichen CSS vergöttern.

(CGI-Scripe auf bruecke-kruecke.de)

Die Brücke-Krücke Seiten müssen selbstverständlich für Sehbehinderte, Blinde und Körperbehinderte wie für jeden anderen Besucher benutzbar sein.

Tabellen:

Tabellen werden gerne für ein zweispaltiges Layout wie unten benutzt:

1) Punkt a 5) Punkt e
2) Punkt b 6) Punkt f
3) Punkt c 7) Punkt g
4) Punkt d 8) Punkt h

Ein Blinden-Browser kennt keine Tabellen und ließt die Punkte nicht in der Reihenfolge 12345678 sondern:
1 5 2 6 3 7 4 8. Es geht also jeder Sinn und Zusammenhang verloren.
Tabellen sind also nur mit Einschränkungen zu gebrauchen:

1) 2)
3) 4)
5) 6)
7) 8)

Sowas heißt dann "linearisierte Tabelle" da der Tabellentext auch im Quelltext in der Reihenfolge 1 2 3 4 ...steht.
Wäre zwar OK, aber Sehbehinderte, die mit einem Vergrößerungs-Schirm arbeiten, bekommen vielleicht nur 640x480 Pixel zu sehen. So zerreißt das Layout, oder es muss stendig gescrollt werden.

 -   - 
 -   - 
 - 
 - 

Tabellen in Tabellen und zusammengefasste Spalten verbieten sich allerdings.
Negativbeispiel ist leider unsere eigenes Forum mit etwa 8 ineinander verschachtelten Tabellen. Aber es wird mich noch etwas Zeit kosten, das cgi-Script zu entrümpeln...

1) Punkt a
2) Punkt b
3) Punkt c
4) Punkt d

Nur einspaltige Tabellen sind unbedenklich und gut geeignet, z.B. das Layout in den linken Navigationsfenstern zu verwirklichen.
Sowas heißt dann "linearisierte Tabelle" da der Tabellentext auch im Quelltext in der Reihenfolge 1 2 3 4 steht.

Frames

Browser für Sehbehinderten können inzwischen oft Frames darstellen. Angezeigt wird aber immer nur eine der Frames.

Damit der Sehbehinderte überhaupt aussuchen kann, welchen der Frames er sehen will, müssen alle Frames einen eindeutigen Namen haben, der Ihren Inhalt beschreibt.
Auch sinvolle deutsche Dateinamen sind hilfreich.

Da viele Browser für Sehbehinderten Frames aber noch nicht darstellen können, muss in Bereich <NOFRAMES> mindestens ein Link auf die enthaltene Hauptseite stehen. Auch eine ganze Seite in diesem Bereich ist möglich.

Das heißt natürlich, dass die Navigation nur mit den Links auf der Hauptseite möglich sein muss.
Das heißt, alle Links der Navigations-Frames müssen sich auf der Hauptseite wieder finden.

Dadurch verbietet sich der Einsatz von Frames und Tabellen für reine Layoutzwecke!

Es wird wohl im Hauptfenster gesurft. Alle Seiten, die im Hauptfenster laden, sollten nur Links auf Seiten ohne Frames enthalten. So bleibt es bei der framelosen Navigation.
Das heißt außerdem, dass auf diesen Seiten nur target= "_self", "_top" angewendet werden darf. Sonst öffnen plötzlich total sinnlos neue Fenster (z.B. auch bei target="Hauptfenster"!!!).

Für die Brücke-Krücke Seiten sollte unbedingt folgene einheitliche Dateinamen eingehalten werden.

<HTML>
<HEAD> 
 <TITLE>BlaBla</TITLE>
</HEAD>

<FRAMESET ROWS="55,*">
  <FRAME SRC="navigation-uebergeordnet.html" NAME="Hauptnavigationsleiste">

  <FRAMESET COLS="23%,*">
    <FRAME SRC="navigation.html" NAME="kontextbezogene_navigation">
    <FRAME SRC="hauptseite.html" NAME="Hauptfenster">
  </FRAMESET>

<NOFRAMES> 
  <BODY>
    <P>Hier kann eine ganz normale HTML-Seite rein</P>
    <P><A HREF="hauptseite.html">
       Ein Link auf eine Version ohne Frames muss mindestens sein
       </A></P>
  </BODY>
</NOFRAMES>

</FRAMESET>
index.html
name="Hauptnavigationsleiste"
scr="../navigation-uebergeordnet.html"
name="kontextbezogene_navigation"
scr="navigation.(s)html"		 name="Hauptfenster"
scr="hauptfenster.(s)html"

Ein Link zu /unterverzeichnis/index.html braucht also immer target="_top".

/unterverzeichnis/hauptseite.html ist so immer automatisch die Version von /unterverzeichnis/index.html ohne Frames.

Alle Dateinamen sind immer!!! klein geschrieben!

Links

Links in neue Fenster und Pop-Ups: target = _blank oder _new bereiten Probleme.
Manche Blinden-Browser merken nix von dem neuen Fenster und bleiben im alten, in dem sich ja so nichts ändert.
Somit entfällt diese Möglichkeit leider.

Links mit Bildern: Telefonbuch sind zwar hübsch, aber das Bild muss so eingebunden sein:

<A HREF="suchen.html"><IMG SRC="teleb.gif ALT="Telefonbuch"></A>

Denn ohne den ALT-Tag im Bild wird der Sehbehinderte nie erfahren, für was der Link gut sein soll.

normaler Browser:

Zum Gästebuch geht's hier.

Klicken sie hier, um zum Programm zu kommen.

hier gibt's jede Menge Bilder von uns.

Und hier finden Sie unsere Downloads.

Browser für Sehbehinderte:

Zum Gästebuch geht's hier.

Klicken sie hier, um zum Programm zu kommen.

hier gibt's jede Menge Bilder von uns.

Und hier finden Sie unsere Downloads.
hier
hier
hier
hier

Klar was passiert?!
Der Browser für Sehbehinderte entfernt die Links aus dem Text und sammelt sie am Seitenende
Der Sehbehinderte kann also zwischen 4 "hiers" wählen...

besser:

Zum Gästebuch geht's hier.

Klicken sie hier, um zum Programm zu kommen.

hier gibt's jede Menge Bilder von uns.

Und hier finden Sie unsere Downloads.
Gästebuch
Programm
Bilder
Downloads

Buttons

normaler Browser:

Gästebuch
Programm
nur ein dummer Button Bilder
nur ein dummer Button Downloads

Browser für Sehbehinderte:

bttn-bll-xy4 Gästebuch
bttn-bll-xy4 Programm
nur ein dummer Button Bilder
nur ein dummer Button Downloads

Klar was passiert?!
Der Browser für Sehbehinderte ersetzt den hübschen Ball durch seinen Dateinamen, und zwar auch, wenn ALT="nur ein dummer Button" nicht gesetzt ist.
Der Sehbehinderte bekommt also den Text ständig durch sinnlose Dateinamen und Bildbeschreibungen zerstückelt.

  • besser:
    • Gästebuch
    • Programm
    • Bilder
    • Downloads

Bilder

Klar, Blinde können keine Bilder sehen, weswegen sich Bilder für Links nur bedingt und für Image-Maps gar nicht eignen.

Damit Blinde auch Ihren Spaß an den vielen netten Bildern auf dieser Seite haben, sollten folgende Vorkehrungen getroffen werden:

Bruecke-Kruecke Logo

ALT="Bruecke-Kruecke Logo", eine kurze Beschreibung.

LONGDESC="../../icon/bk-logo-desc.htm", Ein Link zu einer ausführliche Beschreibung.

Dann nehmt Ihr Euch eine HTML-Editor. Zum Beispiel ist bei Netscape automatisch auch der Composer dabei. Er erzeugt zwar ein furchtbares HTML, aber für den Anfang reicht's volkommen.
Dateinamen im Internet dürfen übrigens keine Sonderzeichen, Umlaute und Leerzeichen enthalten.
Ihr tut Euch einen sehr großen Gefallen, wenn Ihr alle Dateinamen einheitlich klein schreibt.

Da im Internet "alles" über langsame Telefonleitung läuft, müssen Grafik- und Tondateien möglichst klein sein.

Hier gillt, Ein Bilschirm hat eine Auflösung von etwa 80 dpi. Also reicht es volkommen mit 80 dpi zu scannen.
Schon 300 dpi sind totaler Overkill. Und komprimiert die Bilder gut! Damit Eure Bildchen schnell geladen werden bitte so um 15 kByte in Notfällen bis 50 kByte

Für Grafiken hat sich das GIF-Format mit 256 (oder weniger!) Farben bewährt.
Für Photos verwendet man am besten das JPEG-Format mit 16,7 Mio. Farben. Das gibt schöne Photos und angenehm kleine Dateien.
Ach, bei mir steht ein Flachbettscanner und ein Film-Scanner rum, um Deine Papierbilder, Negative oder Dias in den Computer zu bekommen.

Für Tondateien eignet isch die Kompression als *.mp3 oder *.wma mit 16kb/sec sehr gut.

Wollte Ihr, dass jedem 3. Besucher der Browser abstürzt und er mit Warnmeldungen und falschen Anzeigen überschüttet wird?! Ja?
Dann spickt die Seiten mit Java-Script, Activ-X, Cookies, Animationen und anderem Schnick-Schnack.
Toll sehen die Seiten dann zwar aus, aber mindestens 1/3 der Besucher werden Euch für Eure Seiten hassen!
Seitenanfang

Linie

10.2.2003
Brücke-Krücke Webmaster
Daniel Pfeilsticker

Fliegendreck