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
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,218 views

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 ...

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.

Statistics

Views

Total Views
1,218
Views on SlideShare
1,210
Embed Views
8

Actions

Likes
1
Downloads
3
Comments
0

1 Embed 8

http://www.linkedin.com 8

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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…
  • Again on the manual techniques, plus the others

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. Presented at Applying Principles of Universal Design to Websites to Serving Survivors with Disabilities & Deaf Survivors Training, Boston MA, March 2010 Presentation Transcript

  • Universal Design and YOUR WebsiteLISA SPITZlisa@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 MAUniversal Design and YOUR Website
  • 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 DiscussionUniversal Design and YOUR Website
  • Who Benefits?Universal Design and YOUR Website
  • 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
  • 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
  • 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 doesnt 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
  • Why Is it Important?Universal Design and YOUR Website
  • 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.orgUniversal Design and YOUR Website
  • 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 DisabilityUniversal Design and YOUR Website
  • 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 DisabilityUniversal Design and YOUR Website
  • 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 DisabilityUniversal Design and YOUR Website
  • Why Is It Important? Even those with situational limitations (a temporary loss of functional ability)Universal Design and YOUR Website
  • Universal Design, Accessibility, andUsability of WebsitesUniversal Design and YOUR Website
  • Universal Design, Accessibility, and Usability Accessible Usable Human Centered Universally Designed Websites = Best PracticesUniversal Design and YOUR Website
  • 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/accessibilityUniversal Design and YOUR Website
  • 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.htmlUniversal Design and YOUR Website
  • 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
  • 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/#USUniversal Design and YOUR Website
  • 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 4Universal Design and YOUR Website
  • 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 UsableUniversal Design and YOUR Website
  • Universal Design, Accessibility, and Usability Universal Design Usability Accessibility LegislationUniversal Design and YOUR Website
  • Assessing Your WebsiteUniversal Design and YOUR Website
  • Assessing Your Website Goal = Flexibility Meet the needs of most people in most situationsUniversal Design and YOUR Website
  • 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 FirefoxUniversal Design and YOUR Website
  • Ask QuestionsUniversal Design and YOUR Website
  • Assessing Your Website Who, When, Where, Why, What, How – Website audiences – Context of use Purpose =develop a “user-centered” mindsetUniversal Design and YOUR Website
  • 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
  • Assessing Your Website When are they accessing my site? – What just happened? – What else is going on around them?Universal Design and YOUR Website
  • Assessing Your Website Where are they when viewing my site? – Is it “safe”? – Is there information on how to “ESCAPE” or clear digital “footprints”? DoUniversal Design and YOUR Website
  • Assessing Your Website Why are they coming to my site? – Whatare their immediate needs? – Is there information on how to get help? DoUniversal Design and YOUR Website
  • 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
  • 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
  • Role PlayingUniversal Design and YOUR Website
  • 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 issuesUniversal Design and YOUR Website
  • 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 toUniversal Design and YOUR Website
  • Assessing Your Website Blindness – Read instructions – Verifies that instructions do not rely on shape, size, color, or visual location DoUniversal Design and YOUR Website
  • Assessing Your Website Low Vision – Increase font sizes 200-300% – Verifies that font sizes are scalable without a loss in usability DoUniversal Design and YOUR Website
  • Assessing Your Website Low Vision – Increase font sizes 200-300% – Verifies that font sizes are scalable without a loss in usability Don’tUniversal Design and YOUR Website
  • Assessing Your Website Low Vision – Lower the contrast on your computer – Helps identify areas where contrast between foreground & background colors is insufficient Don’tUniversal Design and YOUR Website
  • 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 DoUniversal Design and YOUR Website
  • 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 areaUniversal Design and YOUR Website
  • Assessing Your Website “Skip to Content” link … DoUniversal Design and YOUR Website
  • 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
  • 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 DoUniversal Design and YOUR Website
  • Assessing Your Website Learning Disability / Mental Health Condition – Logical chunks.. Don’tUniversal Design and YOUR Website
  • Assessing Your Website Learning Disability / Mental Health Condition – Look for multiple ways of navigating through the website DoUniversal Design and YOUR Website
  • Assessing Your Website Learning Disability / Mental Health Condition – Check that navigation appears in the same location on all pages DoUniversal Design and YOUR Website
  • Assessing Your Website Learning Disability / Mental Health Condition – Check that your current location on the website is clearly marked DoUniversal Design and YOUR Website
  • Assessing Your Website Learning Disability / Mental Health Condition – Current location…. Don’tUniversal Design and YOUR Website
  • Assessing Your Website Learning Disability / Mental Health Condition – Look for consistent font styles and easy to read line lengths DoUniversal Design and YOUR Website
  • 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 namesUniversal Design and YOUR Website
  • WAVE ToolUniversal Design and YOUR Website
  • How to Assess Your Site WAVE (Web Accessibility Evaluation Tool) – http://wave.webaim.orgUniversal Design and YOUR Website
  • 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
  • How to Assess Your Site WAVE – “Errors, Features, and Alerts” View – Checks for overall accessibility errors, alerts, and featuresUniversal Design and YOUR Website
  • How to Assess Your Site WAVE – “Icons Key” – Quick reference for icons (http://wave.webaim.org/icons)Universal Design and YOUR Website
  • How to Assess Your Site Alternative Text for Images – No Alt textUniversal Design and YOUR Website
  • How to Assess Your Site Alternative Text for Images – Questionable Alt textUniversal Design and YOUR Website
  • How to Assess Your Site Alternative Text for Images – Unhelpful Alt textUniversal Design and YOUR Website
  • How to Assess Your Site Alternative Text for Images – Redundant Alt textUniversal Design and YOUR Website
  • How to Assess Your Site Alternative Text for Images – Null Alt text for decorative imagesUniversal Design and YOUR Website
  • How to Assess Your Site Alternative Text for Images – Image Map without alt textUniversal Design and YOUR Website
  • How to Assess Your Site Problematic linksUniversal Design and YOUR Website
  • How to Assess Your Site Links to PDF, Word, or other documentsUniversal Design and YOUR Website
  • How to Assess Your Site Links to popup windowsUniversal Design and YOUR Website
  • How to Assess Your Site Form fields without labelsUniversal Design and YOUR Website
  • How to Assess Your Site Form fields with labelsUniversal Design and YOUR Website
  • How to Assess Your Site WAVE – “Outline” View – Are headings labeled? Is there a clear hierarchy?Universal Design and YOUR Website
  • How to Assess Your Site No heading structureUniversal Design and YOUR Website
  • How to Assess Your Site Incomplete heading structureUniversal Design and YOUR Website
  • How to Assess Your Site Incorrectly ordered headingsUniversal Design and YOUR Website
  • How to Assess Your Site WAVE – “Structure/Order” View – Is the tab and screen reader order logical?Universal Design and YOUR Website
  • How to Assess Your Site Reading and navigation out of orderUniversal Design and YOUR Website
  • How to Assess Your Site Forms or Tables out of orderUniversal Design and YOUR Website
  • Colorblind FilterUniversal Design and YOUR Website
  • How to Assess Your Site Colorblind Web Page Filter – http://colorfilter.wickline.org/Universal Design and YOUR Website
  • 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 pictureUniversal Design and YOUR Website
  • How to Assess Your Site Not enough contrast for individuals who are colorblindUniversal Design and YOUR Website
  • Add-ons for FirefoxUniversal Design and YOUR Website
  • 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
  • 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
  • Determining SeverityUniversal Design and YOUR Website
  • 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
  • Planning Next StepsUniversal Design and YOUR Website
  • 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
  • Planning Next StepsRedesign 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 websiteUniversal Design and YOUR Website
  • Planning Next StepsRefine 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 shapeUniversal Design and YOUR Website
  • Working with Designers andDevelopersUniversal Design and YOUR Website
  • 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-sigsUniversal Design and YOUR Website
  • 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-centeredUniversal Design and YOUR Website
  • 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
  • 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
  • Planning Next Steps Assessing design deliverables - Wireframes – Do wireframes depict a clear and simple hierarchy?Universal Design and YOUR Website
  • Planning Next Steps Assessing design deliverables – Wireframes – Is content organized in logical chunks?Universal Design and YOUR Website
  • Planning Next Steps Assessing design deliverables – Design comps – Manual Evaluation Techniques  Ask questions: Who, When, Where, Why, What, How  Role PlayingUniversal Design and YOUR Website
  • Planning Next Steps Assessing design deliverables – Design – Are images and dynamic/moving content free of critical information?Universal Design and YOUR Website
  • Planning Next Steps Assessing design deliverables – Design – Will videos or audio clips have alternate representations? DBTAC - New England ADA CenterUniversal Design and YOUR Website
  • 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 FirefoxUniversal Design and YOUR Website
  • 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
  • ResourcesUniversal Design and YOUR Website
  • 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/ WebAIMs WCAG 2.0 Checklist:http://www.webaim.org/standards/wcag/checklistUniversal Design and YOUR Website
  • 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/completeUniversal Design and YOUR Website
  • 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
  • Questions and DiscussionUniversal Design and YOUR Website
  • LISA SPITZ lisa@lisaspitz-design.comThank You!Universal Design and YOUR Website