Upload
kerry-glenn
View
214
Download
0
Embed Size (px)
Citation preview
Web Content DevelopmentWeb Content Development
IS 387 0101IS 387 0101
Dr. Ravi KuberDr. Ravi Kuber
Accessible Web DesignAccessible Web Design
2
OverviewOverview
• By the end of the session, you should be aware of:
– The needs of diverse users
– Legislation
– Accessible web design
3
Stages in Design LifecycleStages 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
5Original
6Proximity
7Alignment
8Contrast
9Repetition
Need to evaluate designs....otherwise you end up
with this…
Visual Arts LeagueFrom: http://www.webpagesthatsuck.com
Or this…
Lanyards Supply
From: http://www.webpagesthatsuck.com
Or even this…
Horse Rentals.com
From: http://www.webpagesthatsuck.com
13
The Problem…..The Problem…..
• Designers evaluate with mainstream users
• However, users are diverse
14
Individual DifferencesIndividual 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 UsersDiverse Groups of Users
• How do these users access the Web?
• What challenges may they face?
16
Assistive Technologies for the BlindAssistive 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: http://www.webaim.org/techniques/forms/screen_reader.php
17
Assistive Technologies for the BlindAssistive Technologies for the Blind
• Understanding diagrams can be a challenge unless there is some alternative text
How would you describe this through text?
From: http://www.howstuffworks.com
18
Assistive TechnologiesAssistive 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
LegislationLegislation
• Section 508 - Americans with Disabilities Act
– Eliminate barriers in IT
– Make new opportunities for disabled
– Encourage development of technologies that will help achieve these goals
20
LegislationLegislation
• Section 508 - Americans with Disabilities Act
– Law applies to all Federal agencies
– Good practice for private companies
21
LitigationLitigation
• Sydney Olympics case (1999)
• Target (2009)
22
Design Guidelines for Design Guidelines for InclusivenessInclusiveness
• 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 Design Guidelines for InclusivenessInclusiveness
• 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 Design Guidelines for InclusivenessInclusiveness
• Section 508
– Scripting should be identified by assistive technologies
– Permits users to skip repetitive navigation links
25
Design Guidelines for Design Guidelines for InclusivenessInclusiveness
• Section 508
– Further info and sample HTML code at:
http://www.access-board.gov/sec508/guide/1194.22.htm
26
Other Design GuidelinesOther Design Guidelines
• Global - Web Content Accessibility Guidelines
– Priority Ratings (I, 2 or 3)
• UK - BPAS 78
• Canada – Look and Feel
27
Design Guidelines for Design Guidelines for InclusivenessInclusiveness
• Using Section 508 Accessibility Checker
• (www.section508.info)
28
Design Guidelines for Design Guidelines for InclusivenessInclusiveness
• Using Section 508 Accessibility Checker, Wikipedia meets Section 508 guidelines
29
Design Guidelines for Design Guidelines for InclusivenessInclusiveness
• However, when WCAG validator is used
– Validator.w3.org (entered: www.wikipedia.org)
30
Design Guidelines for Design Guidelines for InclusivenessInclusiveness
• Wikipedia is not completely accessible – well according to the W3C WCAG guidelines!
What Basic Changes Can What Basic Changes Can Designers Make To Improve Designers Make To Improve
Interface Access?Interface Access?
• Blind
• Low vision & Elderly
• Color blind
• Deaf & Hard of hearing
• Print disabilities
• Younger community
• Others
32
The Sad RealityThe 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?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 ExercisesEvaluation Exercises
• Evaluate the usability and accessibility of web sites
• Using section508.info, validator.w3c.org and design principles, evaluate:
– www.havenworks.com
– www.nhc.noaa.gov
– www.alternativetransport.co.uk
– www.nfb.org
• Work in pairs to fill out the accompanying document