Universal Design and Your Website. Presented at Applying Principles of Universal Design to Websites to Serving Survivors with Disabilities & Deaf Survivors Training, Boston MA, March 2010

Universal Design and YOUR Website

LISA SPITZ
lisa@lisaspitz-design.com

Introduction

 About Me:
– B.A. Graphic Design & Psychology, Regis College, Weston MA
– M.Des. Interaction Design, Carnegie Mellon University, Pittsburgh PA
– Design Consultant for IHCD site: http://humancentereddesign.org/
– Design Consultant for ASI site: http://accessingsafety.org/
– Current Position: Director of Design, CAST, Wakefield MA


Agenda

 Who Benefits?
 Why is it Important?
 Universal Design, Accessibility, and Usability
 Assessing Your Website
 Determining Severity
 Planning Next Steps
 Working with Designers and Developers
 Resources
 Questions and Discussion


Who Benefits?


Who Benefits?

 Scenario1: A survivor who is blindand her 6-year-old
daughter were recently in a domestic violence incident in
their Waltham, MA apartment. The husband, was jailed. He
will soon be released. The mother is scared for their lives.
She is using her home computer (with her own screen reader
software) to lookup Domestic Violence Shelters in her city.
She wants to talk to someone, and get advice.
 She Googles: “domestic violence shelter, Waltham MA”
 http://www.reachma.org/
 What’s working? What’s not working?


Who Benefits?

 Scenario 2: A new video on men’s role in ending violence
against women on college campuses was just released. A
group of Deaf students want to show the video as part of
their college campuses activities for Sexual Assault
Awareness Month.
 http://www.youtube.com/user/pmcgann737#p/u/11/bxJ7u78G
rbY


Who Benefits?

 Scenario 3: A teenager who has had one leg and partial
parts of her arm amputated has never received sexuality
education. An older man who has been talking to her in
recent weeks has been really nice. When he begins to touch
her sexually, she is confused and doesn't know what to do.
 She goes to her local disability rights advocacy website
for information on violence and abuse
 http://www.draginc.com/


Why Is it Important?


Why Is It Important?

 New WHO definition of disability
– “Disability occurs in the interaction between a person, his or her
functional ability, and the environment.”
– “One is more or less disabled based on the intersection between
herself, her functional abilities, and the many types of environments
with which she interacts.”
– “The experience of disability can be minimized by designing
environments to accommodate varying functional abilities and
providing individualized solutions when needed.”
– Source: http://www.accessingsafety.org



 Potential website visitors include…

Blindness

Mental
Health Low Vision
Conditions
Individuals
with no “real”
or “perceived”
functional
limitations

Learning Deaf/Hard of
Disabilities Hearing

Physical
Disability



 If you only consider individuals in the middle, you miss
everyone else.

Blindness

Mental
Health Low Vision
Conditions
Individuals
with no “real”
or “perceived”
functional
limitations


Physical
Disability



 But if you focus on the outskirts, you include everyone!

Blindness

Mental
Health Low Vision
Conditions
Individuals
with no “real”
or “perceived”
functional
limitations


Physical
Disability



 Even those with situational limitations
(a temporary loss of functional ability)


Universal Design, Accessibility, and
Usability of Websites


Universal Design, Accessibility, and Usability

Accessible
Usable

Human
Centered

Universally Designed Websites
= Best Practices



 Web accessibility…
– “…Means that people with disabilities can
perceive, understand, navigate, and interact with the Web, and that
they can contribute to the Web. Web accessibility also benefits
others, including older people with changing abilities due to aging.”
– Source: http://www.w3.org/WAI/intro/accessibility



 Accessibility problems…
– “…Decrease access to a website by people with disabilities. When a
person with a disability is at a disadvantage relative to a person
without a disability, it is an accessibility issue.”
– Source: Shawn Lawton
Henry, http://www.uiaccess.com/accessucd/ut_report.html



 Web Content Accessibility Guidelines
– Guidelines for creating = access.
– Developed by the Web Content Accessibility Guidelines Working
Group (WCAG WG), which is part of the World Wide Web Consortium
(W3C) Web Accessibility Initiative (WAI)
– Recognized as industry standard for accessibility
– See: http://www.w3.org/TR/WCAG20/



 Accessibility Guidelines Stem from Legislation
– Legislation = Minimum requirements
– i.e. Section 255 of the Telecommunications Act
– i.e. Rehabilitation Act, Section 504
– i.e. Rehabilitation Act Amendments of 1998, Section 508
– i.e. Americans with Disabilities Act (ADA)
– See: http://www.w3.org/WAI/Policy/#US



 Usability
– Usability means that the “people who use the product can do so
quickly and easily to accomplish their own tasks”
– This definition rests on four points:
1. Usability means focusing on users;
2. People use products to be productive;
3. Users are busy people trying to accomplish tasks; and
4. Users decide when a product is easy to use.
– Source: Janice (Ginny) Redish and Joseph Dumas, A Practical Guide to Usability Testing, 1999, p 4



 Usability goes beyond Accessibility.
– “Usability problems impact all users equally, regardless of ability; that
is, a person with a disability is not disadvantaged to a greater extent
by usability issues than a person without a disability.”
Source: Shawn Lawton Henry, http://www.uiaccess.com/accessucd/ut_report.html

 A website can be Accessible, but not Usable



Universal
Design

Usability

Accessibility

Legislation


Assessing Your Website



 Goal = Flexibility
 Meet the needs of most people in most situations



 How do I do that?
– Manual evaluation techniques
 Ask questions: Who, When, Where, Why, What, How
 Role Playing
– Semi-automated evaluation tools
 Web Accessibility Evaluation Tool (WAVE)
 Color blind filter
 Add-ons for Firefox


Ask Questions



 Who, When, Where, Why, What, How
– Website audiences
– Context of use
 Purpose =develop a “user-centered” mindset



 Who is my audience?
– Individuals with disabilities…
– Individuals who were recent victims of violence, sexual assault, or
stalking…



 When are they accessing my site?
– What just happened?
– What else is going on around them?



 Where are they when viewing my site?
– Is it “safe”?
– Is there information on how to “ESCAPE” or clear digital “footprints”?

Do



 Why are they coming to my site?
– Whatare their immediate needs?
– Is there information on how to get help?

Do



 What do you hope people will do as a result of visiting your
website?
– Is that message being clearly and consistently communicated?
– Is the information presented in a way that enables people to take the
next step?



 How does the experience of using your website address their
current needs?
– Is the site organized in a way that makes sense?
– Can people find what they are looking for?
– If you resize the browser window, does the website still work without
requiring horizontal scrolling?


Role Playing



 Assess the experience of using your site for individuals with:
– Blindness
– Low Vision
– Deaf / Hard of Hearing
– Physical Disability
– Learning Disability / Mental Health Condition
 Purpose =identify potential usability or accessibility issues



 Blindness
– If possible, listen to your website with a screenreader – Verifies
that the web page makes sense auditorally
– Use the Tab key to navigate pages – Verifies that keyboard users
can navigate through all links and form controls on a page and that
links clearly indicate what they lead to



 Blindness
– Read instructions – Verifies that instructions do not rely on
shape, size, color, or visual location
Do



 Low Vision
– Increase font sizes 200-300% – Verifies that font sizes are scalable
without a loss in usability
Do



 Low Vision
– Increase font sizes 200-300% – Verifies that font sizes are scalable
without a loss in usability
Don’t



 Low Vision
– Lower the contrast on your computer – Helps identify areas where
contrast between foreground & background colors is insufficient

Don’t



 Deaf / Hard of Hearing
– Turn off the sound – Verifies that audio content is available through
text equivalents for individuals who are Deaf or hard-of-hearing
Don’t

Do



 Physical Disability
– Use the Tab key to navigate pages – Verifies that keyboard users
can navigate through all links and form controls on a page and that
links clearly indicate what they lead to
– Look for a “Skip to Content” link at the top of the page – Ensures
that individuals using a tab key can skip repeating blocks of content to
quickly jump to the main content area



 “Skip to Content” link …

Do



 Learning Disability / Mental Health Condition
– Read content on selected pages – Verifies that text is clear and
simple to the extent appropriate for English Language Learners or
those with cognitive or learning disabilities (6-9th grade reading level)



– Take a step back and squint at the website – see if content is grouped
in logical chunks
Do



– Logical chunks..
Don’t



– Look for multiple ways of navigating through the website
Do



– Check that navigation appears in the same location on all pages

Do



– Check that your current location on the website is clearly marked
Do



– Current location….
Don’t



– Look for consistent font styles and easy to read line lengths
Do



– Read links to see if they make sense out of context
 Do:
Do “a Guide to Understanding Accessibility”
 Do:
Do “Get Help”
 Don’t: “Click Here to get help”
Don’t

– Links that go to the same location should have the same name
 Do:
Do repeat “About the Center” if it always goes to “About the Center”
 Don’t: use “About the Center” and “About the Organization”
Don’t
if they both go to “About the Center”
– Links that go to different locations should have different names


WAVE Tool


How to Assess Your Site

 WAVE (Web Accessibility Evaluation Tool)
– http://wave.webaim.org



 Purpose =identify potential accessibility issues
 PROS: Good for checking overall accessibility (reading &
navigation order, tables, images, forms, multimedia, etc)
 CONS: Not good for checking usability (does the ALT text on
images make sense?)



 WAVE – “Errors, Features, and Alerts” View
– Checks for overall accessibility errors, alerts, and features



 WAVE – “Icons Key”
– Quick reference for icons (http://wave.webaim.org/icons)



 Alternative Text for Images
– No Alt text



– Questionable Alt text



– Unhelpful Alt text



– Redundant Alt text



– Null Alt text for decorative images



– Image Map without alt text



 Problematic links



 Links to PDF, Word, or other documents



 Links to popup windows



 Form fields without labels



 Form fields with labels



 WAVE – “Outline” View
– Are headings labeled? Is there a clear hierarchy?



 No heading structure



 Incomplete heading structure



 Incorrectly ordered headings



 WAVE – “Structure/Order” View
– Is the tab and screen reader order logical?



 Reading and navigation out of order



 Forms or Tables out of order


Colorblind Filter



 Colorblind Web Page Filter
– http://colorfilter.wickline.org/



 Purpose =identify potential color issues
 PROS: See what your site looks like in various scenarios
 CONS: Can be slow. Difficult to see the big picture



 Not enough contrast for individuals who are colorblind


Add-ons for Firefox



– Fangs Screen Reader Emulator 1.0.7– Renders a text version of a
web page similar to how and individual using a screen reader would
hear it.
– No Color 0.2.8 – Removes color and background images from the
web page.
– WCAG Contrast checker 1.1.02– Checks the combination of colors
to see if it is appropriate for visual perception.



 Additional Tools…
– VoiceOver (free screenreader for the Mac)
http://www.apple.com/accessibility/voiceover/
– NVDA (free screenreader for the PC)
http://www.nvda-project.org/


Determining Severity


Determining Severity

 Severity 1
– Issues, which result in content or functionality that is completely
inaccessible for some individuals.
 Severity 2
– Issues in which content or functionality may be difficult for some
individuals, may require additional time, effort, or cognitive load to
use, or may potentially fail for some individuals because it is not in
compliance with standards.
 Severity 3
– Items for which there are no significant accessibility issues, but a
recommendation for increasing accessibility or usability of the content
or functionality can be provided.


Planning Next Steps


Planning Next Steps

 Decide which items you will address first
– Planning on redesigning your website?
 Address Severity 1, 2, and 3 items
– Just enough resources for refining your website?
 Try to address all Severity 1 and as many Severity 2 items possible

 Not sure what you are doing with your website? . . .


Planning Next Steps

Redesign

 PROS  CONS
– Start from scratch – Costly
– Build accessibility into – Potentially several rounds of
templates revisions to “get it right”
– Create a new look and feel
and a more universally
designed website


Planning Next Steps

Refine

 PROS  CONS
– Can address “low hanging – Difficult to make site-wide
fruit” quickly improvements
– Good for minor accessibility – Bigger problems will remain
issues, where overall design big problems
is still in good shape


Working with Designers and
Developers


Planning Next Steps

 Where to find a designer or developer
– Word of mouth
– LinkedIn
– Craigslist
– Local SIG CHI group? - http://www.sigchi.org/connect/local-sigs


Planning Next Steps

 Using the “right” keywords
– Universal Design, Accessibility, Usability
– Web Content Accessibility Guidelines (WCAG 2.0), Section 508
– Assistive technologies: screenreaders, screen magnifiers, etc
 Sometimes misleading keywords
– User-centered


Planning Next Steps

 Setting priorities
– If redesigning:
 Tell them you are hoping to create a visually pleasing and universally
designed website. That accessibility is of UTMOST consideration.
 Be sure that their estimate includes time for revisions to the design and to
the functional prototype.
– If refining:
 Send your list of issues to a designer/developer and ask them to assess
what it would cost to address Priority 1, 2, and 3 items separately.
 Choose what you can do within your budget.
 Be sure that their estimate includes time for revisions.


Planning Next Steps

 Assessing design deliverables – Site Map
– Is there a sitemap? Does everything have a “home”? Is there room for
future growth?


Planning Next Steps

 Assessing design deliverables - Wireframes
– Do wireframes depict a clear and simple hierarchy?


Planning Next Steps

 Assessing design deliverables – Wireframes
– Is content organized in logical chunks?


Planning Next Steps

 Assessing design deliverables – Design comps
– Manual Evaluation Techniques
 Role Playing


Planning Next Steps

 Assessing design deliverables – Design
– Are images and dynamic/moving content free of critical information?


Planning Next Steps

 Assessing design deliverables – Design
– Will videos or audio clips have alternate representations?

DBTAC - New England ADA Center


Planning Next Steps

 Assessing a prototype
– Manual Evaluation Techniques
 Role Playing
– Semi-Automated evaluation tools
 Web Accessibility Evaluation Tool (WAVE)
 Color blind filter


Planning Next Steps

 Planning for revisions
– Don’t be afraid to ask for changes
– You need to be happy with the end result
– The more attention to detail = the greater success!


Resources


Resources – Section 508 & Accessibility

 Section 508: For web-based intranet and internet information and
applications
http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web
 Web Content Accessibility Guidelines (WCAG)
Overview:http://www.w3.org/WAI/intro/wcag.php
 Web Content Accessibility Guidelines (WCAG)
2.0:http://www.w3.org/TR/WCAG20/
 WebAIM's WCAG 2.0
Checklist:http://www.webaim.org/standards/wcag/checklist


Resources – Website Evaluation

 Digital Book:Just Ask: Integrating Accessibility Throughout
Design:http://www.uiaccess.com/JustAsk/
 How People with Disabilities Use the Web:
http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/
 Screening techniques:
http://www.uiaccess.com/accessucd/screening.html
 Complete list of evaluation tools:
http://www.w3.org/WAI/ER/tools/complete


Resources - Screenreaders

 VoiceOver (free screenreader for the Mac)
http://www.apple.com/accessibility/voiceover/
 NVDA (free screenreader for the PC)
http://www.nvda-project.org/


Questions and Discussion


LISA SPITZ
lisa@lisaspitz-design.com

Thank You!


Universal Design and Your Website. Presented at Applying Principles of Universal Design to Websites to Serving Survivors with Disabilities & Deaf Survivors Training, Boston MA, March 2010

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Universal Design and Your Website. Presented at Applying Principles of Universal Design to Websites to Serving Survivors with Disabilities & Deaf Survivors Training, Boston MA, March 2010

Semelhante a Universal Design and Your Website. Presented at Applying Principles of Universal Design to Websites to Serving Survivors with Disabilities & Deaf Survivors Training, Boston MA, March 2010 (20)

Mais de Lisa Spitz Design

Mais de Lisa Spitz Design (6)

Último

Último (20)

Universal Design and Your Website. Presented at Applying Principles of Universal Design to Websites to Serving Survivors with Disabilities & Deaf Survivors Training, Boston MA, March 2010

Notas do Editor