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

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

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

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

WAI konforme Seiten mit TYPO3

(Web Accessibility Initative)

© Peter Luser 2005

Page 2: 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

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

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

Page 4: WAI konforme Seiten mit TYPO3 (Web Accessibility Initative) © 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.

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

© Peter Luser 2005

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

© Peter Luser 2005

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

© Peter Luser 2005

Page 8: WAI konforme Seiten mit TYPO3 (Web Accessibility Initative) © 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; */

}

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

© Peter Luser 2005

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

© Peter Luser 2005

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

© Peter Luser 2005

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

© Peter Luser 2005

Aus TYPO3 generierte Stylesheet Klassen:

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

© 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>

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

© Peter Luser 2005

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

© Peter Luser 2005

Bei Fragen bitte email an:

[email protected]