pí~åÇ~êÇâçåÑçêãÉ=ìåÇ=Ä~êêáÉêÉÑêÉáÉ=tÉÄëáíÉë=ãáí=qvmlPTYPO3 - barrierefrei!h~á=i~ÄçêÉåòI=pìåÄÉ~ã=dãÄe
„...körperlich und physisch topfitt!“ <cite>Thomas Häßler</cite>
Worum geht es heute?         qvmlP         _~êêáÉêÉÑêÉáÜÉáí         dêìåÇäÉÖÉåÇÉ=j∏ÖäáÅÜâÉáíÉå         qçé=R=ÇÉê=cÉÜäÉê=ìå...
Möglichkeiten und Probleme        dìíÉ=^åë®íòÉ         mêçÄäÉãÉKKK
qvmlP=J=Ä~êêáÉêÉÑêÉá>=Grundlagen TYPO3 /              Barrierefreiheit
Kurz etwas zu TYPO3           léÉåpçìêÅÉJ`jp=~ìÑ=_~ëáë=memLjópni           ëÉÜê=ã®ÅÜíáÖ=J=ëÉÜê=ÑäÉñáÄÉä=âçåÑáÖìêáÉêÄ~ê    ...
Barrierefreiheit - Grundlagen            k~ÅÜ=ÇÉê=âçããÉåÇÉå=t`^d=O=ãΩëëÉå=ÇáÉ=fåÜ~äíÉ==            ÉáåÉê=Ä~êêáÉêÉÑêÉáÉå=tÉ...
Wahrnehmbar         ^ääÉ=fåÜ~äíÉ=ìåÇ=_ÉÇáÉåã∏ÖäáÅÜâÉáíÉå=ãΩëëÉåKKK            ÖÉëÉÜÉåI==ÖÉÜ∏êí=çÇÉê=Éêí~ëíÉí=ïÉêÇÉå=ìåÇ=  ...
Bedienbar            ^ääÉ=iáåâëI=_ìííçåë=ìåÇ=ëçåëíáÖÉ=~âíáîÉå=bäÉãÉåíÉ=            ãΩëëÉå=ÄÉÇáÉåÄ~ê=ëÉáå=J=ìåÇ=òï~ê       ...
Verständlich                 fåÜ~äíÉ=ìåÇ=cìåâíáçåÉå=ãΩëëÉå=îÉêëí®åÇäáÅÜ=ëÉáå=                 KKK=~ìÅÜ=ÑΩê=jÉåëÅÜÉå=ãáí=Éá...
Robust         fåÜ~äíÉ=ìåÇ=cìåâíáçåÉå=ãΩëëÉåKKK           ~ìÑ=ã∏ÖäáÅÜëí=îáÉäÉå=_êçïëÉê=ìåÇ=ł~ëëáëíáîÉå=           dÉê®íÉå“...
Im Detail: Die Verordnungen              tP`        J=Ç~ë=dêÉãáìã              t`^d=N=    J=ÇÉê=hä~ëëáâÉê              _fq...
Barrierefreiheit mit TYPO3 - die Herausforderungen              pÉã~åíáëÅÜÉê=ãçÇÉêåÉê=`çÇÉ              _~êêáÉêÉÑêÉáÉ=jÉåΩ...
Semantischer moderner Code             s~äáÇÉë=ueqji=NKM= J=âÉáåÉ=mêçÄäÉãÉ=Eáã=`çêÉF             eqji=QKMN=ëíêáÅí= J=ëÅÜïÉ...
Semantischer moderner Code                                                qvmlp`ofmq           # entfernt die DIVs um die ...
Semantischer moderner Code                                             qvmlp`ofmq           # entfernen von class="bodytex...
Barrierefreie Menüs              jÉåΩë=ëáåÇ=EìåÖÉçêÇåÉíÉI=îÉêëÅÜ~ÅÜíÉäíÉF=iáëíÉåK              wìê=hÉååòÉáÅÜåìåÖ=ÇÉê=eáÉê~...
Barrierefreie Menüs - die Umsetzung                                             qvmlp`ofmq            mainnavi = HMENU    ...
Barrierefreie Menüs - die Umsetzung                                               qvmlp`ofmq                ...           ...
Der Rest geht mit CSS...               łpäáÇáåÖ=aççêë“=ëçêÖÉå=ÑΩê=ëâ~äáÉêÄ~êÉ=jÉåΩë               eáåíÉêÖêìåÇÖê~ÑáâÉå=ÑΩê=...
Skalierbarkeit? Fehlanzeige!   §ÄÉêä~ÖÉêìåÖÉå=   ~ìÑÖêìåÇ=   ÑáñÉê=_êÉáíÉå=   ÇìêÅÜ=dê~ÑáâÉå
Flexibel ist besser...
Sinnvolle Dokumentstruktur             pÉã~åíáâ=áå=ÇÉå=§ÄÉêëÅÜêáÑíÉå=YÜN[=J=YÜñ[             açâìãÉåíëíêìâíìê=ÇìêÅÜ=§ÄÉêëÅ...
Sinnvolle Dokumentstruktur - die Umsetzung              §ÄÉêëÅÜêáÑíÉåÉÄÉåÉ=YÜN[=áã=qÉãéä~íÉ              §ÄÉêëÅÜêáÑíÉåÉÄÉå...
Sinnvolle Dokumentstruktur - die Umsetzung                                             qvmlp`ofmq           # Überschrift ...
Skalierbare Dokumente durch Verwendung von em oder %             qÉãéä~íÉë=eqji=J=qóéçëÅêáéí=J=mem=J=a~íÉåÄ~åâ            ...
Alternativtexte aus dem Medienmanagemensystem DAM             ^äíÉêå~íáîíÉñíÉ=â∏ååÉå=áã=a^j=îçêÖÉÖÉÄÉå=             ïÉêÇÉå...
Formulare            qvmlP=ÄáÉíÉí=Éáå=fåÜ~äíëÉäÉãÉåí=òìê=bêëíÉääìåÖ=            ÉáåÑ~ÅÜÉê=cçêãìä~ê=Es~äáÇáÉêìåÖ=ìåÇ=      ...
#### Typo3 Standard Mailformtt_content.mailform.20 {      accessibility = 1      noWrapAttr=1      formName = mailform    ...
Was man nicht (mehr) braucht...              ^ÅÅÉëëâÉóë=ëáåÇ=ãÉáëí=åìíòäçëI=Ç~=~ääÉ=              q~ëí~íìêâΩêòÉä=ÄÉäÉÖí=ëá...
Was man nicht (mehr) braucht... Teil II               a~ë=qáíäÉJ^ííêáÄìí=áëí=òï~ê=çÑí=ëáååîçääI=~ÄÉê=ïç=               Éáå...
qvmlP=J=Ä~êêáÉêÉÑêÉá>=Die TOP 5 der Fallen
Platz 5: „Tag-Suppe“ durch den grafischen Editor            aÉê=Öê~ÑáëÅÜÉ=bÇáíçê=îçå=qvmlP=Eeqji~êÉ~F=ÄáÉíÉí=            î...
Platz 5: „Tag-Suppe“ durch den grafischen Editor              hçåÑáÖìê~íáçå=ÇÉë=oqb=áå=ÇÉê=bñíÉåëáçå=çÇÉê=              áå...
Platz 4: Menüs mit Javascript / grafische Menüs              aóå~ãáëÅÜÉ=jÉåΩë=ãáí=g~î~ëÅêáéí=â∏ååÉå=              Ä~êêáÉêÉ...
Platz 4: Menüs mit Javascript / grafische Menüs              jÉåΩë=E~ìÅÜ=Öê~ÑáëÅÜ=~åëéêÉÅÜÉåÇÉF=â∏ååÉå=ãáí=              q...
Platz 3: Unkritische Verwendung von Extensions              sáÉäÉ=bñíÉåëáçåë=äáÉÑÉêå=îçå=e~ìëÉ=~ìë=âÉáåÉå=              Ä~...
Platz 2: Indexsuche mit Javascript-Navigation              aáÉ=fåÇÉñëìÅÜÉ=Eindexed_searchF=ÄáÉíÉí=              ã®ÅÜíáÖÉ=p...
Platz 2: Indexsuche mit Javascript-Navigation
Platz 2: Indexsuche (jetzt nicht mehr) mit Javascript-Navigation              báåÄáåÇìåÖ=ÇÉê=bñíÉåëáçå=              acces...
Platz 1: Versteckter Focus               pí~åÇ~êÇáåëí~ää~íáçå=äáÉÑÉêí=g~î~ëÅêáéíI=Ç~ëë=ÇÉå=               cçÅìë=EÖÉëíêáÅÜÉ...
Platz 1: Versteckter Focus              båíÑÉêåÉå=ÇÉë=łcçâìë=ÉåíÑÉêåÉå“Jg~î~ëÅêáéíëW=              fã=e~ìéííÉãéä~íÉ       ...
qvmlP=J=Ä~êêáÉêÉÑêÉá>=Hilfen für Redakteure
Hilfen für Redakteure              sçêÖ~ÄÉå=òìê=sÉêïÉåÇìåÖ=îçå=§ÄÉêëÅÜêáÑíÉå              ^ìëÄäÉåÇÉå=åáÅÜí=ÄÉå∏íáÖíÉê=bäÉã...
Vorgaben zur Verwendung von Überschriften             YÜN[I=YÜO[=ïÉêÇÉå=áã=qÉãéä~íÉ=ÖÉëÉíòí             YÜP[=~äë=pí~åÇ~êÇΩ...
Vorgaben zur Verwendung von Überschriften II              cΩê=Ç~ë=fåÜ~äíëÉäÉãÉåí=§ÄÉêëÅÜêáÑí=â~åå=<h2>=              ïáÉÇÉ...
...   20 = COA   20 {      10 < tt_content      stdWrap.if {        value.field = CType        equals = header        nega...
Ausblenden nicht benötigter Elemente              a~ë=qvmlPJ_~ÅâÉåÇ=â~åå=à~=ã~åÅÜã~ä=Ö~åò=              ëÅÜ∏å=îçää=ïÉêÇÉåKKK
Ausblenden nicht benötigter Elemente (Redakteurs-Sicht)
RTE konfigurieren: nochmal zur Abschreckung...
Konfiguration des grafischen Editors                                          m~ÖÉqp   rëÉêqp            # RTE-Buttons: # ...
Konfiguration des grafischen Editors II                                           m~ÖÉqp   rëÉêqp                 ...     ...
Konfiguration des grafischen Editors III                                           m~ÖÉqp   rëÉêqp            RTE.default ...
Auszeichnung von Abkürzungen und Sprachwechseln             bñíÉåëáçåë=Éêä~ìÄÉå=Ç~ë=báåÑΩÖÉå=îçå=             ^ÄâΩêòìåÖÉå=...
qvmlP=J=Ä~êêáÉêÉÑêÉá>=Nützliche Extensions
tt_news              qvmlPJkÉïëëóëíÉãindexed_search/      fåÇÉñëìÅÜÉaccessible_is_browse_resultsmailformplus         cçêãì...
cron_accessiblemenus          jÉåΩçéíáçåÉåaccessible_form_validation    s~äáÇáÉêìåÖ=çÜåÉ=                              g~î...
qvmlP=J=Ä~êêáÉêÉÑêÉá>=Barrierefreiheit im Backend
Barrierefreiheit im Backend              t~êìã                  oÉÇ~âíÉìêÉ=ãáí=_ÉÜáåÇÉêìåÖÉå              t~ë=ÑÉÜäí       ...
Fehler im „normalen“ Backend beseitigen              kìê=áå=^åë®íòÉå=ã∏ÖäáÅÜ              cê~ãÉëíêìâíìê=êÉÇìòáÉêÉå        ...
Backend neu bauen             wìÖêáÑÑ=~ìÑ=qvmlPJq~ÄÉääÉå=ìåÇ=cìåâíáçåÉå=ÇÉë=             _~ÅâÉåÇë=ΩÄÉê=Ç~ë=cêçåíÉåÇ       ...
Die Website des DBSV              _~êêáÉêÉÑêÉáÜÉáí=áã=cêçåíÉåÇ              _~êêáÉêÉÑêÉáÉ=báåÖ~ÄÉã∏ÖäáÅÜâÉáí=ÑΩê=ÄäáåÇÉ=ìå...
§ÄÉêëÅÜêáÑíÉå# Header 1 ### Header 2 ######## Header 6     ######råëçêíáÉêíÉ=iáëíÉ * Listenpunkt 1 * Listenpunkt 2pçêíáÉêí...
Barrierefreies Backend ist eigentlich ein Frontendplugin
Frontend-User mit Backendrechten
Kai Laborenz               dÉëÅÜ®ÑíëÑΩÜêÉê=ÇÉê=pìåÄÉ~ã=dãÄe               _ÉêäáåÉê=^ÖÉåíìê=ÑΩê=hçããìåáâ~íáçå              ...
ä~ÄçêÉåò]ëìåÄÉ~ãJÄÉêäáåKÇÉ====ïïïKëìåÄÉ~ãJÄÉêäáåKÇÉLããíMU
TYPO3 - barrierefrei!
TYPO3 - barrierefrei!
TYPO3 - barrierefrei!
TYPO3 - barrierefrei!
TYPO3 - barrierefrei!
TYPO3 - barrierefrei!
TYPO3 - barrierefrei!
TYPO3 - barrierefrei!
TYPO3 - barrierefrei!
Upcoming SlideShare
Loading in...5
×

TYPO3 - barrierefrei!

1,065

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,065
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "TYPO3 - barrierefrei!"

  1. 1. pí~åÇ~êÇâçåÑçêãÉ=ìåÇ=Ä~êêáÉêÉÑêÉáÉ=tÉÄëáíÉë=ãáí=qvmlPTYPO3 - barrierefrei!h~á=i~ÄçêÉåòI=pìåÄÉ~ã=dãÄe
  2. 2. „...körperlich und physisch topfitt!“ <cite>Thomas Häßler</cite>
  3. 3. Worum geht es heute? qvmlP _~êêáÉêÉÑêÉáÜÉáí dêìåÇäÉÖÉåÇÉ=j∏ÖäáÅÜâÉáíÉå qçé=R=ÇÉê=cÉÜäÉê=ìåÇ=c~ääÉå kΩíòäáÅÜÉ=bñíÉåëáçåë eáäÑÉå=ÑΩê=oÉÇ~âíÉìêÉ a~ë=_~êêáÉêÉÑêÉáÜÉáí=~ìÅÜ=áã=_~ÅâÉåÇ
  4. 4. Möglichkeiten und Probleme dìíÉ=^åë®íòÉ mêçÄäÉãÉKKK
  5. 5. qvmlP=J=Ä~êêáÉêÉÑêÉá>=Grundlagen TYPO3 / Barrierefreiheit
  6. 6. 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~óçìíâçãéçåÉåíÉå
  7. 7. Barrierefreiheit - Grundlagen k~ÅÜ=ÇÉê=âçããÉåÇÉå=t`^d=O=ãΩëëÉå=ÇáÉ=fåÜ~äíÉ== ÉáåÉê=Ä~êêáÉêÉÑêÉáÉå=tÉÄëáíÉ= =ï~ÜêåÉÜãÄ~êI =ÄÉÇáÉåÄ~êI =îÉêëí®åÇäáÅÜ=ìåÇ =êçÄìëí= ëÉáåK
  8. 8. Wahrnehmbar ^ääÉ=fåÜ~äíÉ=ìåÇ=_ÉÇáÉåã∏ÖäáÅÜâÉáíÉå=ãΩëëÉåKKK ÖÉëÉÜÉåI==ÖÉÜ∏êí=çÇÉê=Éêí~ëíÉí=ïÉêÇÉå=ìåÇ= áå=áÜêÉê=_ÉÇÉìíìåÖ=îÉêëí~åÇÉå=ïÉêÇÉåK
  9. 9. Bedienbar ^ääÉ=iáåâëI=_ìííçåë=ìåÇ=ëçåëíáÖÉ=~âíáîÉå=bäÉãÉåíÉ= ãΩëëÉå=ÄÉÇáÉåÄ~ê=ëÉáå=J=ìåÇ=òï~ê ãáí=ÇÉê=q~ëí~íìê=~ääÉáåI ãáí=ëÅÜäÉÅÜíÉê=^ìÖÉåJe~åÇJhççêÇáå~íáçå ~ìÑ=ÉáåÉã=ëÉÜê=âäÉáåÉå=_áäÇëÅÜáêãE~ìëëÅÜåáííF çÜåÉ=ìåÇ=ãáíE>F=g~î~ëÅêáéí= ^ìÅÜ=ÇáÉ=oÉ~âíáçå=ÇÉë=póëíÉãë= ãìëë=ÇáÉëÉå=^åÑçêÇÉêìåÖÉå=ÖÉåΩÖÉå
  10. 10. Verständlich fåÜ~äíÉ=ìåÇ=cìåâíáçåÉå=ãΩëëÉå=îÉêëí®åÇäáÅÜ=ëÉáå= KKK=~ìÅÜ=ÑΩê=jÉåëÅÜÉå=ãáí=ÉáåÖÉëÅÜê®åâíÉå= c®ÜáÖâÉáíÉåI=pÅÜêáÑíëéê~ÅÜÉ=òì=îÉêëíÉÜÉå EsÉêëí®åÇäáÅÜâÉáí=ëÅÜ~ÇÉí=ÖêìåÇë®íòäáÅÜ=åáÅÜíF
  11. 11. Robust fåÜ~äíÉ=ìåÇ=cìåâíáçåÉå=ãΩëëÉåKKK ~ìÑ=ã∏ÖäáÅÜëí=îáÉäÉå=_êçïëÉê=ìåÇ=ł~ëëáëíáîÉå= dÉê®íÉå“=EpÅêÉÉåêÉ~ÇÉêI=ÉíÅKF=ÑìåâíáçåáÉêÉå òìâìåÑíëâçãé~íáÄÉä=ëÉáå=Epí~åÇ~êÇë>F ł~Äï®êíëâçãé~íáÄÉä“=ÄòïK=ł~ìÑï®êíëîÉêÄÉëëÉêí“= ëÉáå=
  12. 12. 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ÇÉ
  13. 13. Barrierefreiheit mit TYPO3 - die Herausforderungen pÉã~åíáëÅÜÉê=ãçÇÉêåÉê=`çÇÉ _~êêáÉêÉÑêÉáÉ=jÉåΩë pâ~äáÉêÄ~êâÉáí=ÇÉë=qÉñíÉë _ÉÇáÉåÄ~êâÉáí=ãáí=ÇÉê=q~ëí~íìê ^äíÉêå~íáîíÉñíÉ=L=JáåÜ~äíÉ _~êêáÉêÉÑêÉáÉ=cçêãìä~êÉ bñíÉåëáçåë=E~ÄÉê=Ç~òì=ëé®íÉê=ãÉÜêF
  14. 14. Semantischer moderner Code s~äáÇÉë=ueqji=NKM= J=âÉáåÉ=mêçÄäÉãÉ=Eáã=`çêÉF eqji=QKMN=ëíêáÅí= J=ëÅÜïÉê=ã∏ÖäáÅÜ sÉêïÉåÇìåÖ=ÇÉê=bñíÉåëáçå=css styled content= Epí~åÇ~êÇF ÖÖÑK=sÉêïÉåÇìåÖ=îçå=qáÇó=~äë=qvmlPJjçÇìä # xHTML-Konfiguration # page.config.doctype = xhtml_trans page.config.xmlprologue = none page.config.htmlTag_langKey = de-DE page.config.xhtml_cleaning = all qvmlp`ofmq
  15. 15. Semantischer moderner Code qvmlp`ofmq # 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
  16. 16. Semantischer moderner Code qvmlp`ofmq # entfernen von class="bodytext" <p>-Tags # lib.parseFunc_RTE.nonTypoTagStdWrap.encapsL ines.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 =
  17. 17. Barrierefreie Menüs jÉåΩë=ëáåÇ=EìåÖÉçêÇåÉíÉI=îÉêëÅÜ~ÅÜíÉäíÉF=iáëíÉåK wìê=hÉååòÉáÅÜåìåÖ=ÇÉê=eáÉê~êÅÜáÉ=â~åå=ÉáåÉ= aÉÑáåáíáçåëåìããÉê=ÜÉäÑÉå=J[=ÉáåÑ~ÅÜJÑìÉêJ ~ääÉKÇÉL~êíáâÉäLãÉåìÉëL få=qóéçpÅêáéí=ïÉêÇÉå=ëçäÅÜÉ=jÉåΩë=ΩÄÉê=ÇáÉ= lÄàÉâíÉ=ejbkr=ìåÇ=qjbkr=êÉ~äáëáÉêí
  18. 18. Barrierefreie Menüs - die Umsetzung qvmlp`ofmq mainnavi = HMENU mainnavi { wrap = <hx>Hauptnavigation</hx>| 1 = TMENU 1 { noBlur = 1 wrap = <ul>|</ul> NO = 1 NO.allWrap = <li>|</li> NO.ATagTitle.field = subtitle ...
  19. 19. Barrierefreie Menüs - die Umsetzung qvmlp`ofmq ... # ACT: Seite in der aktuellen Sektion # ACT = 1 ACT.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 }
  20. 20. Der Rest geht mit CSS... łpäáÇáåÖ=aççêë“=ëçêÖÉå=ÑΩê=ëâ~äáÉêÄ~êÉ=jÉåΩë eáåíÉêÖêìåÇÖê~ÑáâÉå=ÑΩê=Yäá[=ìåÇ=Y~[
  21. 21. Skalierbarkeit? Fehlanzeige! §ÄÉêä~ÖÉêìåÖÉå= ~ìÑÖêìåÇ= ÑáñÉê=_êÉáíÉå= ÇìêÅÜ=dê~ÑáâÉå
  22. 22. Flexibel ist besser...
  23. 23. Sinnvolle Dokumentstruktur pÉã~åíáâ=áå=ÇÉå=§ÄÉêëÅÜêáÑíÉå=YÜN[=J=YÜñ[ açâìãÉåíëíêìâíìê=ÇìêÅÜ=§ÄÉêëÅÜêáÑíÉå=ÑÉëíäÉÖÉå pÉáíÉåâçéÑ k~îáÖ~íáçå fåÜ~äí KKK sÉêïÉåÇìåÖ=åáÅÜí=ÖÉÉáÖåÉíÉê=§ÄÉêëÅÜêáÑíÉå=ÇìêÅÜ= oÉÇ~âíÉìêÉ=îÉêÜáåÇÉêå=EÇ~òì=ëé®íÉê=ãÉÜêF
  24. 24. 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çããÉåí~êÉ=äÉëÉåF J[=ÉáåÑ~ÅÜJÑìÉêJ~ääÉKÇÉL=ÄäçÖÉáåíê~ÉÖÉKéÜé áÇZaUNO|M|N|M|`
  25. 25. Sinnvolle Dokumentstruktur - die Umsetzung qvmlp`ofmq # Überschrift aus Seitentitel setzen # content = COA content { 10 = TEXT 10.data = page:title 10.wrap = <h2>|</h2> 20 < styles.content.get } # Auf Startseite Seitentitel nicht im TITLE ausgegeben # config.noPageTitle = 1
  26. 26. 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
  27. 27. Alternativtexte aus dem Medienmanagemensystem DAM ^äíÉêå~íáîíÉñíÉ=â∏ååÉå=áã=a^j=îçêÖÉÖÉÄÉå= ïÉêÇÉå §ÄÉêå~ÜãÉ=áå=Ç~ë=oÉÇ~âíÉìêÄ~ÅâÉåÇ=ÖÉëÅÜáÉÜí= ~ìíçã~íáëÅÜ=çÇÉê=~ìÑ=tìåëÅÜ
  28. 28. Formulare qvmlP=ÄáÉíÉí=Éáå=fåÜ~äíëÉäÉãÉåí=òìê=bêëíÉääìåÖ= ÉáåÑ~ÅÜÉê=cçêãìä~ê=Es~äáÇáÉêìåÖ=ìåÇ= cÉÜäÉêãÉäÇìåÖÉå=éÉê=g~î~ëÅêáéíF bñíÉåëáçå=accessible_form_validation _ÉëëÉê=ÖÉÉáÖåÉí=áëí=mailform_plusI=Ç~ë=Éáå= eqjiJqÉãéä~íÉ=ÑΩê=ÇÉå=cçêãìä~êÅçÇÉ=ìåÇ= ëÉêîÉêëÉáíáÖÉ=s~äáÇáÉêìåÖ=EáåâäK=báåÖêáÑÑëéìåâíÉ= ÑΩê=ÉáÖÉåÉ=oçìíáåÉåF=ÄáÉíÉí=
  29. 29. #### Typo3 Standard Mailformtt_content.mailform.20 { accessibility = 1 noWrapAttr=1 formName = mailform dontMd5FieldNames = 1 REQ = 1 layout = <div>###LABEL### ###FIELD###</div> RADIO.layout = ... labelWrap.wrap = | radioWrap.wrap = | REQ.labelWrap.wrap = | stdWrap.wrap = <fieldset> | </fieldset> params.radio = .. params.submit = class=“submit"}
  30. 30. 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
  31. 31. Was man nicht (mehr) braucht... Teil II a~ë=qáíäÉJ^ííêáÄìí=áëí=òï~ê=çÑí=ëáååîçääI=~ÄÉê=ïç= Éáå=iáåâíÉñí=ÄÉêÉáíë=~ìëë~ÖÉâê®ÑíáÖ=áëíI=ëçääíÉ=Éë= ïÉÖÑ~ääÉåK=tÉåáÖ=ëáååîçää=áëí=ÉëI=áå=dê~ÑáâÉå=~äí= ìåÇ=íáíäÉ=òì=ÇìéäáòáÉêÉåK= qáíäÉ=áëí=~ÄÉê=~ìÅÜ=âÉáåÉ=båíëÅÜìäÇáÖìåÖ=ÑΩê= ëáååÑêÉáÉ=iáåâíÉñíÉ=EłâäáÅâÉå=ëáÉ=ÜáÉê“F mìåâíÉ=~ã=båÇÉ=ÇÉê=jÉåΩäáåâë=áå=iáëíÉå= E§ÄÉêÄäÉáÄëÉä=~ìë=_fqsF
  32. 32. qvmlP=J=Ä~êêáÉêÉÑêÉá>=Die TOP 5 der Fallen
  33. 33. Platz 5: „Tag-Suppe“ durch den grafischen Editor aÉê=Öê~ÑáëÅÜÉ=bÇáíçê=îçå=qvmlP=Eeqji~êÉ~F=ÄáÉíÉí= îáÉäÉ=j∏ÖäáÅÜâÉáíÉåKKK
  34. 34. Platz 5: „Tag-Suppe“ durch den grafischen Editor hçåÑáÖìê~íáçå=ÇÉë=oqb=áå=ÇÉê=bñíÉåëáçå=çÇÉê= áåÇáîáÇìÉää q~ÄÉääÉå=áã=bÇáíçê=~ÄëÅÜ~äíÉå=J=Ç~òì=ÖáÄí=Éë=Ç~ë= bäÉãÉåí=q~ÄÉääÉ> póãÄçäÉ=ìåÇ=qáíäÉJqÉñíÉ=ÑΩê=iáåâë
  35. 35. 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ÉåΩë=òì=ÉêòÉìÖÉå
  36. 36. Platz 4: Menüs mit Javascript / grafische Menüs jÉåΩë=E~ìÅÜ=Öê~ÑáëÅÜ=~åëéêÉÅÜÉåÇÉF=â∏ååÉå=ãáí= qÉñí=ìåÇ=`pp=ÉêòÉìÖí=ïÉêÇÉå=J=ÉáåÉ=ëáãéäÉ=iáëíÉ= áëí=ÖÉåìÖ a~ë=ÄÉå∏íáÖíÉ=qóéçëÅêáéíJlÄàÉâí=áëí=TMENU aìêÅÜ=ÇáÉ=sÉêïÉåÇìåÖ=îçå=êÉáåÉå=iáëíÉå= îÉêÄÉëëÉêí=ëáÅÜ=~ìÅÜ=ÇáÉ=táÉÇÉêîÉêïÉåÇÄ~êâÉáí= ÇÉë=`çÇÉë
  37. 37. Platz 3: Unkritische Verwendung von Extensions sáÉäÉ=bñíÉåëáçåë=äáÉÑÉêå=îçå=e~ìëÉ=~ìë=âÉáåÉå= Ä~êêáÉêÉÑêÉáÉå=eqjiJ`çÇÉ=ãáí = ÉåíïÉÇÉê=áå=cçêã=îçå=eqji=áã=memJ`çÇÉ=çÇÉê=~äë= qÉãéä~íÉë=EÇ~ë=áëí=ëÅÜçå=ÄÉëëÉêF hêáíÉêáÉå=òìê=nì~äáí®í=îçå=bñíÉåëáçåëW pí~íìë=L=sÉêëáçåëåìããÉê ^åò~Üä=ÇÉê=açïåäç~Çë _ÉïÉêíìåÖÉå=LpÉÅìêáíó=oÉîáÉïë a~íìã=ÇÉê=äÉíòíÉå=^âíì~äáëáÉêìåÖ
  38. 38. Platz 2: Indexsuche mit Javascript-Navigation aáÉ=fåÇÉñëìÅÜÉ=Eindexed_searchF=ÄáÉíÉí= ã®ÅÜíáÖÉ=pìÅÜã∏ÖäáÅÜâÉáíÉå=E~ìÅÜ=áå=a~íÉáÉå= ìåÇ=ÉñíÉêåÉå=tÉÄëáíÉëF eqji=ΩÄÉê=qÉãéä~íÉ=ìåÇ=qóéçëÅêáéí=ëíÉìÉêÄ~ê k~îáÖ~íáçå=òïáëÅÜÉå=pÉáíÉå=ãáí=pìÅÜÉêÖÉÄåáëëÉå= ÉêÑçäÖí=ΩÄÉê=g~î~ëÅêáéí
  39. 39. Platz 2: Indexsuche mit Javascript-Navigation
  40. 40. Platz 2: Indexsuche (jetzt nicht mehr) mit Javascript-Navigation báåÄáåÇìåÖ=ÇÉê=bñíÉåëáçå= accessible_is_browse_results ÉêëÉíòí=g~î~ëÅêáéíJk~îáÖ~íáçå=ÇìêÅÜ=åçêã~äÉ= iáåâë
  41. 41. 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ÉååòÉáÅÜåìåÖ
  42. 42. Platz 1: Versteckter Focus båíÑÉêåÉå=ÇÉë=łcçâìë=ÉåíÑÉêåÉå“Jg~î~ëÅêáéíëW= fã=e~ìéííÉãéä~íÉ qvmlp`ofmq page.config.removeDefaultJS = 1 ëÅÜ~äíÉí=Ç~ë=g~î~ëÅêáéí=áã=pÉáíÉåâçéÑ=~ìë ìåÇ=áå=ÇÉå=aÉÑáåáíáçåÉå=ÑΩê=qjbkrW noblur = 1 ÉåíÑÉêåí=ÇáÉ=^ìÑêìÑÉ
  43. 43. qvmlP=J=Ä~êêáÉêÉÑêÉá>=Hilfen für Redakteure
  44. 44. Hilfen für Redakteure sçêÖ~ÄÉå=òìê=sÉêïÉåÇìåÖ=îçå=§ÄÉêëÅÜêáÑíÉå ^ìëÄäÉåÇÉå=åáÅÜí=ÄÉå∏íáÖíÉê=bäÉãÉåíÉ hçåÑáÖìê~íáçå=ÇÉë=bÇáíçêë=oqb ^ìëòÉáÅÜåìåÖ=îçå=^ÄâΩêòìåÖÉå=ìåÇ= péê~ÅÜïÉÅÜëÉäå E_~êêáÉêÉÑêÉáÜÉáíëJF`ÜÉÅâ=áã=_~ÅâÉåÇ
  45. 45. Vorgaben zur Verwendung von Überschriften YÜN[I=YÜO[=ïÉêÇÉå=áã=qÉãéä~íÉ=ÖÉëÉíòí YÜP[=~äë=pí~åÇ~êÇΩÄÉêëÅÜêáÑí=ÑΩê=fåÜ~äíëÉäÉãÉåíÉ= qvmlp`ofmq=`lkpq^kqp content.defaultHeaderType = 3 fã=oqb=ïÉêÇÉå=YÜN[=J=YÜP[=~ìëÖÉÄäÉåÇÉíW m~ÖÉqp=rëÉêqp RTE.default { proc { hidePStyleItems = H1,H2,H3 } }
  46. 46. Vorgaben zur Verwendung von Überschriften II cΩê=Ç~ë=fåÜ~äíëÉäÉãÉåí=§ÄÉêëÅÜêáÑí=â~åå=<h2>= ïáÉÇÉê=~âíáîáÉêí=ïÉêÇÉåW qvmlp`ofmq headlines = COA headlines { 10 = TEXT 10 { field = header wrap = <h2>|</h2> if { value.field = CType equals = header } } ...
  47. 47. ... 20 = COA 20 { 10 < tt_content stdWrap.if { value.field = CType equals = header negate = 1 } }}page.20 = COApage.20 { 10 < styles.content.get 10 { renderObj < temp.headlines }} «=p~ëÅÜ~=sçêÄÉÅâ
  48. 48. Ausblenden nicht benötigter Elemente a~ë=qvmlPJ_~ÅâÉåÇ=â~åå=à~=ã~åÅÜã~ä=Ö~åò= ëÅÜ∏å=îçää=ïÉêÇÉåKKK
  49. 49. Ausblenden nicht benötigter Elemente (Redakteurs-Sicht)
  50. 50. RTE konfigurieren: nochmal zur Abschreckung...
  51. 51. Konfiguration des grafischen Editors m~ÖÉqp rëÉêqp # RTE-Buttons: # RTE.default.showButtons = formatblock, bold, italic, subscript, superscript, orderedlist, unorderedlist, insertcharacter, link, acronym, chMode RTE.classesAnchor { externalLink { class = extlink type = url titleText = ... } externalLinkInNewWindow { ... } ...
  52. 52. Konfiguration des grafischen Editors II m~ÖÉqp rëÉêqp ... internalLink { class > type = page titleText > } internalLinkInNewWindow {... } download { type = file } mail { type = mail } }
  53. 53. Konfiguration des grafischen Editors III m~ÖÉqp rëÉêqp RTE.default { proc.dontConvBRtoParagraph = 1 proc.allowedClasses ( ... ) hidePStyleItems = H1, H2, H3, PRE contentCSS = rte.css # Zusatzklassen für P einbauen classesParagraph := addToList(wichtig) # Klassen bei Transformation erlauben proc.allowedClasses := addToList(wichtig) } RTE.classes.wichtig { name = wichtig value = ... ; }
  54. 54. Auszeichnung von Abkürzungen und Sprachwechseln bñíÉåëáçåë=Éêä~ìÄÉå=Ç~ë=báåÑΩÖÉå=îçå= ^ÄâΩêòìåÖÉå=áã=_~ÅâÉåÇI=ÇáÉ=~ìíçã~íáëÅÜ=áã= cêçåíÉåÇ=ÉêëÉíòí=ïÉêÇÉå _Éá=_ÉÇ~êÑ=ïáêÇ=~ìíçã~íáëÅÜ=Éáå=däçëë~ê=ÉêòÉìÖí få=wïÉáÑÉäëÑ®ääÉå=ãΩëëÉå=^ìëòÉáÅÜåìåÖÉå=éÉê= e~åÇ=~ìëÖÉÑΩÜêí=ïÉêÇÉå sb_akronymmanager a21_glossary
  55. 55. qvmlP=J=Ä~êêáÉêÉÑêÉá>=Nützliche Extensions
  56. 56. tt_news qvmlPJkÉïëëóëíÉãindexed_search/ fåÇÉñëìÅÜÉaccessible_is_browse_resultsmailformplus cçêãìä~êÉcss_filelinks a~íÉáäáëíÉåsb_acronymmanager, ^ìëòÉáÅÜåìåÖÉåa21_glossarysf_validator s~äáÇáÉêìåÖ
  57. 57. cron_accessiblemenus jÉåΩçéíáçåÉåaccessible_form_validation s~äáÇáÉêìåÖ=çÜåÉ= g~î~ëÅêáéífb_accessiblecontent- aáîÉêëÉattributes báåëíÉääìåÖÉåaw_antispambots `^mq`e^>gov_accessibility hçãéäÉííÄÉáëéáÉä EÉíï~ë=®äíÉêFAbcsstidy qáÇóoblady_accessibility_report
  58. 58. qvmlP=J=Ä~êêáÉêÉÑêÉá>=Barrierefreiheit im Backend
  59. 59. Barrierefreiheit im Backend t~êìã oÉÇ~âíÉìêÉ=ãáí=_ÉÜáåÇÉêìåÖÉå t~ë=ÑÉÜäí pÉã~åíáëÅÜÉë=eqji sÉêòáÅÜí=~ìÑ=cê~ãÉë ^ìëêÉáÅÜÉåÇÉ=hçåíê~ëíÉ §ÄÉêëÅÜ~ìÄ~êâÉáí táÉ=ÖÉÜíÛë cÉÜäÉê=ÇÉë=îçêÜ~åÇÉåÉå=_~ÅâÉåÇ=~ìëê®ìãÉå kÉìÉë=_~ÅâÉåÇ=Ä~ìÉå
  60. 60. Fehler im „normalen“ Backend beseitigen kìê=áå=^åë®íòÉå=ã∏ÖäáÅÜ cê~ãÉëíêìâíìê=êÉÇìòáÉêÉå hçåíê~ëí=ÉêÜ∏ÜÉå káÅÜí=ÄÉå∏íáÖíÉ=bäÉãÉåíÉ=~ìëÄäÉåÇÉå eqji oÉëíÑê~ãÉë oÉëíJhçãéäÉñáí®í=
  61. 61. Backend neu bauen wìÖêáÑÑ=~ìÑ=qvmlPJq~ÄÉääÉå=ìåÇ=cìåâíáçåÉå=ÇÉë= _~ÅâÉåÇë=ΩÄÉê=Ç~ë=cêçåíÉåÇ hçãé~íáÄáäáí®í=îçå=łåçêã~äÉã“=ìåÇ= Ä~êêáÉêÉÑêÉáÉã=_~ÅâÉåÇ sçêíÉáäW=ÑêÉáÉ=dÉëí~äíÄ~êâÉáí=ÇÉë=fåíÉêÑ~ÅÉë=Eléíáâ= ìåÇ=eqjiF k~ÅÜíÉáäW=~ääÉ=cìåâíáçåÉå=ãΩëëÉå=Éñéäáòáí= ÉåíïáÅâÉäí=ïÉêÇÉå
  62. 62. Die Website des DBSV _~êêáÉêÉÑêÉáÜÉáí=áã=cêçåíÉåÇ _~êêáÉêÉÑêÉáÉ=báåÖ~ÄÉã∏ÖäáÅÜâÉáí=ÑΩê=ÄäáåÇÉ=ìåÇ= ëÉÜÄÉÜáåÇÉêíÉ=oÉÇ~âíÉìêÉ=ÑΩê eqjiI=qÉñíI=qÉñí=ãáí=_áäÇ kÉïë ^åäÉÖÉå=îçå=cbJkìíòÉêå eçÅÜä~ÇÉå=îçå=_áäÇÉêå=
  63. 63. §ÄÉêëÅÜêáÑíÉå# Header 1 ### Header 2 ######## Header 6 ######råëçêíáÉêíÉ=iáëíÉ * Listenpunkt 1 * Listenpunkt 2pçêíáÉêíÉ=iáëíÉ + Listenpunkt 1 + Listenpunkt 2tçêíÑçêã~íáÉêìåÖÉåDieser Satz **enthält fette Worte**.Dieser Satz *enthält kursive Worte*.iáåâë[linktext](linkadresse "link title")
  64. 64. Barrierefreies Backend ist eigentlich ein Frontendplugin
  65. 65. Frontend-User mit Backendrechten
  66. 66. Kai Laborenz dÉëÅÜ®ÑíëÑΩÜêÉê=ÇÉê=pìåÄÉ~ã=dãÄe _ÉêäáåÉê=^ÖÉåíìê=ÑΩê=hçããìåáâ~íáçå E_~êêáÉêÉÑêÉáÉF=tÉÄÉåíïáÅâäìåÖ aÉëáÖåI=ãçÇÉêåÉë=eqji=C=`ppI=pçÑíï~êÉÉåíïáÅâäìåÖ péÉòá~äáí®íW=qvmlP=E`çåíÉåíJj~å~ÖÉãÉåíëóëíÉãF ^ìëëÉêÇÉã=âä~ëëáëÅÜÉ=mo=ìåÇ=hçããìåáâ~íáçëÇÉëáÖå
  67. 67. ä~ÄçêÉåò]ëìåÄÉ~ãJÄÉêäáåKÇÉ====ïïïKëìåÄÉ~ãJÄÉêäáåKÇÉLããíMU
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×