Web Content Development IS Dr. Ravi Kuber Accessible Web Design

2 Overview By the end of the session, you should be aware of: –The needs of diverse users –Legislation –Accessible web design

3 Stages in Design Lifecycle

Web developers design pages using these criteria: Grouping of items Order of items Decoration - fonts, boxes etc. Alignment of items White space between items Minimalize clutter This will hopefully lead to a positive user experience

5 Original

6 Proximity

7 Alignment

8 Contrast

9 Repetition

Need to evaluate designs....otherwise you end up with this… Visual Arts League From:

Or this… Lanyards Supply From:

Or even this… Horse Rentals.com From:

13 The Problem….. Designers evaluate with mainstream users However, users are diverse

14 Individual Differences Physical abilities –Difficulties interacting with hardware Cognitive and perceptual abilities –Differences in memory, learning, making decisions Personality differences –Interested/disinterested in software HOW CAN WE DESIGN FOR EVERYBODY?

Diverse Groups of Users How do these users access the Web? What challenges may they face?

16 Assistive Technologies for the Blind Screen readers to access software or the Web A synthetic voice reads the text present Screen reader reading out form From:

17 Assistive Technologies for the Blind Understanding diagrams can be a challenge unless there is some alternative text How would you describe this through text? From:

18 Assistive Technologies Partially sighted (including some elderly users) can use screen magnifiers –Enlarges the information on the screen –Create a large, scrolling virtual screen or magnify area close to the mouse

19 Legislation Section Americans with Disabilities Act –Eliminate barriers in IT –Make new opportunities for disabled –Encourage development of technologies that will help achieve these goals

20 Legislation Section Americans with Disabilities Act –Law applies to all Federal agencies –Good practice for private companies

21 Litigation Sydney Olympics case (1999) Target (2009)

22 Design Guidelines for Inclusiveness Section 508 –Have a text equivalent to diagrams (e.g. alt text, longdesc) –Equivalent alternatives for any multimedia –Information conveyed with color is also available without color

23 Design Guidelines for Inclusiveness Section 508 –Pages should be readable without style sheet –Row and column headers should be identified for data tables. –Avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz

24 Design Guidelines for Inclusiveness Section 508 –Scripting should be identified by assistive technologies –Permits users to skip repetitive navigation links

25 Design Guidelines for Inclusiveness Section 508 –Further info and sample HTML code at:

26 Other Design Guidelines Global - Web Content Accessibility Guidelines –Priority Ratings (I, 2 or 3) UK - BPAS 78 Canada – Look and Feel

27 Design Guidelines for Inclusiveness Using Section 508 Accessibility Checker (

28 Design Guidelines for Inclusiveness Using Section 508 Accessibility Checker, Wikipedia meets Section 508 guidelines

29 Design Guidelines for Inclusiveness However, when WCAG validator is used –Validator.w3.org (entered:

30 Design Guidelines for Inclusiveness Wikipedia is not completely accessible – well according to the W3C WCAG guidelines!

What Basic Changes Can Designers Make To Improve Interface Access? Blind Low vision & Elderly Color blind Deaf & Hard of hearing Print disabilities Younger community Others

32 The Sad Reality Trade-off between designing for disabilities Designers often prioritize aesthetics over usability and accessibility Trade-off between usability and accessibility Needs of disabled communities can be dismissed

33 What can designers do? Designers must plan early to accommodate users with disabilities Follow design guidance (Section 508, WCAG) Simple design can be more effective than complex design Use validators and do manual testing too Testing with target users is essential!

Evaluation Exercises Evaluate the usability and accessibility of web sites Using section508.info, validator.w3c.org and design principles, evaluate: – – – – Work in pairs to fill out the accompanying document