Again with the Ajax accessibility
-
Upload
christian-heilmann -
Category
Technology
-
view
8.439 -
download
0
description
Transcript of Again with the Ajax accessibility
![Page 1: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/1.jpg)
Again with the Ajax accessibility
Christian Heilmann, AbilityNet, July 2008
Thanks to: Gez Lemon, Steven Faulkner, Paciello Group, BBC, Gartner research.
![Page 2: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/2.jpg)
I am here to talk about Ajax and accessibility.
![Page 3: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/3.jpg)
Especially in a web2.0 context.
![Page 4: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/4.jpg)
I can do that, but I have no clue if I can reach you.
![Page 5: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/5.jpg)
Therefore I will give you lots of information to look up as
your own homework.
![Page 6: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/6.jpg)
Cause there’s one thing about good development and
accessibility that you should know:
![Page 7: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/7.jpg)
It is up to you to make things better.
![Page 8: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/8.jpg)
No shortcuts,
no silver bullets.
![Page 9: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/9.jpg)
You need to want to learn and constantly keep your
eyes open to make this work.
![Page 10: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/10.jpg)
What is Ajax, and what are the problems with it?
![Page 11: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/11.jpg)
Ajax means loading information and updating an
interface partially.
![Page 12: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/12.jpg)
This is great for usability:
Shorter loading times.
A real application interface.
![Page 13: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/13.jpg)
It is however not how the web was planned to work.
![Page 14: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/14.jpg)
Back button.
![Page 15: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/15.jpg)
State Retention.
![Page 16: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/16.jpg)
Informing the user.
![Page 17: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/17.jpg)
Interaction with assistive technology.
![Page 18: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/18.jpg)
Any good interaction with any interface gives the user feedback as to what is going
on.
![Page 19: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/19.jpg)
If you load content with Ajax, change the interactive
element that initiated the loading process.
![Page 20: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/20.jpg)
When the information was successfully retrieved,
change the interface and the original element.
![Page 21: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/21.jpg)
Beware, though.
![Page 22: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/22.jpg)
Connections are flaky, things break.
![Page 23: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/23.jpg)
Your implementation should plan for this.
![Page 24: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/24.jpg)
Have a timeout that stops the Ajax malarkey and just loads the real document or view of
your application.
![Page 25: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/25.jpg)
Usability tips for this:http://developer.yahoo.com/ypatterns
![Page 26: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/26.jpg)
Screenreader tips for this:http://juicystudio.com/article/making-ajax-work-with-
screen-readers.php
![Page 27: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/27.jpg)
Back button and application state:
http://developer.yahoo.com/yui/history
![Page 28: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/28.jpg)
However, this does not mean that assistive technology knows that things have
changed...
![Page 29: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/29.jpg)
Screen readers are elephants.
They are big, cost a lot and have quite a memory.
![Page 30: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/30.jpg)
When the page loads, the screen reader takes a
snapshot.
![Page 31: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/31.jpg)
This is what it looks at – if you change the page, that doesn’t
mean a thing.
![Page 32: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/32.jpg)
In order to make screen readers know something
went on, you need to entice them to take another
snapshot.
![Page 33: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/33.jpg)
This is really easy – simply change the value of any form
field on the page.
![Page 34: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/34.jpg)
Improving Ajax applications for Jaws:
http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php
![Page 35: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/35.jpg)
This is all there is to Ajax and accessibility.
![Page 36: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/36.jpg)
What people consider Ajax is another issue though.
![Page 37: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/37.jpg)
Web applications are simulated applications.
![Page 38: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/38.jpg)
HTML is not semantically rich enough to describe
applications.
![Page 39: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/39.jpg)
One way out:
ARIA
![Page 40: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/40.jpg)
http://www.paciellogroup.com/blog/?cat=23
http://www.paciellogroup.com/blog/misc/ARIA/atmedia2008/
![Page 41: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/41.jpg)
![Page 42: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/42.jpg)
What about web2.0 features?
![Page 43: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/43.jpg)
web2.0 is *not* a technology.
![Page 44: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/44.jpg)
web2.0 is a mindset
![Page 45: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/45.jpg)
It is about opening your applications to the world and
create a read+write web.
![Page 46: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/46.jpg)
It is about giving up control and trust others to enrich
what you offer.
![Page 48: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/48.jpg)
http://news.bbc.co.uk/1/hi/technology/7501073.stm
http://www.gartner.com/it/page.jsp?id=718107
![Page 49: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/49.jpg)
Technically you do this by using web2.0 applications for
good.
![Page 50: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/50.jpg)
Web2.0 is there to collaborate and the collect feedback.
![Page 51: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/51.jpg)
You can consume the outcome on the site or in any format you need via APIs and
mashups.
![Page 52: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/52.jpg)
Example: Flickr annotation.
![Page 53: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/53.jpg)
Example: Easy YouTube
![Page 54: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/54.jpg)
Screenshot of
Easy Youtube
http://icant.co.uk/easy-youtube/
![Page 55: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/55.jpg)
Collaboration and “crowdsourcing” can even
make people remove barriers themselves.
![Page 56: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/56.jpg)
http://services.alphaworks.ibm.com/socialaccessibility/http://webvisum.com/
![Page 57: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/57.jpg)
It’s a sweet ride.
Join us.
![Page 58: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/58.jpg)
Self promotion time:
Scripting Enabled19th/20th of September 2008
Metropolitan University, London
http://scriptingenabled.org
![Page 59: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/59.jpg)
Self promotion time:
Scripting Enabled19th/20th of September 2008
Metropolitan University, London
http://scriptingenabled.org
![Page 60: Again with the Ajax accessibility](https://reader033.fdocuments.us/reader033/viewer/2022060111/556624bbd8b42a61238b4e54/html5/thumbnails/60.jpg)
THANKS
Christian Heilmann
http://wait-till-i.com
http://scriptingenabled.org
http://twitter.com/codepo8