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

… anhand eines praktischen Beispiels Beispiele für barrierefrei gestaltete Webseiten (lt. Workshop: Barrierefreies Internet von Teleonline.at) golf.uk.net

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

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.

© Peter Luser 2005

/* ****************** 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; */ }

© Peter Luser 2005

Aus TYPO3 generierte Stylesheet Klassen:

© 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 = fontColor = #3B 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=

© Peter Luser 2005

Bei Fragen bitte an: