Barrierefreies Webdesign Grundlagen, Analyse, Optimierung (2006) Diese Datei ist unter einer Creative Commons Lizenz veröf...
Barrierefreies Webdesign, Teil 1 Theoretische Grundlagen, Analyseaspekte, Werkzeuge und Quellen
Teil 1: Grundlagen Was heißt barrierefrei? <ul><li>Berücksichtigung verschiedener Nutzergruppen
Berücksichtigung verschiedener Ausgabegeräte
Allgemeine Zugänglichkeit
Durchdachte Informationsarchitektur </li></ul>
Teil 1: Grundlagen Barrierefreiheit für wen? <ul><li>Menschen mit visuellen Einschränkungen
Menschen mit auditiven Einschränkungen
Menschen mit motorischen Einschränkungen
Menschen mit Lernbehinderung bzw. Lese-Schreibschwäche
Suchmaschinen
Verschiedene Ausgabegeräte </li></ul>»»   Für alle
Teil 1: Grundlagen Juristische Texte <ul><li>Barrierefreie Informationstechnik Verordnung (BITV)  </li></ul>( http://www.e...
Bildschirmarbeitsverordnung (BildschArbV) </li></ul>
Teil 1: Grundlagen Weitere wichtige Texte <ul><li>Web Content Accessibility Guidelines (WCAG) der Web Accessibility Initia...
Teil 1: Grundlagen WCAG 1 zusammengefasst <ul><li>Priorität 1 - Konformitätsstufe A: </li><ul><ul><li>„MUSS“-Kriterien: Gr...
Teil 1: Grundlagen WCAG 1 Checkliste Priorität 1 (Auszug) <ul><li>Bilder, Animationen, Imagemaps, Grafiken etc: Einen besc...
Farben sind keine Informationsträger.
Klare, verständliche Texte.
Tabellen logisch strukturieren.
Frames logisch benennen.
Seiten auch ohne Scripte und Applets nutzbar machen. </li></ul>
Teil 1: Grundlagen WCAG 1 Checkliste Priorität 2 (Auszug) <ul><li>Kontrastierende Farbkombinationen.
Inhalt (Markup) und Layout (CSS) trennen.
Tabellen für Daten, nicht für Layout.
Relative Größeneinheiten.
Verständliche Linktexte, title-Attribut.
Metadaten für semantische Informationen.
Sitemap und einheitliche Navigation. </li></ul>
Teil 1: Grundlagen WCAG 1 Checkliste Priorität 3 (Auszug) <ul><li>Natürliche Sprache der Site definieren.
Tabulatornavigation und Tastaturbefehle.
Einheitlicher Präsentationsstil der Site.
Zusammenfassung einer Tabelle.
Links gruppieren und Linkgruppen bezeichnen.
Druckbare Zeichen zwischen nebeneinanderstehenden Links. </li></ul>
Teil 1: Grundlagen WCAG 1 Quellen <ul><li>Die gesamte WCAG 1-Checkliste (Englisch): </li><ul><ul><li>http://www.w3.org/TR/...
Teil 1: Grundlagen BITV zusammengefasst <ul><li>Priorität 1 - Konformitätsstufen A und AA: </li><ul><ul><li>„MUSS“-Kriteri...
„SOLL“-Kriterien: Erleichterung der Zugänglichkeit für bestimmte Nutzergruppen </li></ul></ul><li>Priorität 2 – Konformitä...
Barrierefreies Webdesign, Teil 2 Analyse bestehender Websites –  Methoden und Werkzeuge
Teil 2: Analyse Allgemeine Aspekte <ul><li>Informationsarchitektur: Navigation, Makrostruktur, Mikrostruktur
Datenstruktur: Trennung von Inhalt und Layout, Linearisierbarkeit
Texthinterlegung spezieller Objekte
Kontraste, Farben, Typografie
Textaufbau, Verständlichkeit
Skalierbarkeit </li></ul>
Teil 2: Analyse Analyse: Spezielle Elemente <ul><li>Datentabellen
Formulare
Nächste SlideShare
Wird geladen in …5
×

Barrierefreies Webdesign

2.051 Aufrufe

Veröffentlicht am

Barrierefreie Webseiten: Grundlagen, Analyse, Optmierung:
- Grundlagen Accessibility
- Analyse bestehender Websites (inkl. Analysewerkzeuge)
- Optimierung bestehender Websites

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

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.051
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
9
Aktionen
Geteilt
0
Downloads
11
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Barrierefreies Webdesign

    1. 1. Barrierefreies Webdesign Grundlagen, Analyse, Optimierung (2006) Diese Datei ist unter einer Creative Commons Lizenz veröffentlicht. Die Details finden Sie hier: http://creativecommons.org/licenses/by-nc-nd/3.0/de/ Sollten Sie Fragen zu dieser Lizenz oder zur korrekten Verwendung des Dokuments haben, senden Sie bitte eine E-Mail an kontakt@edaktik.de
    2. 2. Barrierefreies Webdesign, Teil 1 Theoretische Grundlagen, Analyseaspekte, Werkzeuge und Quellen
    3. 3. Teil 1: Grundlagen Was heißt barrierefrei? <ul><li>Berücksichtigung verschiedener Nutzergruppen
    4. 4. Berücksichtigung verschiedener Ausgabegeräte
    5. 5. Allgemeine Zugänglichkeit
    6. 6. Durchdachte Informationsarchitektur </li></ul>
    7. 7. Teil 1: Grundlagen Barrierefreiheit für wen? <ul><li>Menschen mit visuellen Einschränkungen
    8. 8. Menschen mit auditiven Einschränkungen
    9. 9. Menschen mit motorischen Einschränkungen
    10. 10. Menschen mit Lernbehinderung bzw. Lese-Schreibschwäche
    11. 11. Suchmaschinen
    12. 12. Verschiedene Ausgabegeräte </li></ul>»» Für alle
    13. 13. Teil 1: Grundlagen Juristische Texte <ul><li>Barrierefreie Informationstechnik Verordnung (BITV) </li></ul>( http://www.einfach-fuer-alle.de/artikel/bitv/ ) <ul><li>Behindertengleichstellungsgesetz (BGG) </li></ul>( http://www.gesetze-im-internet.de/bgg/index.html ) <ul><li>Landesgleichstellungsgesetze und Verordnungen </li></ul>(z.B. NRW: http://wob11.de/nrw-bitv.html ) <ul><li>Sozialgesetzbuch IX (SGB IX)
    14. 14. Bildschirmarbeitsverordnung (BildschArbV) </li></ul>
    15. 15. Teil 1: Grundlagen Weitere wichtige Texte <ul><li>Web Content Accessibility Guidelines (WCAG) der Web Accessibility Initiative (WAI) </li></ul>( http://www.w3.org/WAI/intro/wcag.php ) ( http://www.w3.org/Talks/WAI-Intro/slide1-0.html ) <ul><li>ISO 14915, ISO 23973 </li></ul>(Multimediale Anwendungen) <ul><li>ISO Technical Specification 16071 </li></ul>(Gestaltung von Büro- und Lernsoftware sowie Webauftritten)
    16. 16. Teil 1: Grundlagen WCAG 1 zusammengefasst <ul><li>Priorität 1 - Konformitätsstufe A: </li><ul><ul><li>„MUSS“-Kriterien: Grundlegende Erfordernisse für eine basale Barrierefreiheit </li></ul></ul><li>Priorität 2 - Konformitätsstufe AA: </li><ul><ul><li>„SOLL“-Kriterien: Erleichterung der Zugänglichkeit für bestimmte Nutzergruppen </li></ul></ul><li>Priorität 3 – Konformitätsstufe AAA: </li><ul><ul><li>„DARF“-Kritierien: Aufhebung nachrangiger Zugangsprobleme </li></ul></ul></ul>
    17. 17. Teil 1: Grundlagen WCAG 1 Checkliste Priorität 1 (Auszug) <ul><li>Bilder, Animationen, Imagemaps, Grafiken etc: Einen beschreibenen Text zur Verfügung stellen.
    18. 18. Farben sind keine Informationsträger.
    19. 19. Klare, verständliche Texte.
    20. 20. Tabellen logisch strukturieren.
    21. 21. Frames logisch benennen.
    22. 22. Seiten auch ohne Scripte und Applets nutzbar machen. </li></ul>
    23. 23. Teil 1: Grundlagen WCAG 1 Checkliste Priorität 2 (Auszug) <ul><li>Kontrastierende Farbkombinationen.
    24. 24. Inhalt (Markup) und Layout (CSS) trennen.
    25. 25. Tabellen für Daten, nicht für Layout.
    26. 26. Relative Größeneinheiten.
    27. 27. Verständliche Linktexte, title-Attribut.
    28. 28. Metadaten für semantische Informationen.
    29. 29. Sitemap und einheitliche Navigation. </li></ul>
    30. 30. Teil 1: Grundlagen WCAG 1 Checkliste Priorität 3 (Auszug) <ul><li>Natürliche Sprache der Site definieren.
    31. 31. Tabulatornavigation und Tastaturbefehle.
    32. 32. Einheitlicher Präsentationsstil der Site.
    33. 33. Zusammenfassung einer Tabelle.
    34. 34. Links gruppieren und Linkgruppen bezeichnen.
    35. 35. Druckbare Zeichen zwischen nebeneinanderstehenden Links. </li></ul>
    36. 36. Teil 1: Grundlagen WCAG 1 Quellen <ul><li>Die gesamte WCAG 1-Checkliste (Englisch): </li><ul><ul><li>http://www.w3.org/TR/WCAG10/full-checklist.html </li></ul></ul><li>Quicktips der WAI (Englisch): </li><ul><ul><li>http://www.w3.org/WAI/quicktips/ </li></ul></ul><li>Quicktips in Deutsch (sehr verkürzt): </li><ul><ul><li>http://www.w3.org/WAI/References/QuickTips/qt.de.htm </li></ul></ul></ul>
    37. 37. Teil 1: Grundlagen BITV zusammengefasst <ul><li>Priorität 1 - Konformitätsstufen A und AA: </li><ul><ul><li>„MUSS“-Kriterien: Grundlegende Erfordernisse für eine basale Barrierefreiheit
    38. 38. „SOLL“-Kriterien: Erleichterung der Zugänglichkeit für bestimmte Nutzergruppen </li></ul></ul><li>Priorität 2 – Konformitätsstufe AAA: </li><ul><ul><li>„DARF“-Kritierien: Aufhebung nachrangiger Zugangsprobleme </li></ul></ul></ul>
    39. 39. Barrierefreies Webdesign, Teil 2 Analyse bestehender Websites – Methoden und Werkzeuge
    40. 40. Teil 2: Analyse Allgemeine Aspekte <ul><li>Informationsarchitektur: Navigation, Makrostruktur, Mikrostruktur
    41. 41. Datenstruktur: Trennung von Inhalt und Layout, Linearisierbarkeit
    42. 42. Texthinterlegung spezieller Objekte
    43. 43. Kontraste, Farben, Typografie
    44. 44. Textaufbau, Verständlichkeit
    45. 45. Skalierbarkeit </li></ul>
    46. 46. Teil 2: Analyse Analyse: Spezielle Elemente <ul><li>Datentabellen
    47. 47. Formulare
    48. 48. Flash
    49. 49. PDF
    50. 50. Pop-up-Fenster </li></ul>
    51. 51. Teil 2: Analyse Optische Analyse in grafischem Browser <ul><li>Bilddarstellung deaktivieren.
    52. 52. Schriftgröße variieren.
    53. 53. Bildschirmauflösung und/oder Größe des Browserfensters ändern.
    54. 54. Bildschirmfarben auf Graustufen einstellen oder Website in Graustufen ausdrucken.
    55. 55. Navigieren ohne Maus, sondern mit Tastatur. </li></ul>
    56. 56. Teil 2: Analyse Analyse mit speziellen Browsern <ul><li>Webseite mit Screenreader und/oder VoiceBrowser prüfen auf: </li><ul><ul><li>Sind die gleichen Informationen zur Verfügung wie für den visuellen Browser?
    57. 57. Macht die zur Verfügung stehende Information Sinn in ihrer Reihenfolge? </li></ul></ul><li>Werkzeuge: </li><ul><ul><li>Lynxviewer: Emuliert einen Screenreader: http://www.delorie.com/web/lynxview.html
    58. 58. Webformator: Screenreader-Plugin für IE http://www.webformator.de </li></ul></ul></ul>
    59. 59. Teil 2: Analyse A utomatisierte Werkzeuge <ul><li>Website mit einem der unten folgenden Werkzeuge prüfen * : </li><ul><ul><li>A-Prompt: Freeware (Engl.) für Windows; überprüft und repariert HTML/XHTML: http://www.aprompt.ca/
    60. 60. Colorfilter: Online-Tool (kostenfrei, Engl.); simuliert Farbfehlsichtigkeiten: http://colorfilter.wickline.org
    61. 61. Wave: Online-Tool (Engl.), das eine Site linearisiert und auf Fehler prüft: http://www.wave.webaim.org/index.jsp </li></ul></ul></ul>* Ergänzung zur manuellen Prüfung
    62. 62. Teil 2: Analyse Weitere Werkzeuge
    63. 63. Teil 2: Analyse Quellen <ul><li>Einfach für Alle: www.einfach-fuer-alle.de
    64. 64. Barrierekompass: www.barrierekompass.de
    65. 65. Aktionsbündnis für barrierefreie Informationstechnik: www.abi-projekt.de
    66. 66. Web Accessibility Initiative (WAI) des W3C: http://www.w3.org/WAI/
    67. 67. Barrierefreies Webdesign, Jan Eric Hellbusch, dpunkt.verlag </li></ul>
    68. 68. Barrierefreies Webdesign, Teil 3 Praktische Umsetzung barrierefreier Techniken in XHTML und CSS
    69. 69. Teil 3: Praxis Informationsarchitektur I Internet = Kommunikation und Information <ul><li>Makrostruktur: </li><ul><ul><li>Möglichst geringe Strukturtiefe
    70. 70. Thematische Zusammenstellung von Bereichen </li></ul></ul><li>Mikrostruktur: </li><ul><ul><li>Logische Verteilung der Information: Das Wesentliche am Anfang.
    71. 71. Zusammenhängende Informationsblöcke </li></ul></ul></ul>Beispiel: www.hbz-nrw.de
    72. 72. Teil 3: Praxis Informationsarchitektur II <ul><li>Navigationsziele: </li><ul><ul><li>Wo befinde ich mich? </li></ul></ul></ul><ul><ul><ul><li>Wo kann ich hin? </li></ul></ul></ul><ul><ul><ul><li>Wo will ich hin? </li></ul></ul></ul>
    73. 73. Teil 3: Praxis Informationsarchitektur III <ul><li>Eigenschaften der Navigation: </li></ul>(a) Wahrnehmbarkeit <ul><ul><ul><ul><ul><li>Position </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><ul><ul><li>Übliche Leserichtung beachten </li></ul></ul></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Codestruktur </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><ul><ul><li>Navigationen als Listen <ul> <li><a href=“ziel.html“ title=“Zum Ziel“>Hier geht es zum Ziel</a></li> </ul> </li></ul></ul></ul></ul></ul></ul></ul>
    74. 74. Teil 3: Praxis Informationsarchitektur IV <ul><li>Eigenschaften der Navigation: </li></ul>(a) Wahrnehmbarkeit (Forts.) <ul><ul><ul><ul><ul><li>Farbe und Kontrast </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><ul><ul><li>Deutliche Farbwahl, keine Komplementärfarben
    75. 75. Guter Kontrast
    76. 76. Farbwechsel bei Statuswechsel (per CSS) a:link, a:visited, a:hover, a:active, a:focus </li></ul></ul></ul></ul></ul></ul></ul>
    77. 77. Teil 3: Praxis Informationsarchitektur V <ul><li>Eigenschaften der Navigation: </li></ul>(b) Bedienbarkeit <ul><ul><ul><ul><ul><li>Hover-/Fokushervorhebung </li><ul><ul><li>CSS: a:hover a:focus </li></ul></ul><li>Tabulator </li><ul><ul><li>XHTML: Attribut tabindex (Links, Formularfelder, clientseitige Imagemaps) <a href=“seite.html“ tabindex=“3“>...</a> <a href=“test.html“ tabindex=“1“>...</a> </li></ul></ul></ul></ul></ul></ul></ul>
    78. 78. Teil 3: Praxis Informationsarchitektur VI <ul><li>Eigenschaften der Navigation: </li></ul>(b) Bedienbarkeit (Forts.) <ul><ul><ul><ul><ul><li>ggf. Accesskey </li><ul><ul><li>XHTML-Attribut accesskey (Links, Formularfelder, clientseitige Imagemaps) <a href=“seite.html“ accesskey=“s“>...</a> <a href=“test.html“ accesskey=“t“>...</a> </li></ul></ul><li>Skalierbarkeit ( relative Maßangaben) </li></ul></ul></ul></ul></ul>
    79. 79. Teil 3: Praxis Informationsarchitektur VII <ul><li>Eigenschaften der Navigation: </li></ul>(c) Verständlichkeit <ul><ul><ul><ul><ul><li>Klare Aussage des Linktextes
    80. 80. Verständliches Sprachniveau (ggf. zielgruppenspezifisch) </li></ul></ul></ul></ul></ul>
    81. 81. Teil 3: Praxis Textstruktur I <ul><li>Verständlichkeit: Zielgruppenspezifisch angepasst
    82. 82. Struktur: Logische/semantische Auszeichnung: </li><ul><ul><li><h1>Wichtigste Überschrift</h1> <h2>Zweitwichtigste Überschrift, Subheadline</h2> <b>Text im Fettschnitt: semantisch bedeutungslos.</b> <em>Text stark hervorgehoben: semantisch markiert.</em> </li></ul></ul></ul>
    83. 83. Teil 3: Praxis Textstruktur II <ul><li>Lineare Folge des Textes entspricht logischer Lesefolge </li></ul>
    84. 84. Teil 3: Praxis Bilder, Animationen, Imagemaps I <ul><li>Beschreibender Text für Bild und Link </li><ul><ul><li>Attribut alt </li><ul><ul><li><img src=“bilder/route.gif“ alt=“wegskizze“/> </li></ul></ul><li>Attribut title </li><ul><ul><li><a href=“quellpfad.html“ title=“erklärung“>Linktext</a> </li></ul></ul><li>Attribut longdesc </li><ul><ul><li><img src=“bilder/route.gif“ alt=“wegskizze“ longdesc=“route.txt“/> </li></ul></ul></ul></ul></ul>
    85. 85. Teil 3: Praxis Bilder, Animationen, Imagemaps II <ul><li>Beschreibender Text für Imagemap </li><ul><ul><li><map id=“karte“ name=“karte“> <area href=“start.html“ shape=“rect“ coords=“26, 4,30,75“ alt=“Startpunkt“ title=“Hier beginnt die Tour“ /> ... </map> <img src=“bilder/karte.gif“ width=“200px“ height=“150px“ alt=“routenkarte“ usemap=“#karte“/> </li></ul></ul></ul>
    86. 86. Teil 3: Praxis Bilder, Animationen, Imagemaps III <ul><li>Beschreibender Text für OBJECT </li><ul><ul><li><object data=“bilder/karte.gif“ type=“image/gif“ width=“200px“ height=“150px“> <p>Die Karte für unsere Route</p> </object> </li></ul></ul></ul>
    87. 87. Teil 3: Praxis Farben und Kontraste I <ul><li>Farben ohne Informationswert </li></ul>So nicht: Sondern so: Hier klicken Hier klicken Hier klicken Weitere Infos Seitenübersicht Kontakt
    88. 88. Teil 3: Praxis Farben und Kontraste II <ul><li>Lesbarkeit ohne Farben </li></ul>So nicht: Sondern so:
    89. 89. Teil 3: Praxis Farben und Kontraste III <ul><li>Ausreichende Kontrastierung, richtige Farbkombinationen </li></ul>Sondern so: So nicht: Dunkelrot Rot Gelb Weiß Dunkelorange Hellgrau
    90. 90. Teil 3: Praxis Farben und Kontraste IV <ul><li>Quellen zur Farb- und Kontrastlehre: </li><ul><ul><li>Ingrid Krüber, Fraunhofer Institut: http://www.ipsi.fraunhofer.de/%7Ecrueger/farbe/
    91. 91. Ernst Georg Beck: http://www.merian.fr.bw.schule.de/beck/skripten/12/bs12-39.htm </li></ul></ul><li>Online-Werkzeuge: </li><ul><ul><li>Color Laboratory: http://colorlab.wickline.org/colorblind/colorlab/
    92. 92. Color Filter: http://colorfilter.wickline.org/ </li></ul></ul></ul>
    93. 93. Teil 3: Praxis Typografie <ul><li>Skalierbare Schriftgröße (CSS) </li><ul><ul><li>font-size:1 em; </li></ul></ul><li>Bildschirmgerechte Typo (CSS) </li><ul><ul><li>font-family: futura, arial, helvetica, sans-serif;
    94. 94. font-family: times new roman, geneva, serif;
    95. 95. font-family: courier, courier new, monospace; </li></ul></ul><li>Passende Farben
    96. 96. Kein kursiver Schriftschnitt
    97. 97. Kein Blocksatz </li></ul>
    98. 98. Teil 3: Praxis Frames I <ul><li>Regel Nr. 1: Keine Frames verwenden. Falls unumgänglich, dann:
    99. 99. Frames eindeutig benennen </li><ul><ul><li><frame name=“navigation“ src=“nav.html“ /> </li></ul></ul><li>Frames mit Titeln versehen </li><ul><ul><li><frames name=“navigation“ src=“nav.html“ title=“Navigation mit Links zu den Inhalten“ /> </li></ul></ul><li>Framesets skalierbar machen </li><ul><ul><li><frameset rows=“25%, *“ >...</frameset> </li></ul></ul></ul>
    100. 100. Teil 3: Praxis Frames II <ul><li>Framesets beschreiben </li><ul><ul><li><frameset rows=“1*,3*“ longdesc=“texte/beschreibung_frameset.txt“>... </li></ul></ul><li>No-Frames-Bereich definieren </li><ul><ul><li><noframes><body><p>Hier wird alternativer Inhalt für nicht framefähige Ausgabemedien zur Verfügung gestellt</p></body></noframes> </li></ul></ul></ul>
    101. 101. Teil 3: Praxis Tabellen I <ul><li>Tabellen skalierbar machen </li><ul><ul><li><table width=“90%“><tr><td width=“20%“>...</td></tr></table> </li></ul></ul><li>Tabellen beschreiben </li><ul><ul><li><table width=“90%“ summary=“In dieser Tabelle werden die Daten dargestellt...“>...</table> </li></ul></ul></ul>
    102. 102. Teil 3: Praxis Tabellen II <ul><li>Tabellenüberschrift einfügen </li><ul><ul><li><table width=“90%“ summary=“In dieser Tabelle...“> <caption>Auswertung der Daten</caption> ...</table> </li></ul></ul><li>Tabellen strukturieren </li><ul><ul><li><table width=“90%“> <thead>...<thead><tfoot>...</tfoot> <tbody><tr> <td headers=“Gewinne_09_2005“>...</td></tr> ...</tbody></table> </li></ul></ul><li>Weitere Informationen: http://www.w3.org/TR/html4/struct/tables.html#h-11.4.3 </li></ul>
    103. 103. Teil 3: Praxis Dynamik I Clientseitige dynamische Aktionen <ul><li>Scripting: (JavaScript, ASP usw.) </li><ul><ul><li>Inhalt und Navigation unabhängig von Skripten </li></ul></ul><li>Per Skript generierte Inhalte vermeiden <script type=&quot;text/javascript&quot;> <!-- // /* <![CDATA[ */ document.write(&quot;<p>|<a href='#'>Startseite</a>&quot;); document.write(&quot;|<a href='#'>Aktuelles</a>&quot;); document.write(&quot;|<a href='#'>Bestellservice</a>&quot;); document.write(&quot;|</p>&quot;); /* ]]> */ //--></script> </li></ul>
    104. 104. Teil 3: Praxis Dynamik II <ul><li>No-Script-Bereich zur Verfügung stellen <noscript> <p>|<a href=&quot;#&quot;>Startseite</a>|<a href=&quot;#&quot;>Aktuelles</a>|<a href=&quot;#&quot;>Bestellservice</a> |</p> </noscript> </li></ul>
    105. 105. Teil 3: Praxis Dynamik III <ul><li>Ticker, Blinker etc. vermeiden </li><ul><ul><li>Lesbarkeit eingeschränkt
    106. 106. Screenreader kollabieren z.T.
    107. 107. Epilepsiegefahr (besonders bei größeren blinkenden oder flirrenden Flächen) </li></ul></ul></ul>
    108. 108. Teil 3: Praxis Dynamik IV <ul><li>Autorefresh/Weiterleitung </li><ul><ul><li>Clientseitige Weiterleitung vermeiden, stattdessen serverseitig per .htaccess oder php: <?php header(&quot;Status: 301 Moved Permanently&quot;); (&quot;Location: http://www.rot65.de/front_content.php&quot;); exit; ?>
    109. 109. Statischen Link als Alternative anbieten </li></ul></ul></ul>
    110. 110. Teil 3: Praxis Die Arbeitsschritte <ul><li>Strukturierung (XHMTL und CSS)
    111. 111. Linearisierung
    112. 112. Codierung
    113. 113. Validierung </li></ul>

    ×