1. Accessibility
Hacking
Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org
Georgia, Atlanta, US, Hack-U Georgia Tech, March 2009

2. What is accessibility?

3. To find this out, let’s start
with an expert.

4. Sir Isaac Newton

5. Portrait of Isaac Newton

6. Picture of an apple

7. Right now, we have quite a
big mass of people who care
and talk about accessibility.

8. we
access

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

10. we
access
F = ma
“the net force on an object is equal to the mass of
the object multiplied by its acceleration.”

11. This means that if we give this
mass a push, it becomes a
force.

12. we
access

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

14. we
access

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

16. we
access

17. Otherwise, all we do is exert
our strength pushing against
each other.

18. We do move the mass, but
only randomly, and
eventually it might get
motion sick.

19. This is where web
accessibility is right now.

20. A lot of people are simply
getting sick of the inertia.

21. Accessibility supporters are
getting sick of things not
moving forward.

22. People seem to be more
interested in checking boxes
than removing barriers.

23. Developers get sick of having
accessibility as a show
stopper.

24. Developers are getting sick of
being told off for not
following guidelines that
don’t seem to make sense.

25. However, we all are ready for
action.

26. Accessibility supporters are
happy to tell people about
the impact of bad usability or
technical assumptions.

27. Developers are happy to
spend hours on solving
problems...

28. ...right now mostly problems
they came up with
themselves.

29. So what we are really facing
here is a breakdown of
communication.

30. Accessibility is about
removing barriers.

31. The web is there for
everybody, regardless of
physical condition, location,
or technical setup.

32. When building web products
people keep forgetting this.

35. And if they consider it, then
we add extras to make things
accessible and look, err,
interesting.

36. http://www.shopmobilityuk.org/

37. Put down Frontpage and step
away from the internets, sir.

38. Accessibility is not about
building extra solutions for
users with disabilities.

39. It is about seeing disabilities
as an hard core test case for
our products.

40. Making our products free of
barriers improves the
experience for all users.

41. Sometimes this is as easy as
rethinking a solution and
getting back to basics.

42. http://uk.tv.yahoo.com/

43. http://uk.tv.yahoo.com/

44. http://finance.yahoo.com/currency-converter?
u#from=USD;to=EUR;amt=1

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

46. Three things make a really
accessible solution:

47. Knowledge about the
barriers.

48. A drive to make it a great
experience for everyone.

49. Being open to find consensus.

50. Let’s take a tough nut to
crack.

52. A friend of mine works for a
charity of people with
learning disabilities.

53. She tried in vain to find a
video player that works for
the people she cares for.

54. Until she found me and I
found the YouTube API:
http://code.google.com/apis/youtube/overview.html

55. Easy YouTube.

56. Screenshot of Easy YouTube
http://icant.co.uk/easy-youtube/?http://
www.youtube.com/watch?v=vkdZmi85gxk

57. 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
★

58. That’ll never make it to the
mainstream, though...

59. Or will it?

60. Screenshots of uk.video.yahoo.com with and
without JavaScript
http://uk.video.yahoo.com/

62. I earlier used the YouTube API
to build easy captioning
interfaces.

63. I also used the YouTube API
earlier to build easy
captioning interfaces.
http://icant.co.uk/sandbox/youtube-captioning.html

64. Which inspired others to hack
their annotations API:

65. http://www.nihilogic.dk/labs/youtubeannotations/

66. And again others to build a
whole web app about it:

67. http://www.tubecaption.com/watch?v=jpCPvHJ6p90&vcId=137

68. and maybe, just maybe
YouTube to now offer it
aswell...
(yeah, I don’t believe it myself either)

70. The main trick is to make
Flash and JavaScript talk via
APIs.

71. Flash accessibility is much
harder than just making the
movie keyboard accessible.

72. The big issue is that especially
in Firefox you cannot focus
the Flash movie with the
keyboard.

73. Flash, however, can talk to
JavaScript and get
parameters.

74. If you build your Flash
component to call outside
JavaScripts notifying them
about the happenings, sky is
the limit.

75. If you write out your Flash
using SWFObject, you can
send any parameter you
want.

76. But what if you don’t have a
Flash developer or you don’t
have time and money to build
your own player?

77. This is where geeks come in.

78. Geeks like Scott Schiller

79. Photo of Scott Schiller

80. Scott works for Flickr, so
naturally he’d spend his free
time on...

81. ...writing an MP3 player for
JavaScript.

82. Using his Soundmanager2,
you can create a player for a
list of MP3s you link to in
HTML.

83. http://www.schillmania.com/projects/soundmanager2/

84. http://www.schillmania.com/projects/soundmanager2/

85. http://www.schillmania.com/projects/soundmanager2/

86. Other geeks found this, and
started to mix it with
transcripts of music to create
a Karaoke machine..

87. http://dt.in.th/2008–05–18.javascript-karaoke-lyric-scroller.html

88. Seemingly pointless bells and
whistles...

89. ... but using this you could
build a podcast and transcript
viewer that works...

90. ... for sensory impaired
visitors and everybody else
alike!

91. For video, there’s Jeroen
Wijering who built the JW FLV
Media Player.

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

93. Using this, you can embed FLV
videos easily into web sites
and have an API to control
them.

94. Using the right meta data,
you can also add audio
descriptions and captions.

95. Screenshot of the JW player with
captioning and audio description
showing a scene from Coronation
Street.
http://www.jeroenwijering.com/?item=JW_FLV_Player

96. Another area we are seeing
some tweaking in is browser
and software extensions.

97. AxsJax or Access-enabling
Ajax is a JavaScript library
that injects ARIA attributes
into web sites.

98. http://code.google.com/p/google-axsjax/

99. WebVisum is a Firefox 3
extension that crowdsources
fixes for web sites – including
allowing screenreader users
to fix issues themselves and
work around CAPTCHAs.

100. http://webvisum.com/

101. IBM’s social accessibility
project works in a similar
fashion, except it is a screen
reader extension that reports
barriers to volunteers to fix.

102. http://services.alphaworks.ibm.com/socialaccessibility/

103. The final proof for me that we
can work together on
removing barriers was
throwing the idea out at
BBC’s Mashed08 hack day.

104. Photo of me and screenshot of the
“Easy BBC Audio Archive”
http://www.flickr.com/photos/arron-woods/2605302289/

105. I won a prize – funding for my
own hack event.

107. On the 19th and 20th of
September 2008, around a
100 people listened to 6
speakers...

108. ... speakers with different
barriers to the web or
researchers that spoke for
people with barriers.

109. On the second day about 30
hackers took these insights
and built solutions that work
around these barriers.

110. 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/

111. The videos of these talks are
now being transcribed and
will be online soon.

112. We have hacks working
around these issues.

113. Easy Google Maps
Reduce to the max
Easy Audio Books
Stylesheet Selector
Accessible Editing
...
http://scriptingenabed.pbwiki.com/

114. The energy at the event was
amazing.

115. For *nearly 10 hours* we
presented and discussed in
Q&A sessions on day one.

116. Hackers didn’t bother with
presenting and competing
with their hacks from 4–5pm
as intended...

117. ... but instead stayed till
7.30pm and kept hacking
until we had to leave the
building!

118. But the best thing of all is
seeing what your hack
enables people to do.

119. http://www.youtube.com/watch?v=dHBvqwRAduw
http://www.youtube.com/watch?v=CwsDKaalgq8&
http://www.youtube.com/watch?v=QiuT0y0KR6I

120. So instead of building the
next “photos on a map with
search results and videos on
top” hack...

121. Have a look at what keeps
people from enjoying the
web because of their physical
condition.

122. And remove that barrier!

123. THANKS!
Keep in touch:
Christian Heilmann
http://wait-till-i.com
http://scriptingenabled.org
http://twitter.com/codepo8