Web Accessibility Raj Arjan

Transcription

1 Web Accessibility Raj Arjan

2 About Me - Graduated from City University in 2007 with a BSc in Business Compu=ng Systems - Developed an interest in HCI whilst studying at City and built upon this when undertaking my final year disserta=on project on social networking. - Was offered to work as Interac=on Lab Manager for the HCID Department at City University in summer 2008.have been here since!

3 Today s Presenta9on - Background to City University London s Interac=on Lab - True or False? - Discussion of Assis=ve Technologies and User Tes=ng - Top Tips for General Web Accessibility & WCAG Examples of Good and Bad Websites - Tips for Making Accessible Flash Websites - Example Videos from User Tes=ng Sessions

4 What is the Interac9on Lab? A space used by students and academics to undertake research in a variety of different areas

5 Our Main areas of work Usability Accessibility

6 True or False?

7 True or False? 1. Websites should provide audio versions of pages for blind users 2. Sites should use a large font size 3. You can use as many images as you like on web pages 4. Separate text- only versions are beneficial 5. Making websites accessible is a UK legal requirement 6. Accessibility is all about how the site is coded 7. Accessibility can improve usability for everyone True False

8 Who are your users? 20 % of the working popula=on has some form of disability [1] 36% of Britain's disabled people have access to the internet[2] Excluding such users from accessing your website doesn t make ethical sense, nor does it make business sense. Types of disabled users who access the internet; [1] Age Concern (2007) [2] Papworth (2010) hjp://

9 How users access websites - JAWS Screen reading sohware - works by reading aloud the HTML of a webpage Typical users: blind, dyslexic, learning difficul=es Costs JAWS Professional JAWS Standard minute trial version is available at hjp://bit.ly/ Zssi

10 How users access websites - ZoomText Screen magnifica9on sohware Typical users: visually- impaired, dyslexic Costs ZoomText Standard day trial version is available at hjp://bit.ly/ 14UqmX

11 Accessibility Requirements - Blind Users Descrip=ve page =tle Skip link(s) Avoid accesskeys Minimise noise ALT text: Descrip=ve ALT text for informa=ve images Null ALT text for decora=ve images Headings (inc. invisible headings) Descrip=ve links Lists

12 Accessibility Requirements Par9ally Sighted users Resizable text Visible font resizer Text not embedded in images Large headings High contrast links Different background colours used Sufficient colour contrast

13 Accessibility Requirements Motor impaired users Large link target Focus state for links Visible skip link

14 Accessibility Requirements Cogni9ve impaired users Use short line lengths and leu jus=fied text. Leu- hand jus=fica=on offers the highest level of readability. Center jus=fica=on other than for a =tle, should be avoided. Use short line lengths and leu jus=fied text. Leu- hand jus=fica=on offers the highest level of readability. Center jus=fica=on other than for a =tle, should be avoided.

15 Accessibility Requirements Cogni9ve impaired users The problem for dyslexic people occurs because large gaps between words are more likely to line up above one another than are the smaller gaps typical of more evenly spaced text. When they do, readers may perceive highly distrac=ng white pajerns flowing through t h e p a ge t h at can become more prominent than the text itself. The effect is known as "rivers of white" and it can make reading difficult, if not impossible. The problem for dyslexic people occurs because large gaps between words are more likely to line up above one another than are the smaller gaps typical of more evenly spaced text. When they do, readers may perceive highly distrac=ng white pajerns flowing through the page that can become more prominent than the text itself. The effect is known as "rivers of white" and it can make reading difficult, if not impossible.

16 Accessibility Requirements Cogni9ve impaired users Descrip=ve headings Front- load page content 1 idea per paragraph & front- loaded Lists used Emboldened text Descrip=ve link text Leu- aligned text Clear & simple language hjp:// friendly- resources/web- usability/web- content.shtml

17 More guidelines WCAG 2.0 Checklist Used to help ensure a website is; hjp:// Perceivable Operable Understandable Robust 12 guidelines

18 Website Examples The Good The Bad The Ugly BBC News Paperchase Worlds Worst Website

19 Hillngdon Young Carers Website

20 Glenbow Museum Website

21 Making Flash Accessible alt text - Provide text alterna=ves to movies and pictures by using the accessibility panel, - or by using ac=onscript

22 Making Flash Accessible tab index - Tab index will allow keyboard- only users to effec=vely navigate their way through the flash applica=on It is important to think carefully about the tab order and make it as logical as possible.

23 Making Flash Accessible text magnifica9on - For users with visual impairments, it can be helpful to allow them to directly increase or decrease the text size directly within the flash applica=on. Tutorial can be found at ac=onscript.org Built- in screen magnifica=on tool

24 I have followed all guidelines and rules, so what else do I need to do to ensure accessibility?

25 Expert Review WAT Toolbar A very useful tool to help ensure that a website conforms to WCAG 2.0 guidelines Free to download and use Can be downloaded from hjp://bit.ly/kjpc9

26 Accessibility Tes9ng Conducted either in the lab or in the field Specialist souware used to capture user interac=ons with a website. Tes=ng conducted with real users using assis=ve technologies. Users asked to perform certain tasks using the website. You have been told that this website is useful for the research you are currently undertaking. Use the search op;on to find 3 relevant ar;cles in your subject area

27 Accessibility Tes9ng

28 Accessibility Tes9ng Example 1

29 Accessibility Tes9ng Example 2

30 Accessibility Tes9ng Example 3

31 Dyslexia What Dyslexic s see

32 More useful links for you hjp:// flash- accessible hjp:// hjp:// friendly- resources/web- accessibility/

33 Ques9ons? Website: