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