Binder1 - Sun Pharmaceutical€¦ · iliiiii 0101, 010 010 010 101 111 oz. 0101. 0101 0101 1010 1001
Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.
-
Upload
kerry-glenn -
Category
Documents
-
view
214 -
download
0
Transcript of Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.
![Page 1: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/1.jpg)
Web Content DevelopmentWeb Content Development
IS 387 0101IS 387 0101
Dr. Ravi KuberDr. Ravi Kuber
Accessible Web DesignAccessible Web Design
![Page 2: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/2.jpg)
2
OverviewOverview
• By the end of the session, you should be aware of:
– The needs of diverse users
– Legislation
– Accessible web design
![Page 3: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/3.jpg)
3
Stages in Design LifecycleStages in Design Lifecycle
![Page 4: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/4.jpg)
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
![Page 5: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/5.jpg)
5Original
![Page 6: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/6.jpg)
6Proximity
![Page 7: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/7.jpg)
7Alignment
![Page 8: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/8.jpg)
8Contrast
![Page 9: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/9.jpg)
9Repetition
![Page 10: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/10.jpg)
Need to evaluate designs....otherwise you end up
with this…
Visual Arts LeagueFrom: http://www.webpagesthatsuck.com
![Page 11: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/11.jpg)
Or this…
Lanyards Supply
From: http://www.webpagesthatsuck.com
![Page 12: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/12.jpg)
Or even this…
Horse Rentals.com
From: http://www.webpagesthatsuck.com
![Page 13: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/13.jpg)
13
The Problem…..The Problem…..
• Designers evaluate with mainstream users
• However, users are diverse
![Page 14: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/14.jpg)
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?
![Page 15: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/15.jpg)
Diverse Groups of UsersDiverse Groups of Users
• How do these users access the Web?
• What challenges may they face?
![Page 16: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/16.jpg)
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
![Page 17: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/17.jpg)
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
![Page 18: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/18.jpg)
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
![Page 19: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/19.jpg)
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
![Page 20: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/20.jpg)
20
LegislationLegislation
• Section 508 - Americans with Disabilities Act
– Law applies to all Federal agencies
– Good practice for private companies
![Page 21: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/21.jpg)
21
LitigationLitigation
• Sydney Olympics case (1999)
• Target (2009)
![Page 22: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/22.jpg)
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
![Page 23: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/23.jpg)
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
![Page 24: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/24.jpg)
24
Design Guidelines for Design Guidelines for InclusivenessInclusiveness
• Section 508
– Scripting should be identified by assistive technologies
– Permits users to skip repetitive navigation links
![Page 25: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/25.jpg)
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
![Page 26: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/26.jpg)
26
Other Design GuidelinesOther Design Guidelines
• Global - Web Content Accessibility Guidelines
– Priority Ratings (I, 2 or 3)
• UK - BPAS 78
• Canada – Look and Feel
![Page 27: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/27.jpg)
27
Design Guidelines for Design Guidelines for InclusivenessInclusiveness
• Using Section 508 Accessibility Checker
• (www.section508.info)
![Page 28: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/28.jpg)
28
Design Guidelines for Design Guidelines for InclusivenessInclusiveness
• Using Section 508 Accessibility Checker, Wikipedia meets Section 508 guidelines
![Page 29: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/29.jpg)
29
Design Guidelines for Design Guidelines for InclusivenessInclusiveness
• However, when WCAG validator is used
– Validator.w3.org (entered: www.wikipedia.org)
![Page 30: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/30.jpg)
30
Design Guidelines for Design Guidelines for InclusivenessInclusiveness
• Wikipedia is not completely accessible – well according to the W3C WCAG guidelines!
![Page 31: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/31.jpg)
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
![Page 32: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/32.jpg)
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
![Page 33: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/33.jpg)
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!
![Page 34: Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649f165503460f94c2bfca/html5/thumbnails/34.jpg)
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