Web Content Development IS 387 0101 Dr. Ravi Kuber Accessible Web Design.

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