CS7026 - Accessibility

1. CS7026 - Accessibility

2. 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

3. Why: The Case for Web Accessibility • Accessibility is essential in order to provide equal access and equal opportunity to people with diverse abilities. • The UN Convention on the Rights of Persons with Disabilities recognizes access to information and communications technologies, including the Web, as a basic human right. • Accessibility supports social inclusion for people with disabilities as well as others, such as older people, people in rural areas, and people in developing countries.

4. Why: The Case for Web Accessibility • There is also a strong business case for accessibility. • Accessibility overlaps with other best practices such as mobile web design, device independence, multi-modal interaction, usability, and search engine optimization (SEO). • Case studies show that accessible websites have better search results, reduced maintenance costs, and increased audience reach, among other benefits.

5. Accessibility Contributes to Universal Design (Design for All) Accessible Web design contributes to better design for other users: • Multi-modality (support for visual, auditory, tactile access) benefits users of: • mobile phones with small display screens, Web-TV, kiosks. • Multi-modality increases usability of Web sites in different situations: • low bandwidth (images are slow to download); • noisy environments (difficult to hear the audio); • screen-glare (difficult to see the screen); • driving (eyes and hands are "busy").

6. Accessibility Contributes to Universal Design (Design for All) • Redundant text/audio/video can support: • different learning styles; low literacy levels; second-language access. • Style sheets can support: • more efficient page transmission and site maintenance. • Captioning of audio files supports: • better machine indexing of content; faster searching of content.

7. What is Web Accessibility • Web accessibility means that people with disabilities can use the web. • More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. • Web accessibility also benefits others, including older people with changing abilities due to aging.

8. What is Web Accessibility • Web accessibility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities. • Millions of people have disabilities that affect their use of the Web. • At least 10% of the population in most countries has disabilities; • Average age of population in many countries is increasing; • Aging sometimes results in combinations of accessibility issues; vision & hearing changes, changes in dexterity & memory.

9. United Nations global demographic forecast Source: UN World Population Prospects Global demographic changes Developed with material from W3C Web Accessibility Initiative (WAI) www.w3.org/WAI/

10. Demographic forecast for the EU Source: EuroStat European situation Developed with material from W3C Web Accessibility Initiative (WAI) www.w3.org/WAI/

11. Ageing and vision decline • Impact: • Decreasing ability to focus on near tasks • Changing color perception and sensitivity • Decreasing contrast sensitivity • Prevalence:(significant vision loss) • 16% of people 65 - 74 years • 19% of people 75 – 84 years • 46% of people 85+ years Developed with material from W3C Web Accessibility Initiative (WAI) www.w3.org/WAI/

12. Ageing and physical decline • Impact:(Motor skill decline can result from many conditions including arthritis and Parkinson's Disease) • Difficulty using mouse or keyboard • Difficult to click small areas • Strain from non-ergonomic tasks • Prevalence:(Conditions most commonly reported) • Arthritis • At least 50% of people over 65 affected • Essential tremor • Affects up to 20% of people over 65 • Parkinson's Disease • Approximately 4% of people over 85affected Developed with material from W3C Web Accessibility Initiative (WAI) www.w3.org/WAI/

13. Ageing and cognitive decline • Impact:Navigation, comprehension, and task completion can be affected by: • Short term memory problems • Difficulty with concentration • Distraction from movement or irrelevant material • Difficulty coping with information overload • Prevalence:(Conditions most commonly reported) • Dementia: • 1.4% of people 65-69 yrs • 24% of people 85+ yrs  • Mild cognitive impairment (MCI) is more common: • Around 20% of people over 70 years are estimated to experience MCI Developed with material from W3C Web Accessibility Initiative (WAI) www.w3.org/WAI/

14. Older people online The Web provides older people with unprecedented opportunities for: • social interaction and communication • access to information • access to eCommerce • access to government services and civic participation • training and learning opportunities • employment, research, and access to workplace applications Developed with material from W3C Web Accessibility Initiative (WAI) www.w3.org/WAI/

15. Barriers to web use Older people are experiencing web accessibility barriers due to: • poor design and poor coding of websites • complex software and assistive technologies • little or no prior experience with computers Web accessibility is an imperative. Developed with material from W3C Web Accessibility Initiative (WAI) www.w3.org/WAI/

16. What is Web Accessibility • Currently most Web sites and Web software have accessibility barriers that make it difficult or impossible for many people with disabilities to use the Web. • As more accessible Web sites and software become available, people with disabilities are able to use and contribute to the Web more effectively.

17. What is Web Accessibility • Web accessibility also benefits people without disabilities. • For example, a key principle of Web accessibility is designing Web sites and software that are flexible to meet different user needs, preferences, and situations. • This flexibility also benefits people without disabilities in certain situations, such as people using a slow Internet connection, people with "temporary disabilities" such as a broken arm, people accessing the internet in a noisy environment…

18. Why Web Accessibility is Important • The Web is an increasingly important resource in many aspects of life: education, employment, government, commerce, healthcare, recreation, and more. • It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities. An accessible Web can also help people with disabilities more actively participate in society.

19. Why Web Accessibility is Important • The Web offers the possibility of unprecedented access to information and interaction for many people with disabilities. • That is, the accessibility barriers to print, audio, and visual media can be much more easily overcome through Web technologies.

20. Why Web Accessibility is Important • Another important consideration for organizations is that Web accessibility is required by laws and policies in some cases.  • WAI Web Accessibility Policy Resources links to resources for addressing legal and policy factors within organizations, including a list of relevant laws and policies around the world.

21. Your Audience • Accessibility is about reaching as much of your target audience as possible. To do that the first step is to understand who that audience is and what their needs are. • The disabled audience is sometimes (rightly) thought of as being extremely diverse

22. Your Audience • But when it comes to web accessibility, rather than a sea of medical conditions, luckily it’s pretty simple.There are only four types of disability that relate to web access: visual, hearing, motor and cognitive. • Many fixes for these groups are both simple and free. • Let’s take an overview of each of these four areas, with a few examples of the kind of adaptations that can make a valuable difference to each group.

23. Visual Associated medical conditions include myopia, colour blindness, glaucoma and albinism • Catering for visual impairments means not relying on subtle visual cues, or even not relying on visuals at all. The simplest way is through size and contrast. • There are many types of vision loss, such as patchy, warped or tunnel vision, but not relying on things that are small or low contrast will be useful for most of them.

24. Visual

25. Visual • You can easily see the difference that good contrast between foreground and background makes, especially at lower sizes.  • Snook.ca has a nice contrast checker to help with this. • Also make your links as easy to see as possible - bold with a significant difference in colour, ideally also underlined.

26. Visual • Another type of impairment is colour blindness. The most common is red/green (affecting eight per cent of males) but there are other types too, so avoid relying on colour to convey information. • This is extremely common in web forms – ‘correct the fields marked in red’. • The following example is from a game. The progress markers changed from red to green when you passed them. The issue wasn’t the use of colour, it was the reliance on it. Adding a symbol avoided the issue, and also made it clearer for everyone:

27. Visual

28. Visual • There’s also screenreader software, used by people with severe visual impairments or blindness to quite simply read the contents of the screen out as audio instead. • http://www.youtube.com/watch?v=o_mvO6EQ0tM • Screenreader users browse in the same way as anyone else does, skimming through titles and links to find items of interest. For example:

29. Visual

30. Visual • For this to work, all headings must be tagged properly, and your links must make sense out of context. If not, you end up with something like this:

31. Visual • So, avoid generic links such as ‘click here’ and ‘more’. Instead, make the text of the link describe the destination. • Also avoid autoplaying audio/video at all costs: it clashes with screenreaders’ speech, rendering the site unusable.

32. Hearing Associated medical conditions include presbycusis, acoustic trauma, auditory processing disorder, and otosclerosis • As the web is mostly a visual medium, people with hearing impairments are generally well served. Sound isn’t usually relied on to get information across, with a couple of exceptions – the main one being video.

33. Hearing • All video should ideally be captioned. • Captions should include important background sounds (eg a door slamming) and need cutting down so that they can be read as fast as the words are being spoken (speech is up to 150wpm, reading speeds are up to 120wpm). • Captions also require a technical implementation in the video player. Because of these issues, captioning can sometimes be too difficult/expensive for small companies/budgets.

34. Hearing • If full captioning is outside your budget, then there’s a cheaper fallback that, while not providing an equivalent experience, still allows access to the information – a transcript. • This is a simple text version of the information contained in the video.  E.g. http://blog.metmuseum.org/alexandermcqueen/about/ • Transcripts are easy to do (either by typing, or using a cheap transcription service) and have many benefits, not just catering for hearing impairments but also people without sound (eg in an office or on a mobile browser), and for SEO, quoting, skimming through, in-page browser search etc.

35. Motor Associated medical conditions include RSI, cerebral palsy, Parkinson's, and muscular dystrophy • People with motor impairments find using a traditional mouse and keyboard difficult, or even sometimes impossible and use a range of assistive technologies instead, like these button switches:

36. Motor • Input devices have a wide range of complexity, starting from the very simple cause and effect of pressing a single key or button, through the spatial metaphor (hit the furthest key from you to move up) of arrow keys, all the way up to the fine analogue movements needed to use a mouse, keeping precise control over both speed and direction simultaneously. • Thankfully though browsers (and Flash too) support simple keyboard access out of the box. Tab to cycle between selectable things, and enter to select them. So be sure not to break this, and also check that your tab sequence is in a logical order.

37. Motor • To avoid problems for people who are able to use a mouse or touchscreen but find it difficult, don’t make clickable elements too small or close together, and don’t rely solely on complex movements or gestures such as drag and drop or swiping. • Up/down buttons as well as click/drag would have made this Guardian music history timeline usable by many more people:

38. Cognitive Associated medical conditions include Down’s syndrome, autism, global developmental delay and dyslexia • Cognitive impairment means not being able to process information as easily. • The most obvious fix is to simplify the information, keep it to the minimum needed to get the point across, and avoid unnecessarily complex language jargon or acronyms, as the copy on the Facebook and Blogger homepages both succeed in doing:

39. Cognitive

40. Cognitive • This is straightforward to do and standard good practice for writing for the web in general, but also fantastically helpful for the huge percentage of the population who have a significant reading difficulty (including over one million UK adults who have a reading age of below five years old). • Another powerful tool is simplicity of interface. Avoid situations where people are overwhelmed with too many options, and there is no proper hierarchy:

41. Cognitive

42. Cognitive • Also ensure that navigational elements are kept consistent. Often people will navigate via clicking in a familiar position rather than reading all of the text on each menu item. • Use of a clear easy to read typeface is another obvious way to help.

43. Cognitive • Lastly, animation or movement. • It’s not easy to keep your eye on the text with all that animation next to it. This may seem extreme, but for some conditions (such as ADD or Asperger's) the distracting effect of movement is amplified. So this example can be exactly how even moderate movement feels – very obtrusive. 

44. Cognitive • So something as simple as a cloud slowly drifting behind Vimeo's sign-up form... ... can be very distracting, making it difficult to concentrate on the interactive elements.

45. Cognitive • Also unannounced movement (especially autoplaying video) can go beyond making access difficult, and cause actual distress for people who aren’t able to cope with sudden unexpected change, due to conditions such as autistic spectrum. • So use movement and animation sparingly, only when there’s a real need.

46. Cognitive • If you do use it then make it move as the result of a user action instead of moving automatically, and avoid things that animate continuously, ie. just use a quick transition in or mouseover effect instead of something that loops forever. • If there’s no way out of it and you must have autoplaying animation, then as with moving interfaces, be sure to include an obvious pause button.

47. What Next? • Although not an exhaustive list by any means, these examples should at least give you a flavour of who accessibility benefits, the kind of barriers they come up against, and some practical quick and easy tips for avoiding them. • Spending time with disabled people is by far the best way to learn more. If you are able to carry out audience research and user testing then include disabled participants. • If not, most people know someone who is disabled (elderly relatives are a good bet, they often have a variety of minor-medium impairments). Sit at a computer with them and chat through what they find difficult and what they’d like to see improved or provided. • Whatever your level of audience insight, it will always be just that, insightful.

48. Web Accessibility Standards • There are also excellent web accessibility standards (WC3 WCAG2.0) and reams of expertise on design, code, copy and content techniques, but really it all just comes down to this:Keep these four groups (people who who find it difficult to see, hear, control or process information) in your head from the outset of a project, and you will make a real difference.