 |
 |
 |
 |
 |
 |
 |
Barrierefreies Internetportal mit Typo3
Typo3 ist wie fast ausnahmslose alle CMS, Plone mal ausgenommen, kein out-of-the-box barrierefreies CMS. Dennoch kann man mit Typo3 ohne großen Mehraufwand barrierefreie Website gestalten, die den Standards der BITV bzw. WAI Level A bis WAI Level AA entsprechen. Dies gilt in einem noch höheren Maße für die neue Typo3 Version 4. In der Typo3 - Version 4 wurde nochmals weitreichende Verbesserungen hinsichtlich "Accessibilty" gemacht.
Die Barrierefreiheit eines Typo3 - Internetportales wird im Typo3 - Template festgelegt bzw. programmiert. Typo3 - Templates können auf unterschiedliche Art und Weise angelegt werden. Sehr häufig wird eine Kombination aus HTML - und TypoScript - Template gewählt. TypoScript ist eine Parametisierungssprache ("um den Ausdruck Programmiersprache oder Scriptsprache zu vermeiden") mit der man die Typo3-Engine steuern kann. Letzlich ist für die Barrierefreiheit Ihres Typo3 - Portals gleichgültig, welchen Template - Ansatz Sie wählen.
Schritt für Schritt Anleitung für eine barrierefreie Typo3 Website
- Konfiguration des XHTML - Dokumentes
- RTE - Konfiguration, damit Autoren XHTML validen Code erzeugen
- Zugängliche Websitenavigation (Typo3 Setup für Navigation)
- Content - Rendering Text mit Bild ausserhalb von Tabellen mit Title und Alt Attributen
- Skalierbarkeit der Schriftgröße
- Zugängliche Formulare in Typo3
- Zugängliche Tabellen in Typo3
XHTML / RTE Konfiguration für CSS basiertes Layout der Typo3 Website
Websites, die weitestgehend barrierefrei sind, setzen auf ein XHTML / CSS basiertes Layout. Durch XHTML wird die Zugänglichkeit der Website erhöht. XHTML ist eine XML-gerechte Version von HTML - ein weiterer wichtiger Schritt in Richtung Trennung von Layout und Content. Seit der Typo3 Version 3.6 ist es möglich, Typo3 für eine strikte XHTML - Ausgabe zu konfigurieren (mittels config.doctype). Wichtig ist diesem Zusammenhang zu wissen ist das ein Browser ein XHTML - Dokument nur richtig parsen und darstellen kann, wenn Sie ihm mitteilen welche XML-Version für dieses Dokument verwendet wurde. Ein Beispiel finden Sie hier.
Mittels Page TS Config (ebenfalls im Bsp. enthalten) können Sie sicherstellen, dass unabhängig von den Texteingaben der Autoren valider XHTML - Code produziert wird.
TypoScript für zugängliche Navigation
Um die Entwicklung eines barrierefreien Typo3 - Portals zu beschleunigen, kann man sich zahlreicher Typo3-Extensions im Typo3 Extension - Repository bedienen. So generiert die Extension "Accessible Menue" von Ernesto Baschny automatisch Accesskeys für alle Navigationselemente (Beispiel eines Setup mit "Accessible Menue"). In Verbindung mit der Extensions "gov_accesskey" lassen sich so auf einfache Weise eine Navigation bauen, die den Anforderungen der Barrierefreiheit entspricht. Damit hat man die Navigation schon abgedeckt.
Content Rendering Text mit Bild ausserhalb von Tabellen
Das Rendern von Bildern erfolgt in einer Standard Typo3 - Installation mit Hilfe von Tabellen. Dies für eine barrierefreies Typo3-Portal inakzeptable Art des Contentrenderings kann mit der Extensions "css_styled_IMGTXT" umgangen werden. Hier können Bilder in z. B. Listen gerendert werden.
Skalierbare Schriftgrößen auf einer Typo3 Website
Am einfachsten erreichen Sie das, wenn Sie in Ihrem CSS nur mit relativen Größen arbeiten. Anstatt Fontgrößen in absoluten Pixelgrößen zu definieren arbeiten Sie statt dessen mit Schlüsselwörtern (small, x-small, ...) oder realtiven Größenangaben in %. Dadurch stellen Sie sicher das alle Browser (einschließlich IE) diese Werte überschreiben können. D. h. der anonyme Websurfer kann mittels seiner Browsereinstellungen, "seine" Schriftgröße auf Ihrer Typo3 - Website selbst festlegen.
Wenn Sie, aus welchen Gründen auch immer, festlegen das Ihre linke Navigation zum Beispiel immer genau 200px breit sein muss, dann können Sie diesen Ansatz nicht wählen. Das können Sie dann nur vernüftig lösen, indem Sie dem anonymen Benutzer ein Formular generieren, auf dem er dann die Größe auswählen kann. Je nach ausgewählter Schriftgröße laden Sie dann ein anderes CSS. Am einfachsten fragen Sie dann mit Hilfe von Conditions den ausgewählten Wert ab und laden das entsprechende CSS. Beispiel:
page.stylesheet = fileadmin/styles/normal.css
[globalVar = GP:style = b]
page.stylesheet = fileadmin/styles/gross.css
[globalVar = GP:style = c]
page.stylesheet = fileadmin/styles/sehrgross.css
[global]
Zugängliche Formulare und Tabellen
Tabellen und barrieefrei stellen keinen Widerspruch dar, wie vielerorts suggeriert wird. Der Einsatz von Tabellen für Tabellen, wenn korrekt angewandt, widerspricht in keinster Weise den Grundzügen der Barrierfreiheit. Tabellen werden allerdings sehr häufig zur Gestaltung des Layout herangezogen. Dies macht es einerseits Screenreadern teilweise unmöglich die Website zu lesen, anderseits wird der Code bis zur Unwartbarkeit aufgeblählt. Mit Hilfe der Extension "accessible tables" können Sie Tabellen erstellen, die den Anforderungen an eine barrierefreie Website erfüllt.
Wenn Sie noch nicht Typo3 Version 4 einsetzen, müssen Sie die Konformität von Formularen noch selbst in die Hand nehmen. Dazu gehören Fieldset für Radio-Buttons mit Legend-Elementen und korrekt ausgezeichnete Label - Tags für alle Eingabefelder.
Sollten noch Fragen bestehen können Sie uns jederzeit telefonisch unter 06435 4080 950 oder per Email kontaktieren.