Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Barrierefreiheit – Internet fuer alle

3.255 Aufrufe

Veröffentlicht am

Slides meines Vortrags "Barrierefreiheit – Internet für Alle" beim WordCamp Cologne 2015

Veröffentlicht in: Internet
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Barrierefreiheit – Internet fuer alle

  1. 1. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Internet für alle! Accessibility Barrierefreiheit
  2. 2. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Elisabeth Hölzl @taxifisch • Arbeite seit etwa 5 Jahren mit WordPress • Theme-Anpassungen und Custom-Themes • Mitbegründerin des WPMeetUp München
  3. 3. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Motivation ➡ Ich ärgere mich leidenschaftlich über schlecht bedienbare Websites ➡ Ich bin stark kurzsichtig und stoße selbst damit öfter mal an meine Grenzen ➡ Das Internet Senioren näher bringen
  4. 4. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Wen betrifft Barrierefreiheit? ✓ Menschen, die nicht sehen und keine Maus benutzen können ✓ Gehörlose Menschen, deren erste Sprache Gebärdensprache ist ✓ BesucherInnen, die eine andere Muttersprache haben ✓ Menschen, die technische Hilfsmittel benutzen (z.B. Screenreader) ✓ Menschen, die farbenblind sind oder schwache Kontraste nicht sehen können.
  5. 5. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Wen betrifft Barrierefreiheit? Oder?
  6. 6. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
  7. 7. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Wen betrifft Barrierefreiheit? Barrierefreie Websites funktionieren für alle Besucher gut, unabhängig von ➡ Hardware, ➡ Software, ➡ körperlichen Einschränkungen ➡ anderen, eventuell vorübergehenden Schwierigkeiten
  8. 8. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Und wie wird meine Website jetzt barrierefrei?
  9. 9. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Regeln, die viele kennen (1) Überschriften Hierarchisch angeordnete Überschriften – <h1>, <h2>, … WordPress: z.B. Post titles, Widget titles Wer profitiert: Benutzer von Screenreader und Spracherkennungssoftware, SEO
  10. 10. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Link-Text Links: eindeutige Bezeichnung, ohne Kontext verständlich WordPress: „Weiterlesen…“ um einen „sprechenden“ Link für Screenreader ergänzen: the_content( sprintf( __( 'Continue reading%s', 'textdomain' ), '<span class="screen-reader-text"> '.get_the_title().'</span>' ) ); Regeln, die viele kennen (2)
  11. 11. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch ARIA Landmark Roles Seiteninhalte werden in Sektionen unterteilt, denen jeweils eine „Landmark“ zugewiesen wird. 
 So kann man mit dem Screenreader die verschiedenen Landmarks „scannen“. Beispiel: <nav role="navigation" aria-label="<?php _e( 'Primary Navigation','textdomain' ); ?>“> Regeln, die viele kennen (3)
  12. 12. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
  13. 13. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Regeln, die viele kennen … …sind zwar richtig und wichtig, alleine für sich machen sie aber keine barrierefreie Website.
  14. 14. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Barrierefrei. Ungehindert –Ohne Einschränkung Accessibility = „Zugänglichkeit“
  15. 15. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Let’s go.
  16. 16. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Standardkonform. ➡ Semantisch korrekter Code ➡ Trennung von Design und Struktur ➡ Benutze weit verbreitete Standardanwendungen ➡ Beachte die korrekte Reihenfolge von Elementen, die zusammen gehören 
 (bitte nicht unterbrechen, danke!)
  17. 17. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Standardkonform. Denn: ➡ Screenreader lesen von OBEN nach UNTEN ➡ Wenn sich nachträglich OBEN was ändert „merkt“ der Screenreader das nicht. ➡ Wichtiges wird grundsätzlich OBEN erwartet.
  18. 18. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Klare Ziele – klare Struktur ➡ Was ist das Ziel der Website? ➡ Wer wird sie benutzen? ➡ Welche Bedürfnisse haben diese Benutzer, warum kommen sie?
  19. 19. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Klare Ziele – klare Struktur Mobile first trifft Accessibility first: Die Konzentration auf das Wesentliche.
  20. 20. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
  21. 21. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Einfach zu benutzen. ➡ Mit verschiedensten Geräten leicht zu bedienen. ➡ Buttons/Bedienelemente:
 Groß genug und mit ausreichend Weißraum außenrum ➡ Links im selben Fenster öffnen ➡ Keine Elemente, die von selbst starten (Slider, Audio, Video..)
  22. 22. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Einfach zu benutzen. Ein paar Grundsätze für Formulare: ➡ Korrekte Labels ➡ Anweisungen etc. ÜBER dem Formularfeld ➡ Prüfung der Eingabe und Rückmeldung NACH dem Feld ➡ Keine Anwendung mit Zeitlimit, wenn nötig muss man mehr Zeit fordern können
  23. 23. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Einfach zu benutzen. Erfolgserlebnis Respektiere Einstellungen der Besucher Vorhersehbares
 Verhalten Biete Orientierung und Hilfe Viele Wege führen nach Rom
  24. 24. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Orientieren und Wege finden
  25. 25. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Orientieren und Wege finden. Draußen wissen wir, wonach wir suchen müssen: ➡ Verkehrsschilder sind genormt und befinden sich an vorhersehbaren Stellen ➡ Beschilderung an öffentlichen Orten z.B. mit eingeübten Piktogrammen
  26. 26. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Orientieren und Wege finden. Im Web gibt es keine allgemein gültigen Normen: ➡ Navigation sieht häufig sehr unterschiedlich aus ➡ Oft fehlt der Überblick, man sieht nur einen kleinen Ausschnitt. ➡ Auf vielen Websites kann man sich regelrecht „verlaufen“
  27. 27. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Orientieren und Wege finden. Klare und konsistente „Wegweiser“ und Orientierungspunkte geben Sicherheit. ➡ Eindeutige Standortbestimmung (z.B. Breadcrumb) ➡ Klar zu erkennende „Wege zurück“ ➡ Nicht zuletzt: Eine gut funktionierende Suchfunktion
  28. 28. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
  29. 29. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Klare Präsentation
  30. 30. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Klare Präsentation 1. Design ➡ Flexibler Grid –Responsive Design ➡ Flexibles Design ➡ Weißraum. VIEL davon. ➡ Ausreichend große Zeilenabstände ➡ Deutlicher Kontrast
  31. 31. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Klare Präsentation 2. Inhalte ➡ Leicht zu „scannen“ ➡ Logischer Aufbau ➡ Übersichtlich organisieren: ➡ Listen ➡ Kurze Absätze, gute Überschriften ➡ Visuelle Elemente, um Informationen zu verdeutlichen
  32. 32. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Leichte Sprache Ziel: Informationen werden möglichst einfach formuliert Wer profitiert: ✓ Menschen mit Lernstörungen ✓ Menschen, die eine andere Muttersprache haben. ✓ Menschen, die vorübergehend eingeschränkt sind, z.B. durch Müdigkeit, Stress, Krankheit
  33. 33. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Leichte Sprache ➡ Schreibe für Dein Publikum! ➡ Erläutere Fachbegriffe –biete z.B. ein Glossar an ➡ Benutze kurze Sätze und aktive Sprache. ➡ Logische Abläufe ➡ Bei Anwendungen: Erläutere vor jedem Schritt was zu tun ist ➡ Visuelle Elemente zur Verdeutlichung
  34. 34. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Medien Biete verschiedene Möglichkeiten, die Information zu erfassen, also zum Beispiel Video oder Transcript zum Lesen. Lasse Anwendungen nie beim Öffnen der Seite automatisch starten. (Gilt auch für Slider!)
  35. 35. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
  36. 36. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Medien ➡ Schreibe sinnvolle Alt-Attribute: ➡ Leer lassen, falls das Bild nur Deko ist ➡ Kurze inhaltliche Beschreibung, so dass die Bedeutung des Bildes klar wird ➡ Stelle bei Videos Untertitel und Beschreibung zur Verfügung, möglichst Transcript
  37. 37. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch https://www.ted.com/
  38. 38. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch ZIEL
  39. 39. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Zusammenfassung Gut ist: ➡ Klare und übersichtliche Website ➡ Einfach zu bedienen (man nimmt die Navigation quasi nicht wahr).
  40. 40. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Zusammenfassung ➡ Lerne die Besucherinnen und ihre Ziele genau kennen. ➡ Biete nur die wichtigsten Punkte auf der obersten Ebene. ➡ Biete Anleitung und Hilfe zur rechten Zeit ➡ Gib Feedback, zum Beispiel über den Fortschritt bei einer Anwendung
  41. 41. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Zusammenfassung Du gewinnst: ➡ Besucherinnen die sich wohl fühlen und Spaß beim Erkunden haben ➡ Besucherinnen die sich auf ihre Aufgabe konzentrieren und sie abschließen können ➡ Besucherinnen die gerne wieder kommen
  42. 42. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch
  43. 43. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Links zum Nachlesen ✓ http://www.einfach-fuer-alle.de/umsetzen/ ✓ http://www.w3.org/Style/CSS/ ✓ http://www.w3.org/html/ ✓ http://www.w3.org/WAI/ Web Accessibility Initiative ✓ http://www.w3.org/WAI/intro/aria Accessible Rich Internet Applications Suite ✓ https://developer.mozilla.org/de/docs/Web/Barrierefreiheit/ARIA ARIA auf deutsch ✓ (http://zomigi.com/blog/videos-of-screen-readers-using-aria- updated/ Screenreader-videos) ✓ http://www.oaa-accessibility.org/ OpenAjax alliance ✓ http://www.bbc.co.uk/accessibility/Anleitungen für User mit verschiedensten Einschränkungen ✓ Zum Anschauen: http://www.biene-award.de/preistraeger/ ✓ Tutorial: http://code.tutsplus.com/series/accessibility--cms-799
  44. 44. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Lesetipp „A Web For Everyone: Designing Accessible User Experiences“ von Sarah Horton und 
 Whitney Quesenbery, Rosenfeld Media, 1. Auflage 2014 Kindle-Ausgabe
  45. 45. WordCamp Köln 2015 Elisabeth Hölzl | @taxifisch Bildnachweis Crowded Metro by Blake Burkhardt https://www.flickr.com/photos/bburky_/5906522047/ Keeping in Touch by Michael Coghlan https://www.flickr.com/photos/mikecogh/11684068595 Never too old by Michelle Hofstrand https://www.flickr.com/photos/mhofstrand/27021003 Ramp to nowhere by Richard Elzey https://www.flickr.com/photos/elzey/12298142876/ Question mark by drachmas https://www.flickr.com/photos/drachmann/327122302/ Hockenheimring Start Ziel by https://www.flickr.com/photos/newchurch/3634049396/ Lonely Road by Tina https://www.flickr.com/photos/virgin_goddess64/17165043447 Beachy Head Lighthouse by Tom Lee https://www.flickr.com/photos/68942208@N02/16881464508/ Pinsel by See-ming Lee https://www.flickr.com/photos/seeminglee/3967329241

×