<ul><li>Die Flexibilität des Internet im Spiegel des Frontend </li></ul>Webseiten sind keine Gemälde Jens Grochtdreis – We...
Jens Grochtdreis <ul><li>Frontendentwickler  </li></ul><ul><li>10 Jahre Agenturerfahrung </li></ul><ul><li>Gründer der Web...
http://failblog.files.wordpress.com/2009/10/epic-fail-quality-hotel-fail.jpg
http://failblog.files.wordpress.com/2009/09/epic-fail-power-line-fail.jpg
Das sollten wir nicht vergessen! <ul><li>Das Internet ist ein neues Medium! </li></ul><ul><ul><li>junges Medium </li></ul>...
Das sollten wir nicht vergessen! <ul><li>Das Internet bietet viele unterschiedliche Zugänge zu Informationen </li></ul><ul...
Kontrollverlust - formal <ul><li>Wie können wir heute ins Internet gehen? </li></ul><ul><ul><li>PC, Notebook </li></ul></u...
Unsicherheiten <ul><li>Betriebssysteme </li></ul><ul><li>Browser </li></ul><ul><li>Browserversionen </li></ul><ul><li>Indi...
Flexibilität ist Stärke <ul><li>Die Flexibilität des Internet ist seine Stärke. </li></ul><ul><li>Akzeptiert es! Macht Euc...
Flexibilität ist wichtig <ul><li>Wir können nicht mehr sicher vorhersagen, wie jemand unsere Seite sieht/liest. </li></ul>...
Screenshot von einem EeePC, 800x480px
Wir stehen am Anfang <ul><li>Wir stehen noch immer am Anfang. </li></ul><ul><li>HTML in der jetzigen Form genügt nicht! </...
Problemfeld: Browser <ul><li>Der IE in allen Versionen kann einfach weniger als alle anderen Browser </li></ul><ul><li>Der...
http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/
http://snurl.com/t58bi
„Schweizer Messer“ für den IE6 <ul><li>position: relative </li></ul><ul><li>zoom: 1 </li></ul><ul><li>height: 1% </li></ul...
http://snurl.com/t58ch
Problemfeld: Entwickler <ul><li>Die Opera-MAMA-Studie hat erschreckende Codedefizite zu Tage gefördert: </li></ul><ul><ul>...
Das Internet ist komplex <ul><li>Wir nutzen sehr viele verschiedene Standards und Technologien, um eine Website zu betreib...
Kommunikation ist alles! <ul><li>Unterschiedliche Erwartungen und Wissensstände führen immer wieder zu Kommunikationsprobl...
Der Projektalltag
Der Projektalltag
Der Projektalltag
Der Projektalltag http://www.projectcartoon.com/cartoon/27
Agenturalltag http://vikiworks.com/2007/08/27/flat-panel-monitor-icon/
Selber denken macht schlau!
Der Frontendentwickler ist ein Übersetzer!
Frontendentwickler als Übersetzer <ul><li>Das Frontend ist das Einzige, das der Nutzer sieht. </li></ul><ul><li>Ein CMS od...
Informationen sammeln http://snurl.com/t58dc
http://dev.opera.com/articles/wsc/
http://webkrauts.de
http://jendryschik.de/wsdev/einfuehrung/
http://little-boxes.de/little-boxes-teil1-online.html
http://ajaxian.com/
http://developer.yahoo.com/yui/
http://developer.yahoo.com/yui/theater/
http://yuiblog.com/
http://developer.yahoo.com/ypatterns/
http://icant.co.uk/
http://www.webkrauts.de/krautcosmos/
http://www.einfach-fuer-alle.de/
http://planet.jquery.com/
http://net.tutsplus.com/
http://www.smashingmagazine.com/
http://sixrevisions.com/
Gute Bücher
Beliebte Problemfälle
Gleich hohe Boxen
Gleich hohe Boxen http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html
Gleich hohe Boxen http://www.positioniseverything.net/articles/onetruelayout/equalheight moderne Browser IE6 und 7
Reiter
Reiter  http://github.com/ginader/Accessible-Tabs
Runde Ecken
Runde Ecken http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
Runde Ecken - The ThrashBox http://www.vertexwerks.com/tests/sidebox/
Runde Ecken für moderne Browser
Runde Ecken für moderne Browser
Infoseite zu CSS3 http://www.css3.info /
Massenweise Requests
Massenweise Requests - CSS-Sprites http://www.alistapart.com/articles/sprites/
Massenweise Requests - CSS-Sprites
Performance http://developer.yahoo.com/performance/rules.html
Performance
Performance http://www.stevesouders.com /
http://snurl.com/t58fj
Semantik <ul><li>Mit der Bedeutung der Inhalte beschäftigen </li></ul><ul><li>Die Struktur erfassen und aufschreiben </li>...
Semantik <ul><li>Webseiten sind heute mehr als nur Dokumente.  </li></ul><ul><ul><li>Die Dokumentenanalogie ist alt </li><...
Überschriften <ul><li>Webseiten sind immer seltener Dokumente </li></ul><ul><li>Kann ein Dokument mehrere h1 vertragen? </...
Überschriften <ul><li>Überschriften sind eine Navigationsmöglichkeit für Screenreader. </li></ul><ul><li>Wikis generieren ...
Kenne Dein (X)HTML <ul><li>Wie sehen ungeordnete Listen aus? </li></ul><ul><li>Wie sehen geordnete Listen aus? </li></ul><...
Simples Browser-Reset
Safari4 (Mac) Firefox 3.5 (Mac)
Safari4 (Mac) Firefox 3.5 (Mac)
Eingebaute und individuelle Stylesheets <ul><li>HTML sieht nicht aus, sondern transportiert Bedeutung! </li></ul><ul><li>A...
Reset-Stylesheet von Yahoo!
Reset-CSS von Eric Meyer
Keine Tabellen? Doch! <ul><li>Tabellen sind für tabellarische Daten da!  Für Layoutzwecke gibt es CSS! </li></ul><ul><li>A...
http://www.flickr.com/photos/webseeings/239301576
http://burgenlandfeuerwehr.de /
Barrierefreiheit laut Gesetz <ul><li>„Barrierefrei sind [..,] technische Gebrauchsgegenstände, Systeme der Informationsver...
Für wen? <ul><li>Körperbehinderung </li></ul><ul><ul><li>Motorische Behinderungen </li></ul></ul><ul><ul><li>Contergan </l...
Für wen?
Zielgruppen
http://snurl.com/t58c8
Kampfbegriff? <ul><li>Der Begriff „Barrierefreiheit“ beinhaltet ein sehr weitgehendes Versprechen. </li></ul><ul><li>Im En...
http://snurl.com/t58gj
Was Barrierefreiheit NICHT ist
Barrierefreie Seiten müssen nicht hässlich sein!
http://www.ble.de/
http://www.hauptbahnhof-wien.at/
http://www.darmkrebs.at/
4 Grundprinzipien der WCAG2.0 <ul><li>POUR </li></ul><ul><ul><li>Inhalte müssen wahrnehmbar sein (Perceivable) </li></ul><...
Grundregeln <ul><li>Valides und semantisch korrektes (X)HTML und valides CSS </li></ul><ul><li>Inhalte müssen textlich tra...
Barrierefreiheit leben <ul><li>Barrierefreiheit ist weniger ein technisches Problem, als das einer vernünftigen Planung. Z...
Automatisierte Tests <ul><li>Eine fehlerfreies Abschneiden in einem automatisierten Test sagt aber nur, daß die Seite dies...
Am Ende Jens Grochtdreis http://blog.grochtdreis.de http://webkrauts.de Diese Präsentation steht unter der Creative Common...
Nächste SlideShare
Wird geladen in …5
×

Webseiten sind keine Gemälde

1.810 Aufrufe

Veröffentlicht am

Am 6. November durfte ich am Frankfurter SAE-Institut den Studenten etwas über die Praxis der Webentwicklung erzählen. Ich habe einen großen Bogen gespannt, von der grundsätzlichen Natur des Internet über Detailprobleme bis zur Barrierefreiheit. Der Vortrag dauerte dreieinhalb Stunden.

Veröffentlicht in: Technologie
0 Kommentare
4 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.810
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
343
Aktionen
Geteilt
0
Downloads
28
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Es gibt diverse Tests auf Barrierefreiheit einer Seite. Man ist dann „Bobby approved“ oder „Cynthia“ meint, die Seite sei barrierefrei. Eine fehlerfreies Abschneiden in einem automatisierten Test sagt aber nur, daß die Seite dieses Tool „übersteht“. Mehr nicht! Viele Aspekte der Barrierefreiheit kann man nicht automatisiert testen. Barrierefreiheit ist für Menschen da, deshalb sollten auch Menschen sie testen. Es gibt Barrierefreiheits-Initiativen, die sich auf das Testen von Webseiten spezialisiert haben.
  • Webseiten sind keine Gemälde

    1. 1. <ul><li>Die Flexibilität des Internet im Spiegel des Frontend </li></ul>Webseiten sind keine Gemälde Jens Grochtdreis – Webseiten sind keine Gemälde
    2. 2. Jens Grochtdreis <ul><li>Frontendentwickler </li></ul><ul><li>10 Jahre Agenturerfahrung </li></ul><ul><li>Gründer der Webkrauts </li></ul><ul><li>Blogger </li></ul><ul><li>Autor des PHPMagazins, Webstandards-Magazins, T3N </li></ul><ul><li>Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT </li></ul>
    3. 3. http://failblog.files.wordpress.com/2009/10/epic-fail-quality-hotel-fail.jpg
    4. 4. http://failblog.files.wordpress.com/2009/09/epic-fail-power-line-fail.jpg
    5. 5. Das sollten wir nicht vergessen! <ul><li>Das Internet ist ein neues Medium! </li></ul><ul><ul><li>junges Medium </li></ul></ul><ul><ul><li>rasante Entwicklung </li></ul></ul><ul><ul><li>spannend </li></ul></ul><ul><ul><li>atemberaubend </li></ul></ul><ul><ul><li>umwälzend </li></ul></ul><ul><ul><li>in ständigem Wandel begriffen </li></ul></ul>
    6. 6. Das sollten wir nicht vergessen! <ul><li>Das Internet bietet viele unterschiedliche Zugänge zu Informationen </li></ul><ul><ul><li>Am Monitor lesen </li></ul></ul><ul><ul><li>Ausdrucken </li></ul></ul><ul><ul><li>Vorlesen lassen </li></ul></ul><ul><li>Formate sind anpassbar </li></ul><ul><li>Inhalte lassen sich leicht rudimentär übersetzen </li></ul><ul><li>Wir wissen nichts Definitives über das Zielsystem </li></ul>
    7. 7. Kontrollverlust - formal <ul><li>Wie können wir heute ins Internet gehen? </li></ul><ul><ul><li>PC, Notebook </li></ul></ul><ul><ul><li>viele Betriebssysteme, Browser, Monitore </li></ul></ul><ul><ul><li>Handy, PDA </li></ul></ul><ul><ul><li>Spielkonsole </li></ul></ul><ul><ul><li>TV </li></ul></ul><ul><ul><li>Assistive Technologien </li></ul></ul>
    8. 8. Unsicherheiten <ul><li>Betriebssysteme </li></ul><ul><li>Browser </li></ul><ul><li>Browserversionen </li></ul><ul><li>Individuelle Einrichtungen des Browsers </li></ul><ul><li>Monitorauflösungen </li></ul><ul><li>Umgebungslicht </li></ul><ul><li>Mobiler Zugriff </li></ul><ul><li>Zugriffsgeschwindigkeit </li></ul><ul><li>Plugins </li></ul><ul><li>Javascript </li></ul>
    9. 9. Flexibilität ist Stärke <ul><li>Die Flexibilität des Internet ist seine Stärke. </li></ul><ul><li>Akzeptiert es! Macht Euch locker! </li></ul>Bild: http://snipurl.com/2c1yl
    10. 10. Flexibilität ist wichtig <ul><li>Wir können nicht mehr sicher vorhersagen, wie jemand unsere Seite sieht/liest. </li></ul><ul><li>Deshalb: einen für möglichst viele gangbaren Weg beschreiten </li></ul><ul><li>Erst der Inhalt, dann das Layout! </li></ul><ul><li>Der Inhalt ist das Wichtigste! </li></ul>
    11. 11. Screenshot von einem EeePC, 800x480px
    12. 12. Wir stehen am Anfang <ul><li>Wir stehen noch immer am Anfang. </li></ul><ul><li>HTML in der jetzigen Form genügt nicht! </li></ul><ul><li>Webseiten sind immer seltener Dokumente. </li></ul><ul><li>HTML5 ist ein wichtiger und erster Schritt. </li></ul>
    13. 13.
    14. 14.
    15. 15.
    16. 16.
    17. 17. Problemfeld: Browser <ul><li>Der IE in allen Versionen kann einfach weniger als alle anderen Browser </li></ul><ul><li>Der IE6 ist nicht tot zu kriegen </li></ul><ul><li>Fortschritt richtet sich nach dem Langsamsten (IE) wegen der Verbreitung </li></ul><ul><li>Nur Entwickler interessieren sich für Browser </li></ul>
    18. 18. http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
    19. 19. Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/
    20. 20. http://snurl.com/t58bi
    21. 21. „Schweizer Messer“ für den IE6 <ul><li>position: relative </li></ul><ul><li>zoom: 1 </li></ul><ul><li>height: 1% </li></ul><ul><li>bei Floats: display: inline </li></ul>
    22. 22. http://snurl.com/t58ch
    23. 23. Problemfeld: Entwickler <ul><li>Die Opera-MAMA-Studie hat erschreckende Codedefizite zu Tage gefördert: </li></ul><ul><ul><li>58,5% Webseiten ohne Überschriften-Elemente </li></ul></ul><ul><ul><li>7,9% mit mehreren <h1> </li></ul></ul><ul><ul><li>16,1% beginnen Überschriften-Struktur mit <h2>, <h3> </li></ul></ul><ul><ul><li>7,1% mit Überschriften ohne logische Reihenfolge </li></ul></ul><ul><ul><li>24,9% mit Bildern ohne alt-Attribute </li></ul></ul><ul><ul><li>4,13% der Testseiten validierten </li></ul></ul>Quelle: http://www.einfach-fuer-alle.de/blog/id/2505/
    24. 24. Das Internet ist komplex <ul><li>Wir nutzen sehr viele verschiedene Standards und Technologien, um eine Website zu betreiben. </li></ul><ul><ul><li>(X)HTML, CSS, Javascript, DOM 1-3 </li></ul></ul><ul><ul><li>Flash, Flex, SWF </li></ul></ul><ul><ul><li>PHP, ASP, Perl, Java </li></ul></ul><ul><ul><li>MySQL, PostgreSQL </li></ul></ul><ul><ul><li>XML, XSLT </li></ul></ul><ul><ul><li>... </li></ul></ul>
    25. 25. Kommunikation ist alles! <ul><li>Unterschiedliche Erwartungen und Wissensstände führen immer wieder zu Kommunikationsproblemen. </li></ul><ul><ul><li>Kunde, Kundenberater, Designer, Konzepter, Entwickler sollten möglichst die gleiche Sprache sprechen. Zumindest sollten sie einander verstehen. </li></ul></ul><ul><li>Immer den Endnutzer im Blick haben, wenn es der Kunde schon nicht macht. </li></ul>
    26. 26. Der Projektalltag
    27. 27. Der Projektalltag
    28. 28. Der Projektalltag
    29. 29. Der Projektalltag http://www.projectcartoon.com/cartoon/27
    30. 30. Agenturalltag http://vikiworks.com/2007/08/27/flat-panel-monitor-icon/
    31. 31. Selber denken macht schlau!
    32. 32. Der Frontendentwickler ist ein Übersetzer!
    33. 33. Frontendentwickler als Übersetzer <ul><li>Das Frontend ist das Einzige, das der Nutzer sieht. </li></ul><ul><li>Ein CMS oder die weitere Technik hinter der Seite interessiert den Nutzer nicht. </li></ul><ul><li>Entscheidungen aller anderen „Gewerke“ fliessen in das Frontend ein. Also sollte der Frontendentwickler mitsprechen. </li></ul><ul><li>Verständigung zwischen Grafik, Beratung und Backend herstellen, denn der Frontendentwickler sollte sie alle verstehen! </li></ul>
    34. 34. Informationen sammeln http://snurl.com/t58dc
    35. 35. http://dev.opera.com/articles/wsc/
    36. 36. http://webkrauts.de
    37. 37. http://jendryschik.de/wsdev/einfuehrung/
    38. 38. http://little-boxes.de/little-boxes-teil1-online.html
    39. 39. http://ajaxian.com/
    40. 40. http://developer.yahoo.com/yui/
    41. 41. http://developer.yahoo.com/yui/theater/
    42. 42. http://yuiblog.com/
    43. 43. http://developer.yahoo.com/ypatterns/
    44. 44. http://icant.co.uk/
    45. 45. http://www.webkrauts.de/krautcosmos/
    46. 46. http://www.einfach-fuer-alle.de/
    47. 47. http://planet.jquery.com/
    48. 48. http://net.tutsplus.com/
    49. 49. http://www.smashingmagazine.com/
    50. 50. http://sixrevisions.com/
    51. 51. Gute Bücher
    52. 52.
    53. 53.
    54. 54.
    55. 55. Beliebte Problemfälle
    56. 56. Gleich hohe Boxen
    57. 57. Gleich hohe Boxen http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html
    58. 58. Gleich hohe Boxen http://www.positioniseverything.net/articles/onetruelayout/equalheight moderne Browser IE6 und 7
    59. 59. Reiter
    60. 60. Reiter http://github.com/ginader/Accessible-Tabs
    61. 61. Runde Ecken
    62. 62. Runde Ecken http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
    63. 63. Runde Ecken - The ThrashBox http://www.vertexwerks.com/tests/sidebox/
    64. 64. Runde Ecken für moderne Browser
    65. 65. Runde Ecken für moderne Browser
    66. 66. Infoseite zu CSS3 http://www.css3.info /
    67. 67. Massenweise Requests
    68. 68. Massenweise Requests - CSS-Sprites http://www.alistapart.com/articles/sprites/
    69. 69. Massenweise Requests - CSS-Sprites
    70. 70. Performance http://developer.yahoo.com/performance/rules.html
    71. 71. Performance
    72. 72. Performance http://www.stevesouders.com /
    73. 73. http://snurl.com/t58fj
    74. 74. Semantik <ul><li>Mit der Bedeutung der Inhalte beschäftigen </li></ul><ul><li>Die Struktur erfassen und aufschreiben </li></ul><ul><ul><li>Eine Überschrift wird mit beispielsweise <h2>Überschrift</h2> ausgezeichnet, nicht mit <div class=&quot;headline&quot;>Überschrift</div> </li></ul></ul><ul><li>Eine semantisch ausgezeichnete Seite zeigt, daß man sich Gedanken über seine Arbeit gemacht hat. </li></ul>
    75. 75. Semantik <ul><li>Webseiten sind heute mehr als nur Dokumente. </li></ul><ul><ul><li>Die Dokumentenanalogie ist alt </li></ul></ul><ul><ul><li>Es sollten wissenschaftliche Texte erfaßt werden </li></ul></ul><ul><ul><li>HTML5 ist der Versuch, der Realität gerecht zu werden </li></ul></ul><ul><ul><li>Es gibt immer mehr Applikationen </li></ul></ul><ul><ul><li>Viele notwendige Seitenelemente gibt es nicht in HTML, diese müssen wir per CSS und Javascript simulieren </li></ul></ul>
    76. 76. Überschriften <ul><li>Webseiten sind immer seltener Dokumente </li></ul><ul><li>Kann ein Dokument mehrere h1 vertragen? </li></ul><ul><li>Nur eine h1? Warum? </li></ul><ul><ul><li>Wir vermeiden sonst Analogien zur Printwelt. Warum nicht auch hier? </li></ul></ul><ul><ul><li>Struktur für Sehende und Blinde anders? </li></ul></ul><ul><ul><li>Reichen sechs Überschriften? </li></ul></ul><ul><li>Was machen Browser mit Sektionsüberschriften in HTML5 und machen sie das einheitlich? </li></ul>
    77. 77. Überschriften <ul><li>Überschriften sind eine Navigationsmöglichkeit für Screenreader. </li></ul><ul><li>Wikis generieren aus den Textüberschriften eine seiteninterne Navigation, ein Inhaltsverzeichnis. </li></ul>
    78. 78. Kenne Dein (X)HTML <ul><li>Wie sehen ungeordnete Listen aus? </li></ul><ul><li>Wie sehen geordnete Listen aus? </li></ul><ul><li>Wie sieht eine Überschrift zweiter Ordnung aus? </li></ul>
    79. 79.
    80. 80.
    81. 81. Simples Browser-Reset
    82. 82. Safari4 (Mac) Firefox 3.5 (Mac)
    83. 83. Safari4 (Mac) Firefox 3.5 (Mac)
    84. 84. Eingebaute und individuelle Stylesheets <ul><li>HTML sieht nicht aus, sondern transportiert Bedeutung! </li></ul><ul><li>Auch Browser nutzen Stylesheets, um HTML anzuzeigen. </li></ul><ul><li>Jeder Browser hat sein eigenes Stylesheet. </li></ul><ul><li>Nutzerstylesheets sind möglich. </li></ul><ul><li>Letztendliche Sicherheit über die Darstellung einer Seite gibt es nicht. Man kann aber dafür sorgen, daß ein Layout nicht allzu schnell &quot;zerstört&quot; wird. </li></ul><ul><li>Für ein Userstylesheet ist die Notation !important wichtig, damit alle vorherigen Definitionen überschrieben werden. Also bspw.: p { color: black !important;} </li></ul>
    85. 85. Reset-Stylesheet von Yahoo!
    86. 86. Reset-CSS von Eric Meyer
    87. 87. Keine Tabellen? Doch! <ul><li>Tabellen sind für tabellarische Daten da! Für Layoutzwecke gibt es CSS! </li></ul><ul><li>ABER: eine Tabelle ist auch im Code eine komplexe Sache. Es gibt mehr als nur <table>, <tr> und <td>. </li></ul><ul><li>Man unterschiedliche Bereiche in Head, Foot und Body unterteilen: <thead>...</thead>, <tfoot>...</tfoot>, <tbody>...</tbody> Man kann Spalten zu Komplexen zusammenfassen: <colgroup>...</colgroup>, <col /> </li></ul>
    88. 88. http://www.flickr.com/photos/webseeings/239301576
    89. 89. http://burgenlandfeuerwehr.de /
    90. 90. Barrierefreiheit laut Gesetz <ul><li>„Barrierefrei sind [..,] technische Gebrauchsgegenstände, Systeme der Informationsverarbeitung, akustische und visuelle Informationsquellen und Kommunikationseinrichtungen [...], wenn sie für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind.“ </li></ul>
    91. 91.
    92. 92. Für wen? <ul><li>Körperbehinderung </li></ul><ul><ul><li>Motorische Behinderungen </li></ul></ul><ul><ul><li>Contergan </li></ul></ul><ul><li>Sinnesbehinderungen </li></ul><ul><ul><li>Farbfehlsichtigkeit </li></ul></ul><ul><ul><li>Blindheit </li></ul></ul><ul><ul><li>Gehörlosigkeit </li></ul></ul><ul><ul><li>Taubblindheit </li></ul></ul><ul><li>Lernbehinderung </li></ul><ul><li>Legasthenie </li></ul><ul><li>Dyslexie </li></ul><ul><li>Geistige Behinderung </li></ul><ul><li>Down-Syndrom </li></ul>
    93. 93. Für wen?
    94. 94. Zielgruppen
    95. 95. http://snurl.com/t58c8
    96. 96. Kampfbegriff? <ul><li>Der Begriff „Barrierefreiheit“ beinhaltet ein sehr weitgehendes Versprechen. </li></ul><ul><li>Im Englischen: Accessibility (= Zugänglichkeit) </li></ul><ul><li>In der deutschen Diskussion einseitig auf Behinderte und vor allem auf Blinde konzentriert. </li></ul><ul><li>Bei Barrierefreiheit geht es um Anwender, für die eine Seite nur eingeschränkt nutzbar ist. </li></ul>
    97. 97. http://snurl.com/t58gj
    98. 98. Was Barrierefreiheit NICHT ist
    99. 99. Barrierefreie Seiten müssen nicht hässlich sein!
    100. 100.
    101. 101.
    102. 102. http://www.ble.de/
    103. 103. http://www.hauptbahnhof-wien.at/
    104. 104. http://www.darmkrebs.at/
    105. 105. 4 Grundprinzipien der WCAG2.0 <ul><li>POUR </li></ul><ul><ul><li>Inhalte müssen wahrnehmbar sein (Perceivable) </li></ul></ul><ul><ul><li>Benutzerschnittstellen im Inhalt müssen bedienbar sein (Operable) </li></ul></ul><ul><ul><li>Inhalte und Bedienelemente müssen verständlich sein (Understandable) </li></ul></ul><ul><ul><li>Inhalte sollten robust genug sein, um mit aktuellen und zukünftigen Benutzeragenten zu arbeiten (inklusive assistiver Hilfsmittel) (Robust) </li></ul></ul>
    106. 106. Grundregeln <ul><li>Valides und semantisch korrektes (X)HTML und valides CSS </li></ul><ul><li>Inhalte müssen textlich transportiert werden. Kein Verstecken von Texten in Grafiken. </li></ul><ul><li>Ausreichende Farbkontraste </li></ul><ul><li>Abkürzungen, Akronyme und Sprachwechsel müssen markiert/erklärt werden. </li></ul><ul><li>Für Medien müssen Alternativen vorliegen. </li></ul><ul><li>Bilder bekommen ein Alt- Attribut , es sei denn, sie sind rein dekorativ </li></ul>
    107. 107. Barrierefreiheit leben <ul><li>Barrierefreiheit ist weniger ein technisches Problem, als das einer vernünftigen Planung. Zudem endet Barrierefreiheit nicht mit dem Launch. Sie muss täglich gelebt werden. </li></ul><ul><li>Ein technisches Produkt wie ein CMS kann Barrierefreiheit nur unterstützen, wichtiger sind allerdings die Redakteure, die sich an Regeln halten müssen. </li></ul>
    108. 108. Automatisierte Tests <ul><li>Eine fehlerfreies Abschneiden in einem automatisierten Test sagt aber nur, daß die Seite dieses Tool „übersteht“. Mehr nicht! </li></ul><ul><li>Barrierefreiheit ist für Menschen da, deshalb sollten auch Menschen sie testen. </li></ul>
    109. 109. Am Ende Jens Grochtdreis http://blog.grochtdreis.de http://webkrauts.de Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/

    ×