Accessible Design

Stand up lunchtime session at Europeana, on 15th February 2013. Showing improvements that can be made to a web page that is inaccessible to many, and showing how accessible design is beneficial for all, and not just people with disabilities.

The map is available here: http://deanbirkett.name/playground/europeana/more_accessible_map/

* yes, there are still improvements to be made :)

Transcript

1. deanbirkett Accessible Design
2. 165 cm - 178 cm 5’4” - 5’10” Sample average height of 23 European countries source: Wikipedia - http://en.wikipedia.org/wiki/Human_height
3. Counter accessibility - http://www.ehow.com/about_6743476_standard-kitchen-countertop-height.html source: Wikipedia - http://en.wikipedia.org/wiki/Door (UK size) 91.4 cm 198 cm 6’6” 165 cm - 178 cm 5’4” - 5’10”
4. Sample of 23 countries across Europe extremes extremes
5. Counter accessibility - http://www.ehow.com/about_6743476_standard-kitchen-countertop-height.html Step stool- http://s.shld.net/is/image/Sears/spin_prod_724972901
6. Counter accessibility - http://www.ehow.com/about_6743476_standard-kitchen-countertop-height.html Step stool- http://s.shld.net/is/image/Sears/spin_prod_724972901
7. Counter accessibility - http://www.ehow.com/about_6743476_standard-kitchen-countertop-height.html Step stool- http://s.shld.net/is/image/Sears/spin_prod_724972901
8. Real World Solutions to Real World Problems source: Wikipedia Commons - http://commons.wikimedia.org/wiki/File:Earth_Western_Hemisphere.jpg
9. 0100111010101110010100101001010010010101101010 1110010101010101110010100101001010010011010101 1100101001010010100100110101011100101001010010 1001001101010111001010010100101001001101010111 0010100101001010010010101101010101011100101001 0100101001001101010111001101010111001010010100 1010010011010101110010100101001010010010100101 0010100100110101110010100101001010010011010111 0010100101001010010010010100100110101011010101 1100101001010010100100111000000101001011010101 1100101001010010101010101110010100101001010010 0101001001010010010111001011010101110010100101 0010100100110101011100101001010010100100110101 0111001010010100101001001010111001010010100101 1010101110010110101011100101001010010100100110 1010111001010010100101001001001010010100100110 1010111001010010100101001001001001101001010010 1001001101011100101001010010100100110101011100 Digital World Solutions to Digital World Problems
10. The major categories of disability Visual Blindness, low vision, colour blindness Hearing Deafness Motor Inability to use a mouse, slow response time, limited fine motor control Cognitive Learning disabilities, distractibility, inability to remember or focus on large amounts of information icons: Wikimedia Commons information source: WebAIM - http://webaim.org/intro/
11. Assistive technology
12. I don't care about accessibility. People with disabilities are not in my target audience. quote: W3C - http://www.w3.org/QA/2002/04/Web-Quality
13. Around 10 percent of the world’s population, or 650 million people, live with a disability. They are the world’s largest minority. -- The United Nations “ source: http://www.un.org/disabilities/default.asp?id=18
14. DISABILITY DISABILITY
15. DISABILITY DISABILITY
16. Ideally, of course, all websites, interfaces and apps would be fully accessible; not just these essential public services. And indeed I hope that the momentum from our initiative will spill over into some of those other areas -- Neelie Kroes, Vice-President of the European Commission “ source: http://blogs.ec.europa.eu/neelie-kroes/web-accessibility/
17. The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. -- Tim Berners-Lee, W3C Director and inventor of the World Wide Web “ source: http://www.w3.org/WAI/
18. What can we do?
19. Annette has asked me to look into the possibility of having some kind of visual representation of the European aggregation landscape... This has come out of feedback from the aggregators and new potential contributors who are having difficulty finding the National Initiative or aggregator in their respective countries. Is this something that is possible and can you help us with it? All I had in mind was a Google map or just an image with all the aggregators and initiatives marked and details appearing when they were clicked on. -- David “ source: http://pro.europeana.eu/web/guest/about/partners
20. “ DAVID WANTS A MAP! -- Me source: http://pro.europeana.eu/web/guest/about/partners
21. source: http://pro.europeana.eu/web/guest/about/partners
22. Then you go on an accessibility workshop
24. How can we fix this?
25. source: https://developers.google.com/maps/documentation/javascript/reference
26. The other routes • Leaflet JS • Leaflet.label • Leaflet.Pancontrol • Leaflet.Locate • Fitmaps JS Leaflet: http://leafletjs.com/ Fitmaps: http://www.waywayway.nl/handig-en-leuk/tutorials/responsive-google-maps-embeds/
27. source: http://deanbirkett.name/playground/europeana/accessible_map/
28. So what now?
29. Annette has asked me to look into the possibility of having some kind of visual representation of the European aggregation landscape... This has come out of feedback from the aggregators and new potential contributors who are having difficulty finding the National Initiative of aggregator in their respective countries. Is this something that is possible and can you help us with it? All I had in mind was a Google map or just an image with all the aggregators and initiatives marked and details appearing when they were clicked on. -- David “ This has come out of feedback from the aggregators and new potential contributors who are having difficulty finding the National Initiative of aggregator in their respective countries.
31. So is this accessible?
33. But.... what can I do?
34. • Think of disability to help with accessibility • Write better links • Click here • Register Now for the Europeana Network • Write better ALT text • Here is a picture of a cute cat playing with a ball of wool • Cute cat playing with a ball of wool cute cat: http://animals.desktopnexus.com Token cute cat picture • Consider accessibility when defining personas • Supply close captioning on videos and transcripts
35. What is accessible design?
36. Accessible Design = Better Design
37. Thanks! I write about this sort of stuff quite a lot on my blog - check it out if you’re interested: http://deanbirkett.name Dean Birkett - Dec 2012 - CC BY - http://creativecommons.org/licenses/by/3.0/ (and thanks Dan Entous for your Javascript wizardry, and Chris Mills for all of your accessibility links and read through!)