Barrierefreiheit Im Datennetz

Christian Heilmann
Christian HeilmannSenior Program Manager Developer Experience and Evangelism at Microsoft
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
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
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.
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
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!
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Zugang zu diesen Daten zu 
erlauben bedeutet 
Barrierefreiheit.
Barrierefreiheit Im Datennetz
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
Barrierefreiheit Im Datennetz
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
Barrierefreiheit Im Datennetz
Trick #1 mit Flash:
Abspielknöpfe ausserhalb 
des Filmes ablegen!
hVp://www.schillmania.com/projects/soundmanager2/
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
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
Barrierefreiheit Im Datennetz
hVp://icant.co.uk/sandbox/youtube‐cap2oning.html
Barrierefreiheit Im Datennetz
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.
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Picture of
     Artur Ortega



hVp://www.flickr.com/photos/redux/2474124685/
hVp://icanhaz.com/twiVerwithlang
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
hVp://www.wait‐2ll‐i.com/2008/11/23/show‐the‐world‐your‐
        twiVer‐type‐using‐php‐and‐google‐charts/
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
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}
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
hVp://isithackday.com/hacks/frankfurt
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
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
Barrierefreiheit Im Datennetz
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   
1 of 108

Recommended

Symbole by
Symbole Symbole
Symbole deutschonline
1.3K views11 slides
Am Ende ist doch alles HTML - 2012 - Webmontag Edition by
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionJens Grochtdreis
1.4K views42 slides
Building a better web with free, open technologies (no notes version) by
Building a better web with free, open technologies (no notes version)Building a better web with free, open technologies (no notes version)
Building a better web with free, open technologies (no notes version)Christian Heilmann
1.2K views65 slides
Sg Phone Powerpoint by
Sg Phone PowerpointSg Phone Powerpoint
Sg Phone PowerpointAli G
537 views10 slides
Giving Technology To The World by
Giving Technology To The WorldGiving Technology To The World
Giving Technology To The WorldChristian Heilmann
1.1K views53 slides
Lurdes Aranguren by
Lurdes ArangurenLurdes Aranguren
Lurdes ArangurenJoxe
519 views23 slides

More Related Content

Similar to Barrierefreiheit Im Datennetz

Knockin' on heaven's door - Die Praxis zu Besuch beim W3C by
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CJens Grochtdreis
1.9K views76 slides
Von Dinosauriern, Bienen und Wespen by
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenTomas Caspers
1.3K views74 slides
Von Dinosauriern, Bienen und Wespen by
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenJens Grochtdreis
750 views74 slides
HTML5-Legacy-Anwendungen by
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenJonathan Weiß
908 views68 slides
German: Softwareprodukte aus einem Source Code mit Javascript by
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptRalf Schwoebel
1.1K views44 slides
Augmented Reality Workshop by
Augmented Reality WorkshopAugmented Reality Workshop
Augmented Reality Workshopargency
378 views42 slides

Similar to Barrierefreiheit Im Datennetz(20)

Knockin' on heaven's door - Die Praxis zu Besuch beim W3C by Jens Grochtdreis
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Jens Grochtdreis1.9K views
Von Dinosauriern, Bienen und Wespen by Tomas Caspers
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
Tomas Caspers1.3K views
German: Softwareprodukte aus einem Source Code mit Javascript by Ralf Schwoebel
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
Ralf Schwoebel1.1K views
Augmented Reality Workshop by argency
Augmented Reality WorkshopAugmented Reality Workshop
Augmented Reality Workshop
argency378 views
Technische SEO Probleme finden mit Tools by Timon Hartung
Technische SEO Probleme finden mit ToolsTechnische SEO Probleme finden mit Tools
Technische SEO Probleme finden mit Tools
Timon Hartung6.3K views
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps by Gregor Biswanger
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger1.4K views
Sencha Touch & PhoneGap by Stefan Kolb
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
Stefan Kolb1.6K views
JavaScript Days 2015: Security by Mayflower GmbH
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: Security
Mayflower GmbH5.1K views
Rails i18n - Railskonferenz 2007 by jan_mindmatters
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
jan_mindmatters1.2K views
I thought you were my friend! by Mario Heiderich
I thought you were my friend!I thought you were my friend!
I thought you were my friend!
Mario Heiderich1.7K views
Am Ende ist doch alles HTML (Jax 2010) by Jens Grochtdreis
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
Jens Grochtdreis941 views
Die Pest - philosophische Betrachtungen zur Webentwicklung by Jens Grochtdreis
Die Pest - philosophische Betrachtungen zur WebentwicklungDie Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur Webentwicklung
Jens Grochtdreis1.3K views
Am Ende ist doch alles HTML (Uni Mainz) by Jens Grochtdreis
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
Jens Grochtdreis2K views

More from Christian Heilmann

Develop, Debug, Learn? - Dotjs2019 by
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Christian Heilmann
1.1K views55 slides
Hinting at a better web by
Hinting at a better webHinting at a better web
Hinting at a better webChristian Heilmann
2.8K views33 slides
Taking the "vile" out of privilege by
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
1K views64 slides
Seven ways to be a happier JavaScript developer - NDC Oslo by
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloChristian Heilmann
1.5K views52 slides
Artificial intelligence for humans… #AIDC2018 keynote by
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteChristian Heilmann
1.2K views56 slides
Killing the golden calf of coding - We are Developers keynote by
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteChristian Heilmann
3.1K views35 slides

More from Christian Heilmann(20)

Seven ways to be a happier JavaScript developer - NDC Oslo by Christian Heilmann
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
Christian Heilmann1.5K views
Artificial intelligence for humans… #AIDC2018 keynote by Christian Heilmann
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
Christian Heilmann1.2K views
Killing the golden calf of coding - We are Developers keynote by Christian Heilmann
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
Christian Heilmann3.1K views
Five ways to be a happier JavaScript developer by Christian Heilmann
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
Christian Heilmann859 views
Progressive Web Apps - Covering the best of both worlds - DevReach by Christian Heilmann
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
Christian Heilmann956 views
Progressive Web Apps - Covering the best of both worlds by Christian Heilmann
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Christian Heilmann799 views
Non-trivial pursuits: Learning machines and forgetful humans by Christian Heilmann
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
Christian Heilmann531 views
Progressive Web Apps - Bringing the web front and center by Christian Heilmann
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
Christian Heilmann1.2K views
The Soul in The Machine - Developing for Humans (FrankenJS edition) by Christian Heilmann
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
Christian Heilmann917 views

Barrierefreiheit Im Datennetz