Accessible web applications
-
Upload
christian-heilmann -
Category
Design
-
view
10.830 -
download
0
description
Transcript of Accessible web applications
![Page 1: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/1.jpg)
Accessibleweb applica,ons
Chris,an Heilmann ‐ European Accessibility Forum, Frankfurt/Main, 27/03/09
![Page 2: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/2.jpg)
A lot of web applica,ons are not accessible.
![Page 3: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/3.jpg)
There are several reasons for this.
![Page 4: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/4.jpg)
Changing exis,ng web applica,ons is possible,
but a pain.
![Page 5: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/5.jpg)
In a lot of cases, maintainers of web apps are simply not aware of the issues they cause.
![Page 6: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/6.jpg)
hJp://scrip,ngenabled.org/presenta,ons/
So we need to find and tell people the real informa,on.
![Page 7: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/7.jpg)
And then show in easy proof of concepts that the change can happen and have an impact.
![Page 8: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/8.jpg)
![Page 9: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/9.jpg)
This can have a massive impact.
![Page 10: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/10.jpg)
hJp://icant.co.uk/easy‐youtube/
![Page 11: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/11.jpg)
hJp://www.youtube.com/watch?v=CwsDKaalgq8&
hJp://www.youtube.com/watch?v=QiuT0y0KR6I
hJp://www.youtube.com/watch?v=dHBvqwRAduw
![Page 12: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/12.jpg)
hJp://video.yahoo.com
![Page 13: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/13.jpg)
![Page 14: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/14.jpg)
Do you need to be a coding wizard to show how changes can be
made?
![Page 15: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/15.jpg)
hJp://www.nicosteiner.de/archives/118‐YQL,‐YUI‐und‐Yahoo!‐Pipes.html
![Page 16: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/16.jpg)
hJp://developer.yahoo.com/yql/console/
![Page 17: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/17.jpg)
This can help you with an exis,ng app, but what about new ones?
![Page 18: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/18.jpg)
What we should concentrate on is how do we create new apps in a way that is accessible.
![Page 19: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/19.jpg)
Here are some ideas...
![Page 20: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/20.jpg)
Simplicity
![Page 21: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/21.jpg)
List of links?ARIA enabled tab control?
![Page 22: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/22.jpg)
How about radio group?
![Page 23: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/23.jpg)
Data table?Grid control?
![Page 24: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/24.jpg)
What about a heading structure with lists and clever CSS?
![Page 25: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/25.jpg)
Excellence
![Page 26: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/26.jpg)
hJp://developer.yahoo.net/blog/archives/2009/01/accessible_converter.html
hJp://finance.yahoo.com/currency‐converter?u#from=USD;to=GBP;amt=1
![Page 27: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/27.jpg)
Re‐use
![Page 28: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/28.jpg)
Web applica,ons can be built using exis,ng lego
bricks of controls.
![Page 29: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/29.jpg)
We’ve already created all of these bricks in libraries: Dojo, YUI,
jQuery...
![Page 30: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/30.jpg)
And now more and more of those get ARIA
support for accessibility.
![Page 31: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/31.jpg)
hJp://yuiblog.com/blog/category/accessibility/
![Page 32: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/32.jpg)
And we share our findings and ideas.
![Page 33: Accessible web applications](https://reader034.fdocuments.us/reader034/viewer/2022051820/5538b4fa4a795971788b47ca/html5/thumbnails/33.jpg)
All we want is for you to make it worth our while by building upon our
efforts.