Embed Size (px)
DESCRIPTION
Barrierefreiheitstipps für Websites.
Citation preview
BARRIEREFREIHEITzum Mitnehmen und ♥ haben.
Moritz GießmannDevCampKA 2013
https://twitter.com/MoritzGiessmann/status/314453725089525761
@MoritzGiessmannHTML-Fundamentalistmoritz-giessmann.de
Webmontag Karlsruhe
A11Y == Accessibility
11
A11Y == Zugänglichkeit
„Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.“
– W3C Web Accessibility Initiativehttp://www.w3.org/WAI/intro/accessibility.php
A11Y == Usability
http://www.flickr.com/photos/desertbusforhope/8205567002/sizes/o/in/photostream/
ACCESSIBILITY IS THE MOST IMPORTANT THING WHEN WE START
A NEW WEBPROJECT
SAID NO ONE EVER
„Zugängliche Websites werden nur von ganz kleinen Nutzergruppen benötigt, die vernachlässigt werden können.“
– Random Productmanager
http://www.who.int/mediacentre/factsheets/fs352/en/index.html
Einer von sieben Menschen hat eine Behinderung 15%
„Der Kunde bezahlt uns die Zugänglichkeitsfeatures nicht, wir können uns das nicht leisten.“
– Random Productmanager
SO YOUR CLIENTS PAY YOU FOR UNACCESSIBILTY FEATURES?
A11Y ist für Menschen mit Behinderungen?
A11Y ist für ALLE**Es ist nur eine Frage der Zeit, wann sie für uns wichtig wird.
„The first Web pages ever were responsive from the start [...] also accessible by default. We do things [...] to make them un-responsive and un-accessible.Instead of talking about making Web pages accessible and responsive, we need to talk about keeping Web pages accessible and responsive.“
– Jeremy Keith
*Folie die mir sagen soll, dass die nächste eine mit Video und Sound ist. Also nicht unbedarft weiterklicken.*
Die erste Website: im Screenreader und responsive.http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
ProgressiveEnhancement
HTML5 CSS3
Texte Farben Tastatur
1. Progressive Enhancement
„You start by establishing a basic level of user experience that all browsers will be able to provide when rendering your web site, but you also build in more advanced functionality that will automatically be available to browsers that can use it.“
– W3C Blog
„Don’t interfere with default browser behavior. Don’t create a form inside a canvas just because you can“
– Eric EggertVortrag bei Beyond Tellerrand Play 2012
http://alistapart.com/article/understandingprogressiveenhancement
2. HTML(5)
<input type=“text“>
<label for=“name“>Name</label><input type=“text“ id=“name“>
!
Screenreader Element
.scr-element {position: absolute;left: -9999px;
}
Hide label on focushttp://codepen.io/MoritzGiessmann/pen/IwnvJ
„Every time you use display:none, a kitten dies.“
– Jeremy Keith
Sprachauszeichnungen<span lang=“en“>Download</span>
Abkürzungen<abbr title=“light amplification by stimulated emission of radiation “ lang=“en“>Laser</abbr>
Neue Strukturelemente & Aria landmark roles
<header> <footer> <aside> <section> <article>
role=“main“, role=“contentinfo“, role=“banner“, role=“form“, role=“complementary“, role=“navigation“
http://www.youtube.com/watch?v=IhWMou12_Vk
3. CSS3
WenigerSchrott
4. Grafiken
1.Welchen Zweck erfüllt das Bild?
2. Welchen Inhalt bietet das Bild?
3. Wenn das Bild nicht angezeigt wird, geht eine wichtige Aussage verloren?
<img src=“#“ alt=“Beschreibung“>
Foto, Logo, Sonstige Grafik die für den Inhalt wichtig ist
Schmuckgrafik, Hintergrundbild <span class=“bg“>Text</span><img src=“#“ alt=““>
Funktionsgrafik<a class=“ico-home“>Home</a> (text-indent:-9999px)<a href=“#“><img src=“#“ alt=“Artikel lesen“></a>
Grafik mit Text <img src=“#“ alt=“Text der grafik“>
5. Farben
http://leaverou.github.com/contrast-ratio/ http://snook.ca/technical/colour_contrast/colour.html
Farbe !== alleiniges Unterscheidungsmerkmal
Fehlermeldungen: Text+Icon+Farbe!
Kontrast!
6. Tastatur
Sichtbarer Fokus
Niemals :focus{outline: none}
a:hover, a:focus {text-decoration:underline;
}
Kann man bestimmt auf der Folie nicht lesen:*:before {
content:'I can has CSS-generated content';}
Skiplinkshttp://jsfiddle.net/MoritzGiessmann/DFrVC/
LIVEDEMO TIME!www.eyeworkers.de mit der Tastatur und einem Screenreader bedient.
Skiplinkshttp://jsfiddle.net/MoritzGiessmann/DFrVC/
LIVEDEMO TIME!
Zusammenfassung
1. Progressive Enhancement2. Neues HTML verwenden (<inputs> brauchen <label>!111einself)3. @font-face und CSS3 statt
Bildern/Flash/Canvas whatever4. Grafiken je nach Funktion mit Texten
versehen5. Farben nicht zur alleinigen Kennzeichnung verwenden6. Tastaturbedienbarkeit rockt!
MEHR! Web Content Accessibility Guidelines
http://www.w3.org/TR/WCAG/
Barrierefreie Informationstechnik-Verordnunghttp://www.gesetze-im-internet.de/bitv_2_0/
Barrierefreiheit verstehen und umsetzen (Buch)http://www.dpunkt.de/buecher/2537.html
WCAG in leicht zu Verstehenhttp://www.3pha.com/wcag2/4
Videos von WAI-ARIA Testshttp://www.flickr.com/photos/martin-kliehm/sets/72157610155705200/with/3724648166/
Danke =)@MoritzGiessmannmoritz-giessmann.de
Folien:Slideshare.net/MoritzGiessmann
Nächster Webmontag Karlsruhe13. Mai 2013, 19:00 UhrHoepfner Schalander
http://www.flickr.com/photos/39337180@N04/8040943907/sizes/k/in/photostream/
