WAI konforme Seiten mit TYPO3 (Web Accessibility Initative) © Peter Luser 2005.

Präsentation zum Thema: "WAI konforme Seiten mit TYPO3 (Web Accessibility Initative) © Peter Luser 2005."—  Präsentation transkript:

1 WAI konforme Seiten mit TYPO3 (Web Accessibility Initative) © Peter Luser 2005

2 … anhand eines praktischen Beispiels Beispiele für barrierefrei gestaltete Webseiten (lt. Workshop: Barrierefreies Internet von Teleonline.at) www.csszengarden.com golf.uk.net www.onedayfilms.com www.einfach-fuer-alle.de www.gmx.net

3 Knackpunkte: Elemente/Menüs nicht in herkömmlichen HTML-tabellen, sondern mit CSS ( ). Herausforderung: Bei geladenen CSS muss die Seite gut aussehen. Bei ausgeschaltenem CSS mussen die Menüs als Aufzählungspunkte (ohne Grafik) angezeigt werden plus Sprungmarken zum Hauptinhalt bzw. anderen Sub-Menüs.c © Peter Luser 2005

4 Schwierigkeit: Ein automatisch generiertes horizontales Menü von rechts nach links anordnen. In diesem Beispiel erfolgt die Positionierung absolut von der rechten Seite nach links hinein. Daher ist es notwendig die Breite der generierten Menü-Bilder zu wissen. Die Stylesheet-Klassen werden daher dynamisch generiert und in ein externes.css file geschrieben.

5 © Peter Luser 2005

6

7

8 /* ****************** element ausserhalb des screens positionieren *********/.detach-visual, h2 { position: absolute; top: -3000px; left: -3000px; } /* ******** Linkes MENU************** */ #menu_vertikal { width: 194px; margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; position: relative; top:0px; height:550px; } #menu_vertikal ol, #box_links ul { list-style: none; margin: 0px; padding: 0px; } #menu_vertikal li { padding-top:0px; padding-bottom:0px; } /****************************/ /***** Submenü auf der linken seite ***** / /****************************/ #submenu_einrueckung { padding-top:3px; padding-bottom:3px; padding-left:14px; background-image: url(images/pfeil_blau.gif); background-repeat:no-repeat; width:194px; max-width:194px; color:#436765; font-size: 12px; text-decoration:none; border-bottom: 1px solid #98B5BC; display:block; vertical-align:bottom; overflow:auto; } a.submenu_einrueckung { color:#436765; font-size: 12px; text-decoration:none; position:relative; */ }

9 © Peter Luser 2005

10

11

12 Aus TYPO3 generierte Stylesheet Klassen:

13 © Peter Luser 2005 ###################### # Menü OBEN - rechts (Meta-Navi) # neues MENÜ OBEN RECHTS by peter ###################### temp.MENU_OBEN_RECHTS = COA temp.MENU_OBEN_RECHTS.5 = TEXT temp.MENU_OBEN_RECHTS.5.value= Meta-Navigation: temp.MENU_OBEN_RECHTS.10 = HMENU temp.MENU_OBEN_RECHTS.10.special = directory temp.MENU_OBEN_RECHTS.10.special.value = {$menueoben_rechts} temp.MENU_OBEN_RECHTS.10.1 = GMENU temp.MENU_OBEN_RECHTS.10.1.NO { XY = [10.w]+6,10 backColor = #FFFFFF 10 = TEXT 10.text.case = upper 10.text.field = title 10.fontFile = fileadmin/fonts/arial.ttf 10.fontSize = 10 10.fontColor = #3B6464 10.offset = -6,8 10.niceText = 0 10.align = right } temp.MENU_OBEN_RECHTS.10.1.IProcFunc = user_menuMetanavi temp.MENU_OBEN_RECHTS.20 = TEXT temp.MENU_OBEN_RECHTS.20.value=

14 © Peter Luser 2005

15 Bei Fragen bitte email an: peter@typoheads.com