Barrierefreiheit im
Netz der Daten
Chris2an Heilmann, Best of Accessibility, Duesseldorf, September 2009

Webentwickler habens
schwer.

Barrierefreiheit ist
eigentlich einfach.

Ein Problem ist das das
“Problem Barrierefreiheit”
auf uns abgeschoben wird.

Und wenn wir dann etwas
fast barrierefrei erstellt
haben meckern
hauptsächlich andere
Entwickler...

Die Hauptursache fuer
dieses Dilemma ist das wir
das Web falsch anpacken.

Web Technologie ist nicht
so schlecht wie wir sie
immer darstellen...

160x200 Aufloesung
16 Farben
4 Farben in jedem 8x8 Block

Web Technologien sind gut
genug ‐ wenn man sie
rich2g anwendet.

hVp://uk.tv.yahoo.com

hVp://uk.tv.yahoo.com

hVp://finance.yahoo.com/currency‐converter?
u#from=USD;to=EUR;amt=1

Screenshot of a currency converter with
and without JavaScript. With JavaScript you
get autosuggestions.

hVp://developer.yahoo.net/blog/archives/2009/01/
accessible_converter.html

Das Web ist nicht die Seite

Das Web ist nicht der code

Das Web besteht aus
leckeren Daten!

Zugang zu diesen Daten zu
erlauben bedeutet
Barrierefreiheit.

Um Daten einfach zu
verwalten, macht es Sinn
sie im Netz zu verteilen.

CMS

CMS
Tags, Comments, Connections, Embeds

Indem wir die Daten und
die Darstellung
voneinander trennen,
können wir aufzeigen, wie
barrierefreie Lösungen
aussehen.

Easy Flickr screenshot
showing donkeys
hVp://icant.co.uk/easy‐flickr/index.php?s=donkeys

hVp://icant.co.uk/easy‐youtube/?hVp://
www.youtube.com/watch?v=vkdZmi85gxk

Einfache Bedienungen
Suchfunk2on
Copy+Paste URL zum weiterleiten
Verschiedene Videogrössen
Einfache Lautstärkenregelung
Playlist miVels Del.icio.us
YouTube Suche
Open Source

hVp://www.youtube.com/watch?v=CwsDKaalgq8
hVp://www.youtube.com/watch?v=QiuT0y0KR6I

hVp://www.slideshare.net/hi.antonia/rich‐media‐and‐
web‐apps‐for‐people‐with‐learning‐disabili2es

hVp://video.yahoo.com

Trick #1 mit Flash:
Abspielknöpfe ausserhalb
des Filmes ablegen!

hVp://www.schillmania.com/projects/soundmanager2/

hVp://dt.in.th/2008‐05‐18.javascript‐karaoke‐lyric‐scroller.html

Screenshot of the JW Video Player
hVp://www.jeroenwijering.com/?item=JW_FLV_Player

hVp://icant.co.uk/sandbox/youtube‐cap2oning.html

hVp://www.youtube.com/watch?v=_vJlADxbv4U&

DE
AD
hVp://www.nihilogic.dk/labs/youtubeannota2ons/

DE
AD
hVp://www.tubecap2on.com/watch?
v=jpCPvHJ6p90&vcId=137

Das Internet zu ändern ist
schwierig.

Redesigns von Webseiten
gehen meistens in die Hose.

Menschen lernen am
besten indem sie mit
etwas spielen.

Auch ihr könnt mit dem
Web spielen und etwas
Neues erstellen.

Eines meiner
Lieblingsspielzeuge.

Picture of
Artur Ortega
hVp://www.flickr.com/photos/redux/2474124685/

hVp://icanhaz.com/twiVerwithlang

hVp://www.wait‐2ll‐i.com/2008/11/23/show‐the‐world‐your‐
twiVer‐type‐using‐php‐and‐google‐charts/

hVp://www.nicosteiner.de/archives/118‐YQL,‐YUI‐und‐
Yahoo!‐Pipes.html

hVp://pipes.yahoo.com

YQL hVp://developer.yahoo.com/yql/console/

YQL hVp://developer.yahoo.com/yql/console/
select {was} from {wo}
where {kondi2onen}

hVp://isithackday.com/hacks/frankfurt

Kobayashi Maru

select * from html
where
url="http://faz.de" and
xpath="//h2 "

select * from
google.translate where q in (
select a from html where
url="http://faz.de"
and xpath="//h2"
) and target="en"

select title from
twitter.user.timeline where
title like "%http%" and
id="codepo8" or id="ydn"

Vorteile von YQL
๏ APIs einfach mischen
๏ Resultate ausfiltern
๏ Einfache API Anmeldung
๏ Als Konsole oder Code
๏ Dokumenta2on inklusive
๏ Yahoos server als proxy
und Zugang.

HTML als Datenquelle?
hVp://www.dcs.gla.ac.uk/~joy/fun/jokes/TV.html

hVp://isithackday.com/hacks/scraping‐with‐yql/

Zeigt her eure Daten...
hVp://developer.yahoo.com/yql/guide/yql‐opentables‐chapter.html

INSERT INTO bitly.shorten (login, apiKey, longUrl) VALUES ('USERNAME', 'API_KEY', 'hVp://
yahoo.com')
hVp://developer.yahoo.com/yql/guide/yql‐iud‐statements.html

http://github.com/spullara/yql-tables/tree/master

Und was hily uns beim
Webseiten erstellen?

Libraries.
(...)

ARIA

hVp://www.paciellogroup.com/blog/?cat=23
hVp://paciellogroup.com/blog/misc/ARIA/atmedia2008/

ARIA

hVp://yuiblog.com/blog/category/accessibility/

hVp://code.google.com/p/google‐axsjax/

hVp://code.google.com/p/majx‐js/

Zeigt, was in euch steckt...

Und hely Leuten wie mir
das web weiter zu
entwickeln und dabei nicht
Barrieren zu erstellen.
HTML5? Canvas?
Chrome Frame?

Man braucht nicht alles
alleine zu machen. Wir alle
wollen das gleiche ‐ ein
Web, das funk2oniert.

Chris2an Heilmann
hVp://wait‐2ll‐i.com
Danke!
hVp://developer‐evangelism.com
hVp://twiVer.com/codepo8