Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Barrierefreie Webseiten

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Cargando en…3
×

Eche un vistazo a continuación

1 de 34 Anuncio

Más Contenido Relacionado

Anuncio

Barrierefreie Webseiten

  1. 1. Barrierefreie Webseiten Eine Einführung
  2. 2. Es geht nicht um “Behinderte”! (Grafik: Microsoft)
  3. 3. Es geht um Webseiten für uns alle! Websites müssen trotz möglicher dauerhafter oder vorübergehender Einschränkungen des Besuchers verständlich und benutzbar sein! Grafik: Microsoft
  4. 4. Anforderungen an barrierefreie Webseiten Web Content Accessibility Guidelines (WCAG) der Web Accessibility Initiative (WAI) des World Wide Web Consortiums (W3C) https://www.w3.org/WAI/standards-guidelines/ wcag/glance/
  5. 5. Anforderungen an barrierefreie Webseiten Prinzip 1: Wahrnehmbarkeit Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können. Prinzip 2: Bedienbarkeit Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein. Prinzip 3: Verständlichkeit Informationen und Bedienung der Benutzerschnittstelle müssen verständlich sein. Prinzip 4: Robustheit Inhalte müssen robust genug sein, damit sie zuverlässig von einer großen Auswahl an Benutzeragenten einschließlich assistierender Techniken interpretiert werden können.
  6. 6. Was können wir dafür tun? ● Barrierefreies Design ● Barrierefreie Inhalte ● Semantisches HTML ● Accessible Rich Internet Applications (ARIA)
  7. 7. Barrierefreies Design
  8. 8. Barrierefreies Design: Farben ● Unterscheidbarkeit durch Kontraste ○ gegenüber benachbarten Farben ○ gegenüber dem Hintergrund ○ nicht schätzen, messen! ○ WCAG-Empfehlung für Text: 4.5 : 1, oder 3 : 1 bei großen / fetten Schriften! ● Farbe darf nie alleinstehendes Merkmal sein! ○ Beispiel: farbige Links zusätzlich fett machen oder unterstreichen ○ Ampel-Darstellungen oder Diagramme mit Texthinweisen versehen Kontrast 8.4 : 1 Kontrast 2.5 : 1
  9. 9. Barrierefreies Design: Typografie ● Lesbare / vertraute Schriftarten verwenden ● Schriftgröße, z.B. >= 16px ● Zeilenabstand, z.B. 1.5 (abhängig von Schriftgröße) ● Absatzabstände ● Zeilenlänge begrenzen, z.B. 45 - 75 Zeichen ● Schriften skalierbar machen, z.B. bis 200 %, ohne sonstige Inhalte -> relative Maßeinheiten, z.B. rem -> aber nicht für Alles!
  10. 10. Beispiel: Typografie Hallo. Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders, blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen. Hallo. Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders, blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
  11. 11. Barrierefreies Design: Layout / Hierarchie ● Klare Strukturen (Header, Footer, Sidebars, …) ● Hierarchie durch z.B. Schriftgrößen, Einrückungen ● Responsives Design ● Whitespace ● Konsistenz ● Lesefluss beachten
  12. 12. Barrierefreies Design: Animationen ● Sparsam / subtil verwenden ● Abschaltbar machen ○ Beispiel: prefers-reduced-motion beachten! ● Vorsicht mit animierten GIFs ● Blitzen / Blinkeffekte vermeiden
  13. 13. Barrierefreie Inhalte
  14. 14. Barrierefreie Inhalte: Texte / Sprache ● Sprache muss identifizierbar sein (lang-Attribut) ● Texte müssen verständlich sein ● Alternative Fassung, z.B. Vorlesefunktion oder vereinfachte Sprache Beispiel: die sogenannte “Leichte Sprache” ● kurze Sätze ● einfache Worte ● konsistente Begriffe ● keine Passiv-Formulierungen siehe dazu Deutsche Gesellschaft für Leichte Sprache https://dg-ls.de/regelwerk/
  15. 15. Beispiel: Leichte Sprache Ballistische Experimente mit kristallinem H₂O auf dem Areal der pädagogischen Institutionen unterliegen striktester Prohibition! Das Werfen von Schneebällen auf dem Schulhof ist verboten! Quelle: DGLS
  16. 16. Barrierefreie Inhalte: Bilder / Medien / Dokumente ● Beschreibungen für Bildinhalte (alt-Texte) ● Captions (Untertitel) ● Transkriptionen für Audio-/Video-Dateien ● Allgemein verfügbare Formate (jpg/png/webp, pdf, mp3/mp4) ● Barrierefreie PDF ● Keine selbststartenden Medien (Audio/Video) ● Icons: vertraute Bildsprache (z.B. Home, Menü, Download,...) + Text-Hinweis, z.B. title-Attribut (veraltet)
  17. 17. Barrierefreie Inhalte: Formulare ● Labels ● Feldbeschreibungen ● Felder gruppieren ● Bedienbarkeit per Tastatur ● Sinnvolle Feldtypen, z.B. select vs. radios ● Placeholder nie allein einsetzen! ● Keine rein grafischen Captchas! ● Aussagekräftige Validierungsmeldungen
  18. 18. Barrierefreie Inhalte: Navigation ● Bedienbarkeit per Tastatur (Tab, Enter, ESC) ● Navigationselemente klar erkennbar machen ● Skip Links anbieten ● Sichtbarer Focus ● Reihenfolge nicht per CSS verändern ● tabindex-Attribut nach Möglichkeit vermeiden ● Alternativen (Suchfunktion, Inhaltsverzeichnis) ● Klickbare Bereiche groß genug machen
  19. 19. Semantisches HTML
  20. 20. Semantisches HTML: Was ist das? ● Semantik = Lehre von der Bedeutung ● Semantisches HTML-Tag: gibt Auskunft zur Bedeutung seines Inhalts ● Es gibt ca. 110 HTML-Tags ● Davon ca. 25 neue Tags in HTML5 ● Zwei HTML-Tags sind nicht semantisch: <div> und <span> Neu in HTML5 sind z.B. die Sectioning Elemente: <article>, <aside>, <footer>, <header>, <main>, <nav>, <section>
  21. 21. Seitenstruktur: HTML4 vs. HTML5 Quelle: Jamon Dixon Medium
  22. 22. Seitenstruktur: Elemente ● <header> Seitenkopf, eventuell wiederholt auf allen Seiten ● <nav> Navigation, typischerweise eine Liste mit Links ● <main> Hauptinhalt der Seite ● <aside> Zusätzliche Informationen zum Inhalt ● <footer> Seitenfuß, eventuell wiederholt auf allen Seiten ● <article> Strukturierter Content, der auch allein stehen könnte. ● <section> Untergliederung eines längeren Content-Bereichs
  23. 23. Seitenstruktur: Empfehlungen ● Elemente beziehen sich immer auf das übergeordnete Strukturelement (also nicht das Parent-Element), oder den <body> ● Elemente können verschachtelt werden, z.B. können <article> Elemente einen eigenen <header> oder <footer> bekommen. ● Das <main> Element sollte nur einmal verwendet werden! ● Kein <header> oder <footer> in <header> und <footer>! ● Ein <header> nur mit einer Überschrift ist überflüssig! ● Bei wiederholt eingesetzten Elementen empfiehlt sich eine Kennzeichnung zur Unterscheidung, z.B. Beginn mit einer Überschrift und ARIA-Attribut
  24. 24. Besonderheit: Überschriften <h1> - <h6> ● Bilden die Inhaltsstruktur der Seite (Document Outline) ● Ermöglichen schnellere Navigation Regeln: ● Hierarchie beachten! ○ Starten mit <h1> ○ Keine Lücken lassen! ● Nicht wegen visueller Darstellung wählen! Also nicht: Schrift soll groß sein, deshalb <h2> Durch diese Regeln erweisen sich <h4> - <h6> meistens als überflüssig.
  25. 25. Beispiel: Überschriften auf drupal.org ● beginnt nicht mit <h1> ● überspringt Levels
  26. 26. ARIA Accessible Rich Internet Applications
  27. 27. Exkurs: Accessibility Object Tree Quelle: https://wcig.gitub.io
  28. 28. Auszüge aus dem Accessibility Object Tree <ul aria-label="Obstsorten"> <li>Apfel</li> <li>Birne</li> <li>Pfirsich</li> </ul> Statt aria-label wäre ggf. auch title geeignet!
  29. 29. Auszüge aus dem Accessibility Object Tree
  30. 30. ARIA Rollen: “role” Attribut ● Ergänzung, um HTML-Tags semantisch(er) zu machen ● Inhaltlich geeignetes “role” Attribut, z.B. <div role=”complementary”> Was ist zu beachten: ● Semantische HTML-Tags haben bereits implizite Rollen, diese sollten nicht dupliziert werden! Beispiel: <ul> => “list”, <nav> => ”navigation” Also nicht: <nav role=”navigation”> ● Die implizite Rolle eines HTML-Tags sollte nur in Ausnahmefällen überschrieben werden! Also nicht: <nav role=”complementary”> Ausnahme z.B. <a href=”...” role=”tab”>
  31. 31. ARIA Attribute: Eigenschaft oder Zustand von Elementen <div role="dialog" aria-labelledby="dialogheader"> <h2 id="dialogheader">Wählen Sie eine Datei</h2> .… Dialog Inhalte <button aria-label="schließen" aria-describedby="descriptionClose" onclick="myDialog.close()">X</button> …. <div id="descriptionClose"> Beim Schließen dieses Fensters werden eingegebene Daten verworfen. Sie werden zur Hauptseite zurückgeleitet. </div> </div>
  32. 32. Regel: Semantisches HTML bevorzugen! Also nicht: <div role=”checkbox” aria-checked=”true” onclick=”…”> ⛝ </div> sondern: <input type=”checkbox” /> ARIA-Rollen und -Attribute einsetzen, wenn semantisches HTML nicht verfügbar ist oder ausreicht, z.B. bei Custom Elements (Web Components) oder Formularen! Ebenso bei Dialogen, Modals, Slidern, Tabs, Ajax-Inhalten u.ä.
  33. 33. Accessibility: Links Web Content Accessibility Guidelines des W3C: https://www.w3.org/WAI/standards-guidelines/wcag/ Web Accessibility in Mind: https://webaim.org/ Mozilla Developer Network (MDN): https://developer.mozilla.org/en-US/docs/Web/Accessibility The A11Y Project: https://www.a11yproject.com/
  34. 34. Accessibility: Tools ● Developer Tools des Browsers ● Browser-Erweiterungen, z.B. Web Developer, Axe, WAVE ● Screenreader, z.B. NVDA (Windows), VoiceOver (Mac), MS Edge Browser ● Online-Dienste zur Überprüfung Sammlungen: https://www.w3.org/WAI/ER/tools/ https://webaim.org/articles/evaluationguide/

×