kostenloser Webspace werbefrei: lima-city

Ist das barrierefrei ?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   gcsdriver

   

   gcsdriver hat kostenlosen Webspace.

   12:45, 12.3.2008

   Hi Leute,
   lese mich seit ein tag/paar">paar Tagen in das Thema ein, ist aber immer noch ziemlich abstrakt für mich.
   Die Seite, die ich erstelle, soll speziell für Blinde geeignet sein, daher möchte ich meine Tabellen durch blindenfreundliche Kosntrukte ersetzen. Als Möglichkeit zum schnellen Anspringen dachte ich hierbei an Überschriften (h-Tags), da diese von ScreenReadern wohl automatisch als Navigationspunkte verwendet werden. Der Rest ist einfach p und a und ein paar divs zur Formatierung für Norm-User drumherum. Mein Frage : Ist das barrierefrei ? Habe ich durch die Verwendung dieser Tags einigermaßen semantischen Code produziert und die grundlegende Basis für den Einsatz der divs richtig verstanden?
   
   Die Artikel sehen so aus :
   http://gcsdriver.lima-city.de/blocks.gif
   
   Und das ist derCode:
   

   <h2 class=\"capt\">Überschrift 1</h2>
   <div class=\"box\">
   <p class=\"dunkelschrift news-text\">Mit font-family: können Sie eine oder mehrere Schriftarten bestimmen. Bei mehreren angegebenen Schriftarten ist die Reihenfolge der Angabe entscheidend: ist die erste angegebene Schriftart verfügbar, wird diese verwendet. Ist sie nicht verfügbar, wird die zweite Schriftart verwendet, falls diese verfügbar ist usw.
   </p>
   <div align=\"right\"><a href=\"news_detail.php?id=1\" class=\"news-link\">mehr...</a></div>
   </div>
   
   <br>
   
   <h2 class=\"capt\">Überschrift 2</h2>
   <div class=\"box\">
   <div><img src=\"bla.jpg\" class=\"pic\"></div>
   <p class=\"news-text\">
   Mit font-family: können Sie eine oder mehrere Schriftarten bestimmen. Bei mehreren angegebenen Schriftarten ist die Reihenfolge der Angabe entscheidend: ist die erste angegebene Schriftart verfügbar, wird diese verwendet. Ist sie nicht verfügbar, wird die zweite Schriftart verwendet, falls diese verfügbar ist usw.
   </p>
   <div align=\"right\"><a href=\"news_detail.php?id=2\" class=\"news-link\">mehr...</a></div>
   </div>

   
   
   Gibts eine Möglichkeit, das div mit dem Bild bis zum unteren Rand des umschließenden p`s zu ziehen? Habe bis jetzt kein Lösung gefunden; die p`s haben keine feste sondern inhaltsgebundene Höhe...
   
   
   Beitrag geändert: 12.3.2008 12:47:14 von gcsdriver

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. deltadesign

   deltadesign hat kostenlosen Webspace.

   1:24, 16.3.2008

   Hallo,
   
   du kannst den p Tags fest größen verpassen das habe ich zum beispiel dieser Webseite gemacht. http://carpentarius.ca.ohost.de/drjacob/index.php Dort habe ich alle Objekte durch Stylesheets positioniert und die Größen festgelegt. Da du dem img-Tag eine Klasse zugewiesen hast kannst du den Div-Container weglassen und dann würde ich das Bild und den Text absolute positionieren.
4. Autor dieses Themas

   gcsdriver

   

   gcsdriver hat kostenlosen Webspace.

   15:07, 17.3.2008

   Danke für den Tip,
   
   bin zuerst auf den Anfängerfehler reingefallen und habe einfach alles in div`s verpackt. Der Code oben war in der Hinsicht schon deutlich abgespeckt...
   
   Mir haben ein paar Seiten sehr geholfen, das Konzept \"semantischer Code\" zu verstehen und auch umzusetzen; für alle die über das Wort \"barrierefrei\" in der Titelzeile gestolpert sind, hier mal die Links :
   
   http://www.barrierefreies-webdesign.de/knowhow/css-design/vorgehensweise.php
   http://www.barrierefreies-webdesign.de/
   http://www.vorsprungdurchwebstandards.de/theory/retro-coding/
   http://www.vorsprungdurchwebstandards.de/theory/semantischer-code/

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?