Accessibility
  Hacking

  Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org

          Georgia, A...
What is accessibility?
To find this out, let’s start
      with an expert.
Sir Isaac Newton
Portrait of Isaac Newton
Picture of an apple
Right now, we have quite a
big mass of people who care
and talk about accessibility.
we


access
The problem is that a mass is
  not a force without any
 movement or acceleration.
we


                     access

                  F = ma
“the net force on an object is equal to the mass of
    the obj...
This means that if we give this
  mass a push, it becomes a
            force.
we


access
The more we push, the larger
  the force will get, and the
   bigger its impact will be.
we


access
However, this only works,
when we all push in the same
        direction.
we


access
Otherwise, all we do is exert
our strength pushing against
         each other.
We do move the mass, but
  only randomly, and
 eventually it might get
      motion sick.
This is where web
accessibility is right now.
A lot of people are simply
getting sick of the inertia.
Accessibility supporters are
 getting sick of things not
     moving forward.
People seem to be more
interested in checking boxes
   than removing barriers.
Developers get sick of having
   accessibility as a show
          stopper.
Developers are getting sick of
    being told off for not
  following guidelines that
 don’t seem to make sense.
However, we all are ready for
          action.
Accessibility supporters are
 happy to tell people about
the impact of bad usability or
   technical assumptions.
Developers are happy to
 spend hours on solving
      problems...
...right now mostly problems
      they came up with
          themselves.
So what we are really facing
   here is a breakdown of
      communication.
Accessibility is about
 removing barriers.
The web is there for
 everybody, regardless of
physical condition, location,
     or technical setup.
When building web products
people keep forgetting this.
And if they consider it, then
we add extras to make things
  accessible and look, err,
          interesting.
http://www.shopmobilityuk.org/
Put down Frontpage and step
away from the internets, sir.
Accessibility is not about
building extra solutions for
  users with disabilities.
It is about seeing disabilities
as an hard core test case for
         our products.
Making our products free of
  barriers improves the
 experience for all users.
Sometimes this is as easy as
 rethinking a solution and
  getting back to basics.
http://uk.tv.yahoo.com/
http://uk.tv.yahoo.com/
http://finance.yahoo.com/currency-converter?
           u#from=USD;to=EUR;amt=1
http://developer.yahoo.net/blog/archives/
    2009/01/accessible_converter.html
Three things make a really
   accessible solution:
Knowledge about the
     barriers.
A drive to make it a great
experience for everyone.
Being open to find consensus.
Let’s take a tough nut to
          crack.
A friend of mine works for a
   charity of people with
    learning disabilities.
She tried in vain to find a
video player that works for
 the people she cares for.
Until she found me and I
  found the YouTube API:
http://code.google.com/apis/youtube/overview.html
Easy YouTube.
Screenshot of Easy YouTube



 http://icant.co.uk/easy-youtube/?http://
www.youtube.com/watch?v=vkdZmi85gxk
Easy controls
★

    Option to search for videos
★

    Copy and paste video URL to share
★

    Select video size
★

    ...
That’ll never make it to the
  mainstream, though...
Or will it?
Screenshots of uk.video.yahoo.com with and
            without JavaScript




    http://uk.video.yahoo.com/
I earlier used the YouTube API
   to build easy captioning
           interfaces.
I also used the YouTube API
     earlier to build easy
    captioning interfaces.


  http://icant.co.uk/sandbox/youtube-c...
Which inspired others to hack
   their annotations API:
http://www.nihilogic.dk/labs/youtubeannotations/
And again others to build a
 whole web app about it:
http://www.tubecaption.com/watch?v=jpCPvHJ6p90&vcId=137
and maybe, just maybe
YouTube to now offer it
aswell...
        (yeah, I don’t believe it myself either)
The main trick is to make
Flash and JavaScript talk via
            APIs.
Flash accessibility is much
harder than just making the
movie keyboard accessible.
The big issue is that especially
 in Firefox you cannot focus
  the Flash movie with the
           keyboard.
Flash, however, can talk to
    JavaScript and get
        parameters.
If you build your Flash
 component to call outside
 JavaScripts notifying them
about the happenings, sky is
          the ...
If you write out your Flash
 using SWFObject, you can
 send any parameter you
           want.
But what if you don’t have a
 Flash developer or you don’t
have time and money to build
       your own player?
This is where geeks come in.
Geeks like Scott Schiller
Photo of Scott Schiller
Scott works for Flickr, so
naturally he’d spend his free
          time on...
...writing an MP3 player for
         JavaScript.
Using his Soundmanager2,
you can create a player for a
  list of MP3s you link to in
            HTML.
http://www.schillmania.com/projects/soundmanager2/
http://www.schillmania.com/projects/soundmanager2/
http://www.schillmania.com/projects/soundmanager2/
Other geeks found this, and
    started to mix it with
transcripts of music to create
    a Karaoke machine..
http://dt.in.th/2008–05–18.javascript-karaoke-lyric-scroller.html
Seemingly pointless bells and
        whistles...
... but using this you could
build a podcast and transcript
      viewer that works...
... for sensory impaired
visitors and everybody else
             alike!
For video, there’s Jeroen
Wijering who built the JW FLV
        Media Player.
Screenshot of the JW Video Player




http://www.jeroenwijering.com/?item=JW_FLV_Player
Using this, you can embed FLV
 videos easily into web sites
  and have an API to control
             them.
Using the right meta data,
 you can also add audio
descriptions and captions.
Screenshot of the JW player with
         captioning and audio description
        showing a scene from Coronation
       ...
Another area we are seeing
some tweaking in is browser
  and software extensions.
AxsJax or Access-enabling
Ajax is a JavaScript library
that injects ARIA attributes
       into web sites.
http://code.google.com/p/google-axsjax/
WebVisum is a Firefox 3
extension that crowdsources
fixes for web sites – including
 allowing screenreader users
 to fix i...
http://webvisum.com/
IBM’s social accessibility
   project works in a similar
 fashion, except it is a screen
reader extension that reports
 ba...
http://services.alphaworks.ibm.com/socialaccessibility/
The final proof for me that we
     can work together on
    removing barriers was
   throwing the idea out at
  BBC’s Mas...
Photo of me and screenshot of the
    “Easy BBC Audio Archive”




               http://www.flickr.com/photos/arron-woods...
I won a prize – funding for my
      own hack event.
On the 19th and 20th of
September 2008, around a
 100 people listened to 6
       speakers...
... speakers with different
   barriers to the web or
researchers that spoke for
    people with barriers.
On the second day about 30
 hackers took these insights
and built solutions that work
   around these barriers.
We now have
presentations on the
barriers faced by the
   blind, dyslexic,
 learning disabled,
 the impacts of MS
   and a...
The videos of these talks are
 now being transcribed and
    will be online soon.
We have hacks working
 around these issues.
Easy Google Maps
   Reduce to the max
    Easy Audio Books
   Stylesheet Selector
    Accessible Editing
               .....
The energy at the event was
         amazing.
For *nearly 10 hours* we
presented and discussed in
 Q&A sessions on day one.
Hackers didn’t bother with
 presenting and competing
with their hacks from 4–5pm
       as intended...
... but instead stayed till
7.30pm and kept hacking
until we had to leave the
           building!
But the best thing of all is
 seeing what your hack
  enables people to do.
http://www.youtube.com/watch?v=dHBvqwRAduw
 http://www.youtube.com/watch?v=CwsDKaalgq8&
 http://www.youtube.com/watch?v=Qi...
So instead of building the
next “photos on a map with
search results and videos on
        top” hack...
Have a look at what keeps
 people from enjoying the
web because of their physical
         condition.
And remove that barrier!
THANKS!
Keep in touch:
Christian Heilmann
http://wait-till-i.com
http://scriptingenabled.org
http://twitter.com/codepo8
Georgia Tech hacking Accessibility
Georgia Tech hacking Accessibility
Georgia Tech hacking Accessibility
Georgia Tech hacking Accessibility
Georgia Tech hacking Accessibility
Georgia Tech hacking Accessibility
Upcoming SlideShare
Loading in...5
×

Georgia Tech hacking Accessibility

3,174

Published on

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,174
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Georgia Tech hacking Accessibility

  1. 1. Accessibility Hacking Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org Georgia, Atlanta, US, Hack-U Georgia Tech, March 2009
  2. 2. What is accessibility?
  3. 3. To find this out, let’s start with an expert.
  4. 4. Sir Isaac Newton
  5. 5. Portrait of Isaac Newton
  6. 6. Picture of an apple
  7. 7. Right now, we have quite a big mass of people who care and talk about accessibility.
  8. 8. we access
  9. 9. The problem is that a mass is not a force without any movement or acceleration.
  10. 10. we access F = ma “the net force on an object is equal to the mass of the object multiplied by its acceleration.”
  11. 11. This means that if we give this mass a push, it becomes a force.
  12. 12. we access
  13. 13. The more we push, the larger the force will get, and the bigger its impact will be.
  14. 14. we access
  15. 15. However, this only works, when we all push in the same direction.
  16. 16. we access
  17. 17. Otherwise, all we do is exert our strength pushing against each other.
  18. 18. We do move the mass, but only randomly, and eventually it might get motion sick.
  19. 19. This is where web accessibility is right now.
  20. 20. A lot of people are simply getting sick of the inertia.
  21. 21. Accessibility supporters are getting sick of things not moving forward.
  22. 22. People seem to be more interested in checking boxes than removing barriers.
  23. 23. Developers get sick of having accessibility as a show stopper.
  24. 24. Developers are getting sick of being told off for not following guidelines that don’t seem to make sense.
  25. 25. However, we all are ready for action.
  26. 26. Accessibility supporters are happy to tell people about the impact of bad usability or technical assumptions.
  27. 27. Developers are happy to spend hours on solving problems...
  28. 28. ...right now mostly problems they came up with themselves.
  29. 29. So what we are really facing here is a breakdown of communication.
  30. 30. Accessibility is about removing barriers.
  31. 31. The web is there for everybody, regardless of physical condition, location, or technical setup.
  32. 32. When building web products people keep forgetting this.
  33. 33. And if they consider it, then we add extras to make things accessible and look, err, interesting.
  34. 34. http://www.shopmobilityuk.org/
  35. 35. Put down Frontpage and step away from the internets, sir.
  36. 36. Accessibility is not about building extra solutions for users with disabilities.
  37. 37. It is about seeing disabilities as an hard core test case for our products.
  38. 38. Making our products free of barriers improves the experience for all users.
  39. 39. Sometimes this is as easy as rethinking a solution and getting back to basics.
  40. 40. http://uk.tv.yahoo.com/
  41. 41. http://uk.tv.yahoo.com/
  42. 42. http://finance.yahoo.com/currency-converter? u#from=USD;to=EUR;amt=1
  43. 43. http://developer.yahoo.net/blog/archives/ 2009/01/accessible_converter.html
  44. 44. Three things make a really accessible solution:
  45. 45. Knowledge about the barriers.
  46. 46. A drive to make it a great experience for everyone.
  47. 47. Being open to find consensus.
  48. 48. Let’s take a tough nut to crack.
  49. 49. A friend of mine works for a charity of people with learning disabilities.
  50. 50. She tried in vain to find a video player that works for the people she cares for.
  51. 51. Until she found me and I found the YouTube API: http://code.google.com/apis/youtube/overview.html
  52. 52. Easy YouTube.
  53. 53. Screenshot of Easy YouTube http://icant.co.uk/easy-youtube/?http:// www.youtube.com/watch?v=vkdZmi85gxk
  54. 54. Easy controls ★ Option to search for videos ★ Copy and paste video URL to share ★ Select video size ★ Easy Volume Control ★ Option to show a playlist created with del.icio.us ★ Option to search YouTube ★ API to automatically open videos in Easy YouTube ★ Documentation how to host it yourself ★ Open Source ★
  55. 55. That’ll never make it to the mainstream, though...
  56. 56. Or will it?
  57. 57. Screenshots of uk.video.yahoo.com with and without JavaScript http://uk.video.yahoo.com/
  58. 58. I earlier used the YouTube API to build easy captioning interfaces.
  59. 59. I also used the YouTube API earlier to build easy captioning interfaces. http://icant.co.uk/sandbox/youtube-captioning.html
  60. 60. Which inspired others to hack their annotations API:
  61. 61. http://www.nihilogic.dk/labs/youtubeannotations/
  62. 62. And again others to build a whole web app about it:
  63. 63. http://www.tubecaption.com/watch?v=jpCPvHJ6p90&vcId=137
  64. 64. and maybe, just maybe YouTube to now offer it aswell... (yeah, I don’t believe it myself either)
  65. 65. The main trick is to make Flash and JavaScript talk via APIs.
  66. 66. Flash accessibility is much harder than just making the movie keyboard accessible.
  67. 67. The big issue is that especially in Firefox you cannot focus the Flash movie with the keyboard.
  68. 68. Flash, however, can talk to JavaScript and get parameters.
  69. 69. If you build your Flash component to call outside JavaScripts notifying them about the happenings, sky is the limit.
  70. 70. If you write out your Flash using SWFObject, you can send any parameter you want.
  71. 71. But what if you don’t have a Flash developer or you don’t have time and money to build your own player?
  72. 72. This is where geeks come in.
  73. 73. Geeks like Scott Schiller
  74. 74. Photo of Scott Schiller
  75. 75. Scott works for Flickr, so naturally he’d spend his free time on...
  76. 76. ...writing an MP3 player for JavaScript.
  77. 77. Using his Soundmanager2, you can create a player for a list of MP3s you link to in HTML.
  78. 78. http://www.schillmania.com/projects/soundmanager2/
  79. 79. http://www.schillmania.com/projects/soundmanager2/
  80. 80. http://www.schillmania.com/projects/soundmanager2/
  81. 81. Other geeks found this, and started to mix it with transcripts of music to create a Karaoke machine..
  82. 82. http://dt.in.th/2008–05–18.javascript-karaoke-lyric-scroller.html
  83. 83. Seemingly pointless bells and whistles...
  84. 84. ... but using this you could build a podcast and transcript viewer that works...
  85. 85. ... for sensory impaired visitors and everybody else alike!
  86. 86. For video, there’s Jeroen Wijering who built the JW FLV Media Player.
  87. 87. Screenshot of the JW Video Player http://www.jeroenwijering.com/?item=JW_FLV_Player
  88. 88. Using this, you can embed FLV videos easily into web sites and have an API to control them.
  89. 89. Using the right meta data, you can also add audio descriptions and captions.
  90. 90. Screenshot of the JW player with captioning and audio description showing a scene from Coronation Street. http://www.jeroenwijering.com/?item=JW_FLV_Player
  91. 91. Another area we are seeing some tweaking in is browser and software extensions.
  92. 92. AxsJax or Access-enabling Ajax is a JavaScript library that injects ARIA attributes into web sites.
  93. 93. http://code.google.com/p/google-axsjax/
  94. 94. WebVisum is a Firefox 3 extension that crowdsources fixes for web sites – including allowing screenreader users to fix issues themselves and work around CAPTCHAs.
  95. 95. http://webvisum.com/
  96. 96. IBM’s social accessibility project works in a similar fashion, except it is a screen reader extension that reports barriers to volunteers to fix.
  97. 97. http://services.alphaworks.ibm.com/socialaccessibility/
  98. 98. The final proof for me that we can work together on removing barriers was throwing the idea out at BBC’s Mashed08 hack day.
  99. 99. Photo of me and screenshot of the “Easy BBC Audio Archive” http://www.flickr.com/photos/arron-woods/2605302289/
  100. 100. I won a prize – funding for my own hack event.
  101. 101. On the 19th and 20th of September 2008, around a 100 people listened to 6 speakers...
  102. 102. ... speakers with different barriers to the web or researchers that spoke for people with barriers.
  103. 103. On the second day about 30 hackers took these insights and built solutions that work around these barriers.
  104. 104. We now have presentations on the barriers faced by the blind, dyslexic, learning disabled, the impacts of MS and and and... http://scriptingenabled.org/presentations/
  105. 105. The videos of these talks are now being transcribed and will be online soon.
  106. 106. We have hacks working around these issues.
  107. 107. Easy Google Maps Reduce to the max Easy Audio Books Stylesheet Selector Accessible Editing ... http://scriptingenabed.pbwiki.com/
  108. 108. The energy at the event was amazing.
  109. 109. For *nearly 10 hours* we presented and discussed in Q&A sessions on day one.
  110. 110. Hackers didn’t bother with presenting and competing with their hacks from 4–5pm as intended...
  111. 111. ... but instead stayed till 7.30pm and kept hacking until we had to leave the building!
  112. 112. But the best thing of all is seeing what your hack enables people to do.
  113. 113. http://www.youtube.com/watch?v=dHBvqwRAduw http://www.youtube.com/watch?v=CwsDKaalgq8& http://www.youtube.com/watch?v=QiuT0y0KR6I
  114. 114. So instead of building the next “photos on a map with search results and videos on top” hack...
  115. 115. Have a look at what keeps people from enjoying the web because of their physical condition.
  116. 116. And remove that barrier!
  117. 117. THANKS! Keep in touch: Christian Heilmann http://wait-till-i.com http://scriptingenabled.org http://twitter.com/codepo8
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×