Barrierefreiheit zum Mitnehmen und Liebhaben

BARRIEREFREIHEITzum Mitnehmen und ♥ haben.

Moritz GießmannDevCampKA 2013

https://twitter.com/MoritzGiessmann/status/314453725089525761

http://www.pirmasens.de/

Von einem Screenreader vorgelesen.

http://www.klampfer.at Von einem Screenreader vorgelesen.

@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

1.HTML2.CSS3.JavaScript

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

@font-face!Endlich ist Text wieder Text :)

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/