Date post: | 06-Apr-2015 |
Category: |
Documents |
Upload: | elldrich-gerstenberger |
View: | 106 times |
Download: | 1 times |
WAI konforme Seiten mit TYPO3
(Web Accessibility Initative)
© Peter Luser 2005
© Peter Luser 2005
… 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
Knackpunkte:
Elemente/Menüs nicht in herkömmlichen HTML-tabellen,
sondern mit CSS (<div>).
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
© 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
© Peter Luser 2005
© Peter Luser 2005
© 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
© Peter Luser 2005
© Peter Luser 2005
© 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 = TEXTtemp.MENU_OBEN_RECHTS.5.value=<div class="navigation"><span class="detach-visual">
<h2>Meta-Navigation: </h2></span><ul>
temp.MENU_OBEN_RECHTS.10 = HMENUtemp.MENU_OBEN_RECHTS.10.special = directorytemp.MENU_OBEN_RECHTS.10.special.value = {$menueoben_rechts}temp.MENU_OBEN_RECHTS.10.1 = GMENUtemp.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 = TEXTtemp.MENU_OBEN_RECHTS.20.value=</ul></div>
© Peter Luser 2005