TYPO3 - barrierefrei!

76
TYPO3 - barrierefrei! h~á i~ÄçêÉåòI pìåÄÉ~ã dãÄe pí~åÇ~êÇâçåÑçêãÉ ìåÇ Ä~êêáÉêÉÑêÉáÉ tÉÄëáíÉë ãáí qvmlP

description

Vortrag von Kai Laborenz auf dem Multimediatreff XXIII - Frameworks and CSS am 21.06.2008

Transcript of TYPO3 - barrierefrei!

Page 1: TYPO3 - barrierefrei!

TYPO3 - barrierefrei!h~á=i~ÄçêÉåòI=pìåÄÉ~ã=dãÄe

pí~åÇ~êÇâçåÑçêãÉ=ìåÇ=Ä~êêáÉêÉÑêÉáÉ=tÉÄëáíÉë=ãáí=qvmlP

Page 2: TYPO3 - barrierefrei!

„...körperlich und physisch topfitt!“ <cite>Thomas Häßler</cite>

Page 3: TYPO3 - barrierefrei!

Worum geht es heute?

qvmlP_~êêáÉêÉÑêÉáÜÉáí

dêìåÇäÉÖÉåÇÉ=j∏ÖäáÅÜâÉáíÉåqçé=R=ÇÉê=cÉÜäÉê=ìåÇ=c~ääÉåkΩíòäáÅÜÉ=bñíÉåëáçåëeáäÑÉå=ÑΩê=oÉÇ~âíÉìêÉa~ë=_~êêáÉêÉÑêÉáÜÉáí=~ìÅÜ=áã=_~ÅâÉåÇ\

Page 4: TYPO3 - barrierefrei!

Möglichkeiten und Probleme

dìíÉ=^åë®íòÉ mêçÄäÉãÉKKK

Page 5: TYPO3 - barrierefrei!

Grundlagen TYPO3 / Barrierefreiheit

qvmlP=J=Ä~êêáÉêÉÑêÉá>=

Page 6: TYPO3 - barrierefrei!

Kurz etwas zu TYPO3

léÉåpçìêÅÉJ`jp=~ìÑ=_~ëáë=memLjópniëÉÜê=ã®ÅÜíáÖ=J=ëÉÜê=ÑäÉñáÄÉä=âçåÑáÖìêáÉêÄ~êÖêç≈É=^åò~Üä=bêïÉáíÉêìåÖÉå=EbñíÉåëáçåëFîáÉäÉ=îçêÖÉÑÉêíáÖíÉ=i~óçìíâçãéçåÉåíÉå

ÜçÜÉ=iÉêåâìêîÉEáåòïáëÅÜÉåF=îÉê~äíÉíÉ=mêçÖê~ããëíêìâíìê=EqvmlP=R>FÖêç≈É=^åò~Üä=bêïÉáíÉêìåÖÉå=îçå=ëÉÜê=ìåíÉêëÅÜáÉÇäáÅÜÉê=nì~äáí®íîáÉäÉ=îçêÖÉÑÉêíáÖíÉ=i~óçìíâçãéçåÉåíÉå

Page 7: TYPO3 - barrierefrei!
Page 8: TYPO3 - barrierefrei!

Barrierefreiheit - Grundlagen

k~ÅÜ=ÇÉê=âçããÉåÇÉå=t`^d=O=ãΩëëÉå=ÇáÉ=fåÜ~äíÉ==ÉáåÉê=Ä~êêáÉêÉÑêÉáÉå=tÉÄëáíÉ=

=ï~ÜêåÉÜãÄ~êI=ÄÉÇáÉåÄ~êI=îÉêëí®åÇäáÅÜ=ìåÇ=êçÄìëí=

ëÉáåK

Page 9: TYPO3 - barrierefrei!

Wahrnehmbar

^ääÉ=fåÜ~äíÉ=ìåÇ=_ÉÇáÉåã∏ÖäáÅÜâÉáíÉå=ãΩëëÉåKKKÖÉëÉÜÉåI==ÖÉÜ∏êí=çÇÉê=Éêí~ëíÉí=ïÉêÇÉå=ìåÇ=áå=áÜêÉê=_ÉÇÉìíìåÖ=îÉêëí~åÇÉå=ïÉêÇÉåK

Page 10: TYPO3 - barrierefrei!

Bedienbar

ãáí=ÇÉê=q~ëí~íìê=~ääÉáåIãáí=ëÅÜäÉÅÜíÉê=^ìÖÉåJe~åÇJhççêÇáå~íáçå~ìÑ=ÉáåÉã=ëÉÜê=âäÉáåÉå=_áäÇëÅÜáêãE~ìëëÅÜåáííFçÜåÉ=ìåÇ=ãáíE>F=g~î~ëÅêáéí=

^ääÉ=iáåâëI=_ìííçåë=ìåÇ=ëçåëíáÖÉ=~âíáîÉå=bäÉãÉåíÉ=ãΩëëÉå=ÄÉÇáÉåÄ~ê=ëÉáå=J=ìåÇ=òï~ê

^ìÅÜ=ÇáÉ=oÉ~âíáçå=ÇÉë=póëíÉãë=ãìëë=ÇáÉëÉå=^åÑçêÇÉêìåÖÉå=ÖÉåΩÖÉå

Page 11: TYPO3 - barrierefrei!

Verständlich

fåÜ~äíÉ=ìåÇ=cìåâíáçåÉå=ãΩëëÉå=îÉêëí®åÇäáÅÜ=ëÉáå=

KKK=~ìÅÜ=ÑΩê=jÉåëÅÜÉå=ãáí=ÉáåÖÉëÅÜê®åâíÉå=c®ÜáÖâÉáíÉåI=pÅÜêáÑíëéê~ÅÜÉ=òì=îÉêëíÉÜÉå

EsÉêëí®åÇäáÅÜâÉáí=ëÅÜ~ÇÉí=ÖêìåÇë®íòäáÅÜ=åáÅÜíF

Page 12: TYPO3 - barrierefrei!

Robust

fåÜ~äíÉ=ìåÇ=cìåâíáçåÉå=ãΩëëÉåKKK

~ìÑ=ã∏ÖäáÅÜëí=îáÉäÉå=_êçïëÉê=ìåÇ=ł~ëëáëíáîÉå=dÉê®íÉå“=EpÅêÉÉåêÉ~ÇÉêI=ÉíÅKF=ÑìåâíáçåáÉêÉåòìâìåÑíëâçãé~íáÄÉä=ëÉáå=Epí~åÇ~êÇë>Fł~Äï®êíëâçãé~íáÄÉä“=ÄòïK=ł~ìÑï®êíëîÉêÄÉëëÉêí“=ëÉáå=

Page 13: TYPO3 - barrierefrei!

Im Detail: Die Verordnungen

tP` J=Ç~ë=dêÉãáìãt`^d=N= J=ÇÉê=hä~ëëáâÉê_fqs J=ÇáÉ=ÇÉìíëÅÜÉ=båíëéêÉÅÜìåÖt`^d=OKM J=ÇÉê=âçããÉåÇÉ=pí~åÇ~êÇ^q^d J=ÑΩê=^ìíçêÉå^of^ J=ÑΩê=jìäíáãÉÇá~

_fhJ_fqsqÉëí_fbkbJhêáíÉêáÉå=

J[=ïïïKïÉÄâê~ìíëKÇÉJ[=ïïïKÉáåÑ~ÅÜJÑìÉêJ~ääÉKÇÉ

Page 14: TYPO3 - barrierefrei!

Barrierefreiheit mit TYPO3 - die Herausforderungen

pÉã~åíáëÅÜÉê=ãçÇÉêåÉê=`çÇÉ_~êêáÉêÉÑêÉáÉ=jÉåΩëpâ~äáÉêÄ~êâÉáí=ÇÉë=qÉñíÉë_ÉÇáÉåÄ~êâÉáí=ãáí=ÇÉê=q~ëí~íìê^äíÉêå~íáîíÉñíÉ=L=JáåÜ~äíÉ_~êêáÉêÉÑêÉáÉ=cçêãìä~êÉ

bñíÉåëáçåë=E~ÄÉê=Ç~òì=ëé®íÉê=ãÉÜêF

Page 15: TYPO3 - barrierefrei!

Semantischer moderner Code

s~äáÇÉë=ueqji=NKM= J=âÉáåÉ=mêçÄäÉãÉ=Eáã=`çêÉFeqji=QKMN=ëíêáÅí= J=ëÅÜïÉê=ã∏ÖäáÅÜsÉêïÉåÇìåÖ=ÇÉê=bñíÉåëáçå=css styled content=Epí~åÇ~êÇFÖÖÑK=sÉêïÉåÇìåÖ=îçå=qáÇó=~äë=qvmlPJjçÇìä

# xHTML-Konfiguration #page.config.doctype = xhtml_transpage.config.xmlprologue = nonepage.config.htmlTag_langKey = de-DEpage.config.xhtml_cleaning = all

qvmlp`ofmq

Page 16: TYPO3 - barrierefrei!

Semantischer moderner Code

# entfernt die DIVs um die <hx>s #lib.stdheader.stdWrap.dataWrap =

# address-Tag zur Liste der Tags hinzugefügt, die nicht automatisch mit <p>-Tags umschlossen werden #lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList = div,p,pre,h1,h2,h3,h4,h5,h6,address

qvmlp`ofmq

Page 17: TYPO3 - barrierefrei!

Semantischer moderner Code

# entfernen von class="bodytext" <p>-Tags #lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P >

# entfernen der HTML-Kommentare vor Inhaltselementen #tt_content.text.20.prefixComment =tt_content.stdWrap.prefixComment = tt_content.table.20.stdWrap.prefixComment =lib.stdheader.stdWrap.prefixComment =tt_content.image.20.stdWrap.prefixComment =tt_content.html.prefixComment =

qvmlp`ofmq

Page 18: TYPO3 - barrierefrei!

Barrierefreie Menüs

jÉåΩë=ëáåÇ=EìåÖÉçêÇåÉíÉI=îÉêëÅÜ~ÅÜíÉäíÉF=iáëíÉåKwìê=hÉååòÉáÅÜåìåÖ=ÇÉê=eáÉê~êÅÜáÉ=â~åå=ÉáåÉ=aÉÑáåáíáçåëåìããÉê=ÜÉäÑÉå=J[=ÉáåÑ~ÅÜJÑìÉêJ~ääÉKÇÉL~êíáâÉäLãÉåìÉëL

få=qóéçpÅêáéí=ïÉêÇÉå=ëçäÅÜÉ=jÉåΩë=ΩÄÉê=ÇáÉ=lÄàÉâíÉ=ejbkr=ìåÇ=qjbkr=êÉ~äáëáÉêí

Page 19: TYPO3 - barrierefrei!

mainnavi = HMENUmainnavi

wrap = <hx>Hauptnavigation</hx>| 1 = TMENU 1 noBlur = 1 wrap = <ul>|</ul> NO = 1 NO.allWrap = <li>|</li>

NO.ATagTitle.field = subtitle ...

Barrierefreie Menüs - die Umsetzung

qvmlp`ofmq

Page 20: TYPO3 - barrierefrei!

...# ACT: Seite in der aktuellen Sektion #ACT = 1ACT.allWrap = <li class="activ">|</li>

# CUR: Seite wird gerade angezeigt #CUR = 1

CUR.doNotLinkIt = 1 CUR.wrapItemAndSub = <li

class="current"><span>|</span></li> # Zweite Ebene #2 < .1

Barrierefreie Menüs - die Umsetzung

qvmlp`ofmq

Page 21: TYPO3 - barrierefrei!

Der Rest geht mit CSS...

łpäáÇáåÖ=aççêë“=ëçêÖÉå=ÑΩê=ëâ~äáÉêÄ~êÉ=jÉåΩëeáåíÉêÖêìåÇÖê~ÑáâÉå=ÑΩê=Yäá[=ìåÇ=Y~[

Page 22: TYPO3 - barrierefrei!

Skalierbarkeit? Fehlanzeige!

§ÄÉêä~ÖÉêìåÖÉå=~ìÑÖêìåÇ=ÑáñÉê=_êÉáíÉå=ÇìêÅÜ=dê~ÑáâÉå

Page 23: TYPO3 - barrierefrei!

Flexibel ist besser...

Page 24: TYPO3 - barrierefrei!

Sinnvolle Dokumentstruktur

pÉã~åíáâ=áå=ÇÉå=§ÄÉêëÅÜêáÑíÉå=YÜN[=J=YÜñ[açâìãÉåíëíêìâíìê=ÇìêÅÜ=§ÄÉêëÅÜêáÑíÉå=ÑÉëíäÉÖÉå

pÉáíÉåâçéÑk~îáÖ~íáçåfåÜ~äíKKK

sÉêïÉåÇìåÖ=åáÅÜí=ÖÉÉáÖåÉíÉê=§ÄÉêëÅÜêáÑíÉå=ÇìêÅÜ=oÉÇ~âíÉìêÉ=îÉêÜáåÇÉêå=EÇ~òì=ëé®íÉê=ãÉÜêF

Page 25: TYPO3 - barrierefrei!

Sinnvolle Dokumentstruktur - die Umsetzung

§ÄÉêëÅÜêáÑíÉåÉÄÉåÉ=YÜN[=áã=qÉãéä~íɧÄÉêëÅÜêáÑíÉåÉÄÉåÉ=YÜO[=~ìë=pÉáíÉåíáíÉä=ìåÇ=ÖÖÑK=áã=fåÜ~äíëÉäÉãÉåí=§ÄÉêëÅÜêáÑí=

§ÄÉêëÅÜêáÑíÉåÉÄÉåÉ=YÜP[=ÑΩê=^Äë®íòÉ=áã=fåÜ~äíëÉäÉãÉåí=qÉñí=EqÉñíL_áäÇI=KKKF§ÄÉêëÅÜêáÑíÉåÉÄÉåÉ=YÜQ[=Äáë=YÜS[=áã=bÇáíçê=

tÉäÅÜÉ=§ÄÉêëÅÜêáÑíÉåÉÄÉåÉ=òìê=a~êëíÉääìåÖ=ÇÉê=píêìâíìê\=J[=ïÉÄâê~ìíëKÇÉLOMMTLNOLMOL=ëíêìâíìêJîçåJìÉÄÉêëÅÜêáÑíÉåL=EhçããÉåí~êÉ=äÉëÉåFJ[=ÉáåÑ~ÅÜJÑìÉêJ~ääÉKÇÉL=ÄäçÖÉáåíê~ÉÖÉKéÜé\áÇZaUNO|M|N|M|`

Page 26: TYPO3 - barrierefrei!

Sinnvolle Dokumentstruktur - die Umsetzung

# Überschrift aus Seitentitel setzen #content = COAcontent 10 = TEXT 10.data = page:title 10.wrap = <h2>|</h2> 20 < styles.content.get

qvmlp`ofmq

# Auf Startseite Seitentitel nicht im TITLE ausgegeben #config.noPageTitle = 1

Page 27: TYPO3 - barrierefrei!

Skalierbare Dokumente durch Verwendung von em oder %

qÉãéä~íÉë=eqji=J=qóéçëÅêáéí=J=mem=J=a~íÉåÄ~åâpí~åÇ~êÇ=Ej~êâÉê=éÉê=e~åÇ=ëÅÜêÉáÄÉåF^ìíçíÉãéä~íÉé~êëÉêqÉãéä~sçáä~

js`JhçãéçåÉåíÉ=äáÄLÇáî=Ebäã~ê=eáåòF

Page 28: TYPO3 - barrierefrei!

Alternativtexte aus dem Medienmanagemensystem DAM

^äíÉêå~íáîíÉñíÉ=â∏ååÉå=áã=a^j=îçêÖÉÖÉÄÉå=ïÉêÇÉå§ÄÉêå~ÜãÉ=áå=Ç~ë=oÉÇ~âíÉìêÄ~ÅâÉåÇ=ÖÉëÅÜáÉÜí=~ìíçã~íáëÅÜ=çÇÉê=~ìÑ=tìåëÅÜ

Page 29: TYPO3 - barrierefrei!

Formulare

qvmlP=ÄáÉíÉí=Éáå=fåÜ~äíëÉäÉãÉåí=òìê=bêëíÉääìåÖ=ÉáåÑ~ÅÜÉê=cçêãìä~ê=Es~äáÇáÉêìåÖ=ìåÇ=cÉÜäÉêãÉäÇìåÖÉå=éÉê=g~î~ëÅêáéíFbñíÉåëáçå=accessible_form_validation_ÉëëÉê=ÖÉÉáÖåÉí=áëí=mailform_plusI=Ç~ë=Éáå=eqjiJqÉãéä~íÉ=ÑΩê=ÇÉå=cçêãìä~êÅçÇÉ=ìåÇ=ëÉêîÉêëÉáíáÖÉ=s~äáÇáÉêìåÖ=EáåâäK=báåÖêáÑÑëéìåâíÉ=ÑΩê=ÉáÖÉåÉ=oçìíáåÉåF=ÄáÉíÉí=

Page 30: TYPO3 - barrierefrei!

#### Typo3 Standard Mailformtt_content.mailform.20

accessibility = 1noWrapAttr=1formName = mailformdontMd5FieldNames = 1REQ = 1layout = <div>###LABEL### ###FIELD###</div>RADIO.layout = ...labelWrap.wrap = |radioWrap.wrap = | REQ.labelWrap.wrap = |stdWrap.wrap = <fieldset> | </fieldset>params.radio = ..params.submit = class=“submit"

Page 31: TYPO3 - barrierefrei!

Was man nicht (mehr) braucht...

^ÅÅÉëëâÉóë=ëáåÇ=ãÉáëí=åìíòäçëI=Ç~=~ääÉ=q~ëí~íìêâΩêòÉä=ÄÉäÉÖí=ëáåÇ=ìåÇ=çÜåÉÜáå=åáÅÜí=ÖÉãÉêâí=ïÉêÇÉåq~ÄáåÇÉñ=â~åå=ãÉáëí=ÉåíÑ~ääÉåI=Ç~=ëáÅÜ=ÇìêÅÜ=ÉáåÉ=ëÉã~åíáëÅÜÉ=píêìâíìê=áKÇKoK=ÉáåÉ=ëáååîçääÉ=péêìåÖêÉáÜÉåÑçäÖÉ=ÉêÖáÄí=cçåíJpïáíÅÜÉê=ëáåÇ=åìíòäçëI=Ç~=~ääÉ=_êçïëÉê=áå=em=~åÖÉäÉÖíÉ=pÅÜêáÑíÉå=îÉêÖê∏≈Éêå=â∏ååÉå=ìåÇ=ÄÉíêçÑÑÉåÉå=kìíòÉê=çÜåÉÜáå=ÇáÉ=póëíÉãëÅÜêáÑí=ìãëíÉääÉå=ìåÇ=áå=ÇÉå=åÉìÉëíÉå=sÉêëáçåÉå=ëçÖ~ê=łÉÅÜíÉ“=wççãJcìåâíáçåÉå=ÑΩê=ÇÉå=ÖÉë~ãíÉå=pÉáíÉåáåÜ~äí=ÄáÉíÉåKKK

Page 32: TYPO3 - barrierefrei!

Was man nicht (mehr) braucht... Teil II

a~ë=qáíäÉJ^ííêáÄìí=áëí=òï~ê=çÑí=ëáååîçääI=~ÄÉê=ïç=Éáå=iáåâíÉñí=ÄÉêÉáíë=~ìëë~ÖÉâê®ÑíáÖ=áëíI=ëçääíÉ=Éë=ïÉÖÑ~ääÉåK=tÉåáÖ=ëáååîçää=áëí=ÉëI=áå=dê~ÑáâÉå=~äí=ìåÇ=íáíäÉ=òì=ÇìéäáòáÉêÉåK=qáíäÉ=áëí=~ÄÉê=~ìÅÜ=âÉáåÉ=båíëÅÜìäÇáÖìåÖ=ÑΩê=ëáååÑêÉáÉ=iáåâíÉñíÉ=EłâäáÅâÉå=ëáÉ=ÜáÉê“FmìåâíÉ=~ã=båÇÉ=ÇÉê=jÉåΩäáåâë=áå=iáëíÉå=E§ÄÉêÄäÉáÄëÉä=~ìë=_fqsF

Page 33: TYPO3 - barrierefrei!

Die TOP 5 der FallenqvmlP=J=Ä~êêáÉêÉÑêÉá>=

Page 34: TYPO3 - barrierefrei!

Platz 5: „Tag-Suppe“ durch den grafischen Editor

aÉê=Öê~ÑáëÅÜÉ=bÇáíçê=îçå=qvmlP=Eeqji~êÉ~F=ÄáÉíÉí=îáÉäÉ=j∏ÖäáÅÜâÉáíÉåKKK

Page 35: TYPO3 - barrierefrei!

Platz 5: „Tag-Suppe“ durch den grafischen Editor

hçåÑáÖìê~íáçå=ÇÉë=oqb=áå=ÇÉê=bñíÉåëáçå=çÇÉê=áåÇáîáÇìÉää

q~ÄÉääÉå=áã=bÇáíçê=~ÄëÅÜ~äíÉå=J=Ç~òì=ÖáÄí=Éë=Ç~ë=bäÉãÉåí=q~ÄÉääÉ>póãÄçäÉ=ìåÇ=qáíäÉJqÉñíÉ=ÑΩê=iáåâë

Page 36: TYPO3 - barrierefrei!

Platz 4: Menüs mit Javascript / grafische Menüs

aóå~ãáëÅÜÉ=jÉåΩë=ãáí=g~î~ëÅêáéí=â∏ååÉå=Ä~êêáÉêÉÑêÉá=ëÉáå=EïÉåå=ëáÉ=~Äï®êíëâçãé~íáÄÉä=ëáåÇF

dê~ÑáëÅÜÉ=jÉåΩë=ëáåÇ=ÖêìåÇë®íòäáÅÜ=ÉáåÖÉëÅÜê®åâí=òìÖ®åÖäáÅÜ=J=Ç~=åáÅÜí=ÉáåÑ~ÅÜ=ëâ~äáÉêÄ~ê

aáÉ=pí~åÇ~êÇÑìåâíáçåÉå=îçå=qvmlP=GMENU_LAYERSI=IMGMENUI=GMENU_FOLDOUT=ìåÇ=JSMENU=ëáåÇ=îÉê~äíÉí=ìåÇ=åáÅÜí=ÖÉÉáÖåÉíI=òìÖ®åÖäáÅÜÉ=jÉåΩë=òì=ÉêòÉìÖÉå

Page 37: TYPO3 - barrierefrei!

Platz 4: Menüs mit Javascript / grafische Menüs

jÉåΩë=E~ìÅÜ=Öê~ÑáëÅÜ=~åëéêÉÅÜÉåÇÉF=â∏ååÉå=ãáí=qÉñí=ìåÇ=`pp=ÉêòÉìÖí=ïÉêÇÉå=J=ÉáåÉ=ëáãéäÉ=iáëíÉ=áëí=ÖÉåìÖ

a~ë=ÄÉå∏íáÖíÉ=qóéçëÅêáéíJlÄàÉâí=áëí=TMENU

aìêÅÜ=ÇáÉ=sÉêïÉåÇìåÖ=îçå=êÉáåÉå=iáëíÉå=îÉêÄÉëëÉêí=ëáÅÜ=~ìÅÜ=ÇáÉ=táÉÇÉêîÉêïÉåÇÄ~êâÉáí=ÇÉë=`çÇÉë

Page 38: TYPO3 - barrierefrei!

Platz 3: Unkritische Verwendung von Extensions

sáÉäÉ=bñíÉåëáçåë=äáÉÑÉêå=îçå=e~ìëÉ=~ìë=âÉáåÉå=Ä~êêáÉêÉÑêÉáÉå=eqjiJ`çÇÉ=ãáí=ÉåíïÉÇÉê=áå=cçêã=îçå=eqji=áã=memJ`çÇÉ=çÇÉê=~äë=qÉãéä~íÉë=EÇ~ë=áëí=ëÅÜçå=ÄÉëëÉêF

hêáíÉêáÉå=òìê=nì~äáí®í=îçå=bñíÉåëáçåëWpí~íìë=L=sÉêëáçåëåìããÉê^åò~Üä=ÇÉê=açïåäç~Çë_ÉïÉêíìåÖÉå=LpÉÅìêáíó=oÉîáÉïëa~íìã=ÇÉê=äÉíòíÉå=^âíì~äáëáÉêìåÖ

Page 39: TYPO3 - barrierefrei!

Platz 2: Indexsuche mit Javascript-Navigation

aáÉ=fåÇÉñëìÅÜÉ=Eindexed_searchF=ÄáÉíÉí=ã®ÅÜíáÖÉ=pìÅÜã∏ÖäáÅÜâÉáíÉå=E~ìÅÜ=áå=a~íÉáÉå=ìåÇ=ÉñíÉêåÉå=tÉÄëáíÉëFeqji=ΩÄÉê=qÉãéä~íÉ=ìåÇ=qóéçëÅêáéí=ëíÉìÉêÄ~ê

k~îáÖ~íáçå=òïáëÅÜÉå=pÉáíÉå=ãáí=pìÅÜÉêÖÉÄåáëëÉå=ÉêÑçäÖí=ΩÄÉê=g~î~ëÅêáéí

Page 40: TYPO3 - barrierefrei!

Platz 2: Indexsuche mit Javascript-Navigation

Page 41: TYPO3 - barrierefrei!

Platz 2: Indexsuche (jetzt nicht mehr) mit Javascript-Navigation

báåÄáåÇìåÖ=ÇÉê=bñíÉåëáçå=accessible_is_browse_resultsÉêëÉíòí=g~î~ëÅêáéíJk~îáÖ~íáçå=ÇìêÅÜ=åçêã~äÉ=iáåâë

Page 42: TYPO3 - barrierefrei!

Platz 1: Versteckter Focus

pí~åÇ~êÇáåëí~ää~íáçå=äáÉÑÉêí=g~î~ëÅêáéíI=Ç~ëë=ÇÉå=cçÅìë=EÖÉëíêáÅÜÉäíÉ=iáåáÉF=ÄÉá=iáåâë=îÉêëíÉÅâí

báå=ëáÅÜíÄ~êÉê=cçâìë=áëí=ìåîÉêòáÅÜíÄ~ê=ÑΩê=ÉáåÉ=Ä~êêáÉêÉÑêÉáÉ=tÉÄëáíÉ=J[=ïïïKÉáåÑ~ÅÜJÑìÉêJ~ääÉKÇÉL~êíáâÉäLí~ëí~íìêÑçâìëL

_ÉëëÉê=~äë=ÇÉê=pí~åÇ~êÇÑçâìë=áëí=ΩÄêáÖÉåë=ÉáåÉ=ÇÉìíäáÅÜÉêÉ=hÉååòÉáÅÜåìåÖ

Page 43: TYPO3 - barrierefrei!
Page 44: TYPO3 - barrierefrei!

Platz 1: Versteckter Focus

båíÑÉêåÉå=ÇÉë=łcçâìë=ÉåíÑÉêåÉå“Jg~î~ëÅêáéíëW=fã=e~ìéííÉãéä~íÉ

ëÅÜ~äíÉí=Ç~ë=g~î~ëÅêáéí=áã=pÉáíÉåâçéÑ=~ìë

ìåÇ=áå=ÇÉå=aÉÑáåáíáçåÉå=ÑΩê=qjbkrW

ÉåíÑÉêåí=ÇáÉ=^ìÑêìÑÉ

noblur = 1

page.config.removeDefaultJS = 1qvmlp`ofmq

Page 45: TYPO3 - barrierefrei!

Hilfen für RedakteureqvmlP=J=Ä~êêáÉêÉÑêÉá>=

Page 46: TYPO3 - barrierefrei!

Hilfen für Redakteure

sçêÖ~ÄÉå=òìê=sÉêïÉåÇìåÖ=îçå=§ÄÉêëÅÜêáÑíÉå

^ìëÄäÉåÇÉå=åáÅÜí=ÄÉå∏íáÖíÉê=bäÉãÉåíÉ

hçåÑáÖìê~íáçå=ÇÉë=bÇáíçêë=oqb

^ìëòÉáÅÜåìåÖ=îçå=^ÄâΩêòìåÖÉå=ìåÇ=péê~ÅÜïÉÅÜëÉäå

E_~êêáÉêÉÑêÉáÜÉáíëJF`ÜÉÅâ=áã=_~ÅâÉåÇ

Page 47: TYPO3 - barrierefrei!

Vorgaben zur Verwendung von Überschriften

YÜN[I=YÜO[=ïÉêÇÉå=áã=qÉãéä~íÉ=ÖÉëÉíòíYÜP[=~äë=pí~åÇ~êÇΩÄÉêëÅÜêáÑí=ÑΩê=fåÜ~äíëÉäÉãÉåíÉ=

fã=oqb=ïÉêÇÉå=YÜN[=J=YÜP[=~ìëÖÉÄäÉåÇÉíW

content.defaultHeaderType = 3

RTE.default proc hidePStyleItems = H1,H2,H3

qvmlp`ofmq=`lkpq^kqp

m~ÖÉqp=rëÉêqp

Page 48: TYPO3 - barrierefrei!

Vorgaben zur Verwendung von Überschriften II

cΩê=Ç~ë=fåÜ~äíëÉäÉãÉåí=§ÄÉêëÅÜêáÑí=â~åå=<h2>=ïáÉÇÉê=~âíáîáÉêí=ïÉêÇÉåW

headlines = COA headlines 10 = TEXT 10 field = header wrap = <h2>|</h2> if value.field = CType

equals = header ...

qvmlp`ofmq

Page 49: TYPO3 - barrierefrei!

... 20 = COA 20 10 < tt_content stdWrap.if value.field = CType

equals = header negate = 1

page.20 = COA page.20 10 < styles.content.get

10 renderObj < temp.headlines «=p~ëÅÜ~=sçêÄÉÅâ

Page 50: TYPO3 - barrierefrei!

Ausblenden nicht benötigter Elemente

a~ë=qvmlPJ_~ÅâÉåÇ=â~åå=à~=ã~åÅÜã~ä=Ö~åò=ëÅÜ∏å=îçää=ïÉêÇÉåKKK

Page 51: TYPO3 - barrierefrei!

Ausblenden nicht benötigter Elemente (Redakteurs-Sicht)

Page 52: TYPO3 - barrierefrei!

RTE konfigurieren: nochmal zur Abschreckung...

Page 53: TYPO3 - barrierefrei!

Konfiguration des grafischen Editors

# RTE-Buttons: # RTE.default.showButtons = formatblock, bold, italic, subscript, superscript, orderedlist, unorderedlist, insertcharacter, link, acronym, chMode

RTE.classesAnchor externalLink class = extlinktype = urltitleText = ... externalLinkInNewWindow ... ...

m~ÖÉqp rëÉêqp

Page 54: TYPO3 - barrierefrei!

Konfiguration des grafischen Editors II

...internalLink

class >type = pagetitleText >

internalLinkInNewWindow ... download

type = filemail

type = mail

m~ÖÉqp rëÉêqp

Page 55: TYPO3 - barrierefrei!

Konfiguration des grafischen Editors III

RTE.default proc.dontConvBRtoParagraph = 1proc.allowedClasses ( ... )hidePStyleItems = H1, H2, H3, PREcontentCSS = rte.css

# Zusatzklassen für P einbauenclassesParagraph := addToList(wichtig)# Klassen bei Transformation erlaubenproc.allowedClasses := addToList(wichtig)

RTE.classes.wichtig name = wichtig value = ... ;

m~ÖÉqp rëÉêqp

Page 56: TYPO3 - barrierefrei!

Auszeichnung von Abkürzungen und Sprachwechseln

bñíÉåëáçåë=Éêä~ìÄÉå=Ç~ë=báåÑΩÖÉå=îçå=^ÄâΩêòìåÖÉå=áã=_~ÅâÉåÇI=ÇáÉ=~ìíçã~íáëÅÜ=áã=cêçåíÉåÇ=ÉêëÉíòí=ïÉêÇÉå

_Éá=_ÉÇ~êÑ=ïáêÇ=~ìíçã~íáëÅÜ=Éáå=däçëë~ê=ÉêòÉìÖí

få=wïÉáÑÉäëÑ®ääÉå=ãΩëëÉå=^ìëòÉáÅÜåìåÖÉå=éÉê=e~åÇ=~ìëÖÉÑΩÜêí=ïÉêÇÉåsb_akronymmanager

a21_glossary

Page 57: TYPO3 - barrierefrei!
Page 58: TYPO3 - barrierefrei!

Nützliche ExtensionsqvmlP=J=Ä~êêáÉêÉÑêÉá>=

Page 59: TYPO3 - barrierefrei!

tt_news qvmlPJkÉïëëóëíÉã

indexed_search/ fåÇÉñëìÅÜÉ

accessible_is_browse_results

mailformplus cçêãìä~êÉ

css_filelinks a~íÉáäáëíÉå

sb_acronymmanager, ^ìëòÉáÅÜåìåÖÉå

a21_glossary

sf_validator s~äáÇáÉêìåÖ

Page 60: TYPO3 - barrierefrei!

cron_accessiblemenus jÉåΩçéíáçåÉå

accessible_form_validation s~äáÇáÉêìåÖ=çÜåÉ=g~î~ëÅêáéí

fb_accessiblecontent- aáîÉêëÉ attributes báåëíÉääìåÖÉå

aw_antispambots `^mq`e^>

gov_accessibility hçãéäÉííÄÉáëéáÉä EÉíï~ë=®äíÉêF

Abcsstidy qáÇó

oblady_accessibility_report

Page 61: TYPO3 - barrierefrei!

Barrierefreiheit im BackendqvmlP=J=Ä~êêáÉêÉÑêÉá>=

Page 62: TYPO3 - barrierefrei!

Barrierefreiheit im Backend

t~êìã\oÉÇ~âíÉìêÉ=ãáí=_ÉÜáåÇÉêìåÖÉå

t~ë=ÑÉÜäí\pÉã~åíáëÅÜÉë=eqjisÉêòáÅÜí=~ìÑ=cê~ãÉë^ìëêÉáÅÜÉåÇÉ=hçåíê~ëíɧÄÉêëÅÜ~ìÄ~êâÉáí

táÉ=ÖÉÜíÛë\cÉÜäÉê=ÇÉë=îçêÜ~åÇÉåÉå=_~ÅâÉåÇ=~ìëê®ìãÉåkÉìÉë=_~ÅâÉåÇ=Ä~ìÉå

Page 63: TYPO3 - barrierefrei!

Fehler im „normalen“ Backend beseitigen

kìê=áå=^åë®íòÉå=ã∏ÖäáÅÜcê~ãÉëíêìâíìê=êÉÇìòáÉêÉåhçåíê~ëí=ÉêÜ∏ÜÉåkáÅÜí=ÄÉå∏íáÖíÉ=bäÉãÉåíÉ=~ìëÄäÉåÇÉå

eqjioÉëíÑê~ãÉëoÉëíJhçãéäÉñáí®í=

Page 64: TYPO3 - barrierefrei!

Backend neu bauen

wìÖêáÑÑ=~ìÑ=qvmlPJq~ÄÉääÉå=ìåÇ=cìåâíáçåÉå=ÇÉë=_~ÅâÉåÇë=ΩÄÉê=Ç~ë=cêçåíÉåÇhçãé~íáÄáäáí®í=îçå=łåçêã~äÉã“=ìåÇ=Ä~êêáÉêÉÑêÉáÉã=_~ÅâÉåÇ

sçêíÉáäW=ÑêÉáÉ=dÉëí~äíÄ~êâÉáí=ÇÉë=fåíÉêÑ~ÅÉë=Eléíáâ=ìåÇ=eqjiFk~ÅÜíÉáäW=~ääÉ=cìåâíáçåÉå=ãΩëëÉå=Éñéäáòáí=ÉåíïáÅâÉäí=ïÉêÇÉå

Page 65: TYPO3 - barrierefrei!

Die Website des DBSV

_~êêáÉêÉÑêÉáÜÉáí=áã=cêçåíÉåÇ

_~êêáÉêÉÑêÉáÉ=báåÖ~ÄÉã∏ÖäáÅÜâÉáí=ÑΩê=ÄäáåÇÉ=ìåÇ=ëÉÜÄÉÜáåÇÉêíÉ=oÉÇ~âíÉìêÉ=ÑΩê

eqjiI=qÉñíI=qÉñí=ãáí=_áäÇ

kÉïë

^åäÉÖÉå=îçå=cbJkìíòÉêå

eçÅÜä~ÇÉå=îçå=_áäÇÉêå=

Page 66: TYPO3 - barrierefrei!
Page 67: TYPO3 - barrierefrei!
Page 68: TYPO3 - barrierefrei!
Page 69: TYPO3 - barrierefrei!
Page 70: TYPO3 - barrierefrei!
Page 71: TYPO3 - barrierefrei!
Page 72: TYPO3 - barrierefrei!

§ÄÉêëÅÜêáÑíÉå# Header 1 ### Header 2 ######## Header 6 ######

råëçêíáÉêíÉ=iáëíÉ * Listenpunkt 1 * Listenpunkt 2

pçêíáÉêíÉ=iáëíÉ + Listenpunkt 1 + Listenpunkt 2

tçêíÑçêã~íáÉêìåÖÉåDieser Satz **enthält fette Worte**.Dieser Satz *enthält kursive Worte*.

iáåâë[linktext](linkadresse "link title")

Page 73: TYPO3 - barrierefrei!

Barrierefreies Backend ist eigentlich ein Frontendplugin

Page 74: TYPO3 - barrierefrei!

Frontend-User mit Backendrechten

Page 75: TYPO3 - barrierefrei!

Kai Laborenz

dÉëÅÜ®ÑíëÑΩÜêÉê=ÇÉê=pìåÄÉ~ã=dãÄe_ÉêäáåÉê=^ÖÉåíìê=ÑΩê=hçããìåáâ~íáçå

E_~êêáÉêÉÑêÉáÉF=tÉÄÉåíïáÅâäìåÖaÉëáÖåI=ãçÇÉêåÉë=eqji=C=`ppI=pçÑíï~êÉÉåíïáÅâäìåÖpéÉòá~äáí®íW=qvmlP=E`çåíÉåíJj~å~ÖÉãÉåíëóëíÉãF^ìëëÉêÇÉã=âä~ëëáëÅÜÉ=mo=ìåÇ=hçããìåáâ~íáçëÇÉëáÖå

Page 76: TYPO3 - barrierefrei!

ä~ÄçêÉåò]ëìåÄÉ~ãJÄÉêäáåKÇÉ====ïïïKëìåÄÉ~ãJÄÉêäáåKÇÉLããíMU