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
The goal of this session was to provide participants with a foundation for understanding how to re-build or re-design their website with Universal Design and Accessibility as a requirement for success. I covered the basics of Accessibility including what it is, common standards and who benefits from an accessible and universally designed website. The session then focused on tools and techniques to assess your current website and how to prioritize changes that would need to be made. The session closed with some tips on working with designers and developers to refine or redesign your website.
Ähnlich wie 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
Ähnlich wie 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)
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
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
2. 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
Universal Design and YOUR Website
3. 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
Universal Design and YOUR Website
5. 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?
Universal Design and YOUR Website
6. 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
What’s working? What’s not working?
Universal Design and YOUR Website
7. 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/
What’s working? What’s not working?
Universal Design and YOUR Website
8. Why Is it Important?
Universal Design and YOUR Website
9. 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
Universal Design and YOUR Website
10. Why Is It Important?
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
Universal Design and YOUR Website
11. Why Is It Important?
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
Learning Deaf/Hard of
Disabilities Hearing
Physical
Disability
Universal Design and YOUR Website
12. Why Is It Important?
But if you focus on the outskirts, you include everyone!
Blindness
Mental
Health Low Vision
Conditions
Individuals
with no “real”
or “perceived”
functional
limitations
Learning Deaf/Hard of
Disabilities Hearing
Physical
Disability
Universal Design and YOUR Website
13. Why Is It Important?
Even those with situational limitations
(a temporary loss of functional ability)
Universal Design and YOUR Website
15. Universal Design, Accessibility, and Usability
Accessible
Usable
Human
Centered
Universally Designed Websites
= Best Practices
Universal Design and YOUR Website
16. Universal Design, Accessibility, and Usability
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
Universal Design and YOUR Website
17. Universal Design, Accessibility, and Usability
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
Universal Design and YOUR Website
18. Universal Design, Accessibility, and Usability
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/
Universal Design and YOUR Website
19. Universal Design, Accessibility, and Usability
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
Universal Design and YOUR Website
20. Universal Design, Accessibility, and Usability
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
Universal Design and YOUR Website
21. Universal Design, Accessibility, and Usability
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 and YOUR Website
22. Universal Design, Accessibility, and Usability
Universal
Design
Usability
Accessibility
Legislation
Universal Design and YOUR Website
24. Assessing Your Website
Goal = Flexibility
Meet the needs of most people in most situations
Universal Design and YOUR Website
25. Assessing Your Website
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
Universal Design and YOUR Website
27. Assessing Your Website
Who, When, Where, Why, What, How
– Website audiences
– Context of use
Purpose =develop a “user-centered” mindset
Universal Design and YOUR Website
28. Assessing Your Website
Who is my audience?
– Individuals with disabilities…
– Individuals who were recent victims of violence, sexual assault, or
stalking…
Universal Design and YOUR Website
29. Assessing Your Website
When are they accessing my site?
– What just happened?
– What else is going on around them?
Universal Design and YOUR Website
30. Assessing Your Website
Where are they when viewing my site?
– Is it “safe”?
– Is there information on how to “ESCAPE” or clear digital “footprints”?
Do
Universal Design and YOUR Website
31. Assessing Your Website
Why are they coming to my site?
– Whatare their immediate needs?
– Is there information on how to get help?
Do
Universal Design and YOUR Website
32. Assessing Your Website
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?
Universal Design and YOUR Website
33. Assessing Your Website
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?
Universal Design and YOUR Website
35. Assessing Your Website
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
Universal Design and YOUR Website
36. Assessing Your Website
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
Universal Design and YOUR Website
37. Assessing Your Website
Blindness
– Read instructions – Verifies that instructions do not rely on
shape, size, color, or visual location
Do
Universal Design and YOUR Website
38. Assessing Your Website
Low Vision
– Increase font sizes 200-300% – Verifies that font sizes are scalable
without a loss in usability
Do
Universal Design and YOUR Website
39. Assessing Your Website
Low Vision
– Increase font sizes 200-300% – Verifies that font sizes are scalable
without a loss in usability
Don’t
Universal Design and YOUR Website
40. Assessing Your Website
Low Vision
– Lower the contrast on your computer – Helps identify areas where
contrast between foreground & background colors is insufficient
Don’t
Universal Design and YOUR Website
41. Assessing Your Website
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
Universal Design and YOUR Website
42. Assessing Your Website
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
Universal Design and YOUR Website
44. Assessing Your Website
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)
Universal Design and YOUR Website
45. Assessing Your Website
Learning Disability / Mental Health Condition
– Take a step back and squint at the website – see if content is grouped
in logical chunks
Do
Universal Design and YOUR Website
46. Assessing Your Website
Learning Disability / Mental Health Condition
– Logical chunks..
Don’t
Universal Design and YOUR Website
47. Assessing Your Website
Learning Disability / Mental Health Condition
– Look for multiple ways of navigating through the website
Do
Universal Design and YOUR Website
48. Assessing Your Website
Learning Disability / Mental Health Condition
– Check that navigation appears in the same location on all pages
Do
Universal Design and YOUR Website
49. Assessing Your Website
Learning Disability / Mental Health Condition
– Check that your current location on the website is clearly marked
Do
Universal Design and YOUR Website
50. Assessing Your Website
Learning Disability / Mental Health Condition
– Current location….
Don’t
Universal Design and YOUR Website
51. Assessing Your Website
Learning Disability / Mental Health Condition
– Look for consistent font styles and easy to read line lengths
Do
Universal Design and YOUR Website
52. Assessing Your Website
Learning Disability / Mental Health Condition
– 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
Universal Design and YOUR Website
54. How to Assess Your Site
WAVE (Web Accessibility Evaluation Tool)
– http://wave.webaim.org
Universal Design and YOUR Website
55. How to Assess Your Site
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?)
Universal Design and YOUR Website
56. How to Assess Your Site
WAVE – “Errors, Features, and Alerts” View
– Checks for overall accessibility errors, alerts, and features
Universal Design and YOUR Website
57. How to Assess Your Site
WAVE – “Icons Key”
– Quick reference for icons (http://wave.webaim.org/icons)
Universal Design and YOUR Website
58. How to Assess Your Site
Alternative Text for Images
– No Alt text
Universal Design and YOUR Website
59. How to Assess Your Site
Alternative Text for Images
– Questionable Alt text
Universal Design and YOUR Website
60. How to Assess Your Site
Alternative Text for Images
– Unhelpful Alt text
Universal Design and YOUR Website
61. How to Assess Your Site
Alternative Text for Images
– Redundant Alt text
Universal Design and YOUR Website
62. How to Assess Your Site
Alternative Text for Images
– Null Alt text for decorative images
Universal Design and YOUR Website
63. How to Assess Your Site
Alternative Text for Images
– Image Map without alt text
Universal Design and YOUR Website
64. How to Assess Your Site
Problematic links
Universal Design and YOUR Website
65. How to Assess Your Site
Links to PDF, Word, or other documents
Universal Design and YOUR Website
66. How to Assess Your Site
Links to popup windows
Universal Design and YOUR Website
67. How to Assess Your Site
Form fields without labels
Universal Design and YOUR Website
68. How to Assess Your Site
Form fields with labels
Universal Design and YOUR Website
69. How to Assess Your Site
WAVE – “Outline” View
– Are headings labeled? Is there a clear hierarchy?
Universal Design and YOUR Website
70. How to Assess Your Site
No heading structure
Universal Design and YOUR Website
71. How to Assess Your Site
Incomplete heading structure
Universal Design and YOUR Website
72. How to Assess Your Site
Incorrectly ordered headings
Universal Design and YOUR Website
73. How to Assess Your Site
WAVE – “Structure/Order” View
– Is the tab and screen reader order logical?
Universal Design and YOUR Website
74. How to Assess Your Site
Reading and navigation out of order
Universal Design and YOUR Website
75. How to Assess Your Site
Forms or Tables out of order
Universal Design and YOUR Website
77. How to Assess Your Site
Colorblind Web Page Filter
– http://colorfilter.wickline.org/
Universal Design and YOUR Website
78. How to Assess Your Site
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
Universal Design and YOUR Website
79. How to Assess Your Site
Not enough contrast for individuals who are colorblind
Universal Design and YOUR Website
81. How to Assess Your Site
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.
Universal Design and YOUR Website
82. How to Assess Your Site
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/
Universal Design and YOUR Website
84. 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.
Universal Design and YOUR Website
86. 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? . . .
Universal Design and YOUR Website
87. 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
Universal Design and YOUR Website
88. 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
Universal Design and YOUR Website
90. 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
Universal Design and YOUR Website
91. 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
Universal Design and YOUR Website
92. 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.
Universal Design and YOUR Website
93. Planning Next Steps
Assessing design deliverables – Site Map
– Is there a sitemap? Does everything have a “home”? Is there room for
future growth?
Universal Design and YOUR Website
94. Planning Next Steps
Assessing design deliverables - Wireframes
– Do wireframes depict a clear and simple hierarchy?
Universal Design and YOUR Website
95. Planning Next Steps
Assessing design deliverables – Wireframes
– Is content organized in logical chunks?
Universal Design and YOUR Website
96. Planning Next Steps
Assessing design deliverables – Design comps
– Manual Evaluation Techniques
Ask questions: Who, When, Where, Why, What, How
Role Playing
Universal Design and YOUR Website
97. Planning Next Steps
Assessing design deliverables – Design
– Are images and dynamic/moving content free of critical information?
Universal Design and YOUR Website
98. Planning Next Steps
Assessing design deliverables – Design
– Will videos or audio clips have alternate representations?
DBTAC - New England ADA Center
Universal Design and YOUR Website
99. Planning Next Steps
Assessing a prototype
– 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
Universal Design and YOUR Website
100. 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!
Universal Design and YOUR Website
102. 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
Universal Design and YOUR Website
103. 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
Universal Design and YOUR Website
104. 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/
Universal Design and YOUR Website
106. LISA SPITZ
lisa@lisaspitz-design.com
Thank You!
Universal Design and YOUR Website
Hinweis der Redaktion
Hi Everyone, thanks for joining me bright and early this morning. This morning’s talk is titled Universal Design and YOUR Website. I hope it will give you some background information on Universal Design and Accessibility and some information to help you assess your current site and prioritize efforts to redesign or refine your site.
A little bit of information about me …
And here are the items we’ll specifically cover in the next hour and a half. We’ll talk about who benefits from a website that is universally designed and why it’s important.We’ll hit on some basic definitions of Universal Design, Accessibility and Usability.Then we’ll spend the majority of our time looking at ways to assess your website and some of the issues that may present themselves. Followed by some thoughts on how to determine the severity of these issues. Finally, planning your next steps and some tips for working with designers and developers.
To get started, I’d like to run through a couple of scenarios – of typical people who you may or may not be currently serving through your website. The scenarios are meant to show the kinds of things these individuals may encounter, but particularly, some barriers they may face in getting the content they need.
(Describe first scenario)1. Click on Link2. APPLE + FN + F5 (Start Voice Over)3. CONTROL + OPTION + A (to read)4. APPLE + F5 (STOP Voice Over)Take away – Image with phone number is there – but it is not accessible to someone using a screenreader
(Describe Scenario)(Visit Video)Take Away – Could be a great video but there is no alternative format available for individuals who are deaf.
(Describe Scenario)She is only connected to a disability orgShe wants info on violence and abuse(Visit Website)Take Away: The disability org may or may not have the info.But, either way, they should be accessible to the fullest extent and, we'd want to encourage disability orgs to reference violence
Those are some examples of problems people might encounter when using a website – now …Let’s talk about Why it’s important to consider individuals with disabilities when thinking about your website.
First let’s take a look at the definition of disability.Describe New WHO definition…(first 2 bullets)The key take away here is that if you accommodate individuals with varying functional abilities in the design of your website – you can actually minimize the impact of their disability.
For instance - This diagram represents the variety of potential visitors to your website – and their range of functional abilitiesIndividuals with no “real” or “perceived” functional limitations fall in the middle, and the outliers include individuals with various functional limitations such as: Blindness, Low Vision, …etcNote, onlya minority of people with functional limitations actually identify as 'a person with a disability,' leaving a large proportion of their clients who choose not to identify a limitation or who have never been diagnosed or who reject disability and prefer to frame their situation as a health issue – in the middle
When thinking about your website ….
Even those with situational limitations, people who may be using an old computer, have a broken arm, post traumatic stress, etc.
Now that we know why it’s important and who benefits – let’s cover some fundamentals
Among other things, universally designed websites must incorporate Accessibility and Usability
According to the World Wide Web Consortium
When thinking about “accessibility problems” with regards to your website - we’re talking about circumstances where a an individual with a disability is at a disadvantage relative to a person without a disability.
In terms of accessibility, There are no definitive rules, but there are guidelinesThe World Wide Web Consortium has established a rather detailed set of guidelines for creating = access to websites. It is recognized as the industry standard for accessibility.
These Accessibility guidelines stem from from Legislation, but go above and beyond what has been mandated in these federal laws.
When thinking about the Usability of your website - it entails a slightly different orientation
Usability assumes access. Yet - It goes beyond mere access to say that not only is it accessible, but it’s usable.
Another way of looking at the relationship between Universal Design, Accessibility and Usability --- The important point here is that Universal Design goes above and beyond what is called for in legislation and accessibility standards. Universally designed websites must meet the needs of their diverse users and provide a positive experience.Universal Design = Best Practices
In this next section we’ll cover some of the tools and techniques that will help you find and prioritize accessibility and usability problems on your website – problems which would prohibit your site from being Universally Designed.In many cases I’ll be puling examples from your own websites to illustrate some of the potential issues. There are many things that your sites do well – but for purposes of this presentation – I will be highlighting areas where they may fall short or need improvement. Please don’t take it personally if your site is mentioned! It helps to have concrete examples of what works well and what doesn’t work so well.
When assessing your website, you’re looking to see how flexible it is.You want to be sure that your website can meet the needs of most people in most situations
So – how do you do that?Well, there’s no one method that will help you determine the level of flexibility for your website. You’re going to do this through a combination of manual and semi-automated evaluation tools and techniques. We’ll look at each one in detail
The first, asking questions, is a very broad and simple exercise.
You will need to ask yourself questions about who is using your website, when, where, why – etc. And think about whether or not the needs of these individuals is being met by your website.The purpose of this exercise is to get yourself thinking more from a “user-centered” or “universal design” mindset.
First up – who is my audience In most of your cases, we’re talking about….
When are they accessing my websiteWhat is the context in which they are using my website? What is their frame of mind?
Related to When – where are they? Is it safe? If not – Is there any information on your website about how to “Escape” or clear your digital foot prints?
Why are they coming to my website?In many cases, they will be coming for help - are there obvious calls for action on your homepage and each of your pages in your site?
And what do you, as an organization, hope that people will do as a result of visiting your website. Is that obvious? Is it being clearly communicated?
Finally – How does the experience of using your website address their current needs. (Read questions.)
The next form of manual evaluation is Role Playing – which essentially is much like asking yourself questions about who, what, where, when, why and how – Again, Role Playing is another technique that you can use to put yourself in someone else’s shoes.
In this case, you are going to assume that you are an individual with each of the following functional limitations who is using your website.The purpose of this exercise, is to begin identifying potential usability or accessibility features or issues on your website. For each of these potential audiences I am going to hit on some key considerations and potential issues to watch out for.
For individuals who are blind – You want to be sure that the content makes sense when listened to via a screen reader and that you are not relying on the sense of sight or the use of a mouse for people to navigate. So – where possible (and there are some free screenreader recommendations for PC and Mac contained in the resources section at the end) – try listening to your website ….Also try using the tab key to navigate individual pages….
It’s also a good idea to critically read instructions on your website. You want to be sure that the content makes sense when listened to via a screen reader and that you are not relying on the sense of sight or the use of a mouse for people to navigate.
For individuals with low vision, some would be using a screen magnifier to access your website. But, many others will simply be looking to increase the font sizes to something more readable for themselves. In which case, you want to make sure that your website is flexible enough to allow them to increase font sizes by 200-300% without affecting their ability to read. Here is an example from the Accessing Safety website that works well
Here’s an example from Kentucky that doesn’t work as well – as it requires horizontal scrolling when font sizes are increased to the maximum.
For individuals with low vision, it is also important to ensure that there is enough contrast between font colors and background colors.Here’s an example where the links in the left column doesn’t work so well – the contrast between the blue links and blue background is not great enough to be able to read the links – for anyone, but especially someone with low vision.
For individuals who are deaf or hard of hearing - you want to be sure that any information that is conveyed via video or sound is captioned in a way that makes it possible for them to read what others can hear.
For individuals with physical disabilities, or even someone with a broken arm – assume that the use of a mouse is not possible. Can you access all content and functionality with the keyboard tab key? Is there a “skip to content” link that would allow them to quickly skip past repeating blocks (navigation) to get to content
Clicking this link would bring you down to an anchor link that you would need to place at the top of the content area on each page. An example of this can be found on the Accessing Safety Initiative website.
For individuals with a learning disability or mental health condition – there are a number of considerations – many are simply just good design principles, but when considering individuals with functional limitations – would especially apply to those with a learning disability or mental health condition.Content itself should be easy to understand. So….
Information should be grouped in a logical (and consistent) manner on each of your web pages. So…This is a case where the content is grouped well
Here is a counter example where the content is NOT grouped very well
For larger sites (meaning there are many more pages and subsections), there should be a few different pathways through content - to meet people’s differing mental models for how content is organized on your site.So….
Navigation should appear in the same location on all pagesSo…check to see that that’s true
It should also be easy to know where you are within the site. So….Here’s an example that works pretty well (could be more obvious) -
Here is an example that doesn’t work so wellThis is an issue for virtually all individuals using your website, as it is difficult to know what link you clicked on to get to a page. “What you click is what you get” – each page on your website should have a heading that matches the link clicked in the left-hand navigation.
Font styles should be consistent – with lines of text no greater than 80 characters.So…
Finally – links should make sense when read out of contextLinks that go to the same location should have the same nameand Links that go to different locations should have different names
To dig even more specifically into accessibility issues – we’ll take a look at some semi-automated evaluation toolsThis is the section of my talk where things can get quite technical. But, for today I will do my best to stick to describing potential accessibility issues and whether or not they are easy to fix. In reality, to actually fix many of these issues you would need to either have someone on staff that knows HTML or you’ll need to contract out for someone to fix these issues.
There are a number of web tools and browser plugins that you can use to assess your site – but the simplest and most comprehensive tool I’ve seen to date is “WAVE” - A free web accessibility evaluation tool provided by WebAIM
Using this will give you a good idea as to how well your site is doing overall. It will not give you an in depth understanding of what the underlying issues are or how to fix them. Nor will it help you understand how “usable” each of the accessibility features are.
There are many different views that the WAVE tool offers. The initial view is of all Errors, Features, and Alerts
Basically you need to pay extra attention to anything with a red or a yellow label. Descriptions for each of the icons are available from the “Icons Key”Anything with a green icon you should also check to ensure that they make sense from a usability perspective. The green icon itself indicates that there is an accessibility feature present, but does not tell you whether or not it’s usable.As you can see there are a lot of errors and alerts that the WAVE tool can indentify. I am going to focus ONLY on those that are most common.
The first, and most commonly found accessibility error has to do with Images.ERROR: Missing alternative textOne of the easiest accessibility errors to fix is missing, questionable, unhelpful, or redundant Alt text.This is mainly an issue for individuals who are blind and using a screenreader to listen to content on your website. Where they cannot “see” the content of an image, Alt Text, will convey such meaning to these individuals. Alt text can also be beneficial to individuals with slow internet connections, as it would display first on the webpage, while the image is being loaded.Solution: When uploading images to your final website, be sure to add/enter Alt text – but think about what you are adding in the context of the page.
ALERT: Suspicious alternative textIn the previous example there was no alt text. However, when there is alt text, the wave tool shows what it is right next to the image.This is an example of something identified by the WAVE tool as “Questionable” Alt text.Alt text should not be the name of the image file itself.
This image shows up as having Alt text – and thus appears as being an accessibility feature – but you’ll notice that the phone number is not included in that Alt Text. If you are putting important text into an image – you need to make sure that information is included in the Alt text as well.
Alt=Alt ALERT: A nearby image has the same alternative textDo not repeat the alt text of an image in the adjacent text (use null alt text instead)Or include more than one image with the same alt text
If the image is purely decorative, there is no need to provide Alt text – however, you must provide “null” alt text – essentially a space – to indicate that the screanreader can just skip over that image.
Provide alt text for the main image and hot spots of image maps
The nextset of errors has to do with LinksALERT: Problematic link textLink text does not make sense out of context, contains extraneous text (such as "click here"), or is the same as another link on the page, but links to a different location.There are a couple issues being shown here.1. Links with same name, go to different location2. Non-descriptive link – does not make sense out of contextAn issue for everyone. Though, in the case of “Here”, especially an issue for individuals who are blind. It is also an EASY thing to fix.
This is an alert that two of the links in the list are for PDF filesALERT: Link to PDF document A link to a PDF document is present. Provide an HTML alternative and/or create a tagged PDF file that is directly accessible to assistive technologies.ALERT: Link to Word document A link to a Word document is present. Provide an HTML alternative and/or ensure the Word document is natively accessible.This is mainly an issue for individuals who are blind. Can be harder to fix – though not impossible. And, using WORD instead of PDF can often be easier in terms of creating something accessible.This is also an issue for ALL individuals in that #1 is not clear that it links to something different – but #8 is more specific.
ALERT: Popup window A link is set to open a new window. Cause the link to open in the same window or inform the user that the link will open a new window.An issue for all individuals. Novice, Blind, etc. EASY FIX
The next set of errors has to do with formsWell-organized forms benefit all individuals. For individuals using a screenreader, text that immediately precedes a form field is assumed to be its label. However, proximity alone is sometimes not enough. Individuals who are blind often navigate websites through use of the Tab key. This allows them to quickly find links, buttons, and form fields. When they do so, if a label is not explicitly associated with a form field via HTML, its purpose would be unclear to the screen reader user. EASY FIX
The outlines view in the WAVE toolbar is good for identifying that there is a clear hierarchy on the page and that headings are labeled as such.
If there are no headings for a particular page – it will say soThis is primarily an issue for non-sighted individuals who are using a screen reader to access your website. Where sighted individuals can visually see the hierarchy of a page, non-sighted individuals rely on structural cues that are marked up through use of appropriate HTML tags. EASY FIX. Requires “tagging” headings as such
Otherwise, headings will be listed in the order that they appearLook to see that all things that are visually represented as headings are included in the Heading View – and that they follow a logical “outline” order. Note…
For instance, this page skips H2’s
For individuals who are using the tab key – or for those using screenreadersWill help you identify if it’s in a logical order
An example where the order could be improvedUnless you provide a way to skip past that content – because it repeats on every pageHarder to fix as it involves the whole structure of the website
An example from Web AIM site – couldn’t find one off hand on any of your websites.
For more information on what your website would look like to individuals with various forms of color-blindness, you can try out the Colorblind filter
This is also a web based tool….
Using this tool will give you an idea of what your website would look like in various color blind scenarios. It will not tell you whether or not there is a problem – you will have to interpret for yourself.
An example
For those who are technologically savvy – here are some Add-ons for Firefox’s web browser – which can help you further assess accessibility
Now that you’ve identified some potential accessibility problems on your website, how do you decide how severe the problem is
Here’s a guide I use to determine severity of accessibility problems…
Your next step is to decide what you want to do about any potential accessibility, usability or universal design issues
You have to …
Some pros and cons of undertaking a redesign of your website
Some pros and cons of refining your website
Regardless of how you choose to proceed – if you don’t already have someone on staff, you will need to find a resource for design and/or developing your redesigned or refined site.
WITH accessibility experience…Nothing definitive – some things that have worked in the pastSometimes you can find one person who can do bothSometimes you can find one person who knows another person who can do the other pieceSmall “studios” and “design shops” will be more expensive than a freelance individual – they have more overhead.
These are just some keywords – I’m probably missing about a dozen others you could use. If they don’t know what you’re talking about – then there’s a problem.Some of the keywords can be helpful to use- but beware that someone may have a “user centered” design and development approach – but NOT know the ins and outs of accessibility
Make sure to encourage time for revision – and plan for it. Spend that time assessing the drafts that are turned into you – and ask for revisions where appropriate. If you are spending the money on your website – either to redesign or refine it – it’s worth putting in a little extra to get what you really want.
Would the order make sense for individuals using a screenreader?Does it leave enough room for white space?
Ask yourself everything we talked about at the beginning of this presentation. Plus…