Accessing Higher Ground: Practical Accessibility Testing
•Als PPTX, PDF herunterladen•
0 gefällt mir•492 views
How do you know if your web site is accessible? Can automated testing tools help? How do you create and manage a culture of accessibility on a large university campus with a shrinking budget? Glenda will share gems from her 10+ years of experience testing sites for accessibility. Equip yourself with free and powerful testing tools. Learn how to turn it up a notch when you need to monitor accessibility across a vast enterprise. See some of the very latest testing tools that will help you evaluate color contrast, dynamic content and WAI-ARIA compliance. Glenda Sims is currently a senior accessibility consultant at Deque. She spent over a decade as the accessibility expert and web standards evangelist at the University of Texas at Austin. Keypoints New free and powerful accessibility testing tools. The power of enterprise level accessibility tools in action. Importance of integrating accessibility testing into the software development life cycle.
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (17)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Accessing Higher Ground: Practical Accessibility Testing
- 1. Practical Accessibility Testing Your Chance to Open the Web
- 3. Open Web For Everyone to connect communicate share & build knowledge opportunity to reach our full potential
- 4. The Open Web is for Everyone and on Everything Not just for star bellied sneetches with iphones
- 5. Open Web = Accessible Web When all users regardless of disability can obtain the same information and perform the same functions
- 6. Do you recognize this man? • He is a world class runner.
- 7. Do you recognize him now? • His name is Oscar Pistorius • He is also known as the “Blade Runner” and the “fastest man on no legs”
- 8. Oscar Pistorius • Blade Runner • Fastest man on no legs • Ruled Ineligible for Bejing Olympics
- 9. His prosthetics make him more than able-bodied
- 10. AccSEXYbility
- 11. Practical Accessibility Testing How Open Are You?
- 12. Ensuring Accessibility • Testing Tools • User Testing • Open Web Design Process
- 13. Open Web Ecosystem Build with valid code http://validator.w3.org/unicorn/
- 14. Accessibility Testing Tools • Accessibility/Web Standards Validators • Listening with screenreaders • Testing with keyboard / no speakers • Authoring Tool accessibility features • Enterprise Accessibility Reports
- 15. Accessibility Validators - Page by Page – CSS/HTML Validators – The Wave – Web Developer for Firefox – Accessibility Toolbar for IE – Luminosity Contrast Ratio Analyser – FireEyes Accessibility Tools can only automatically test approximately 27% of the issues. Accessibility Testing Requires the Human Brain
- 16. Testing a Site www.utsports.com or www.texassports.com – HTML/CSS Validator • http://validator.w3.org/unicorn/ – Wave • http://wave.webaim.org/ – Web Developer (Firefox Extension) • https://addons.mozilla.org/en-US/firefox/addon/60 – Luminosity Contrast Ratio Analyser • https://addons.mozilla.org/en- US/firefox/addon/juicy-studio-accessibility- too/?src=search – Headings Map • http://addons.mozilla.org/en- us/firefox/addon/headingsmap/
- 17. UT Longhorns Home Page
- 18. Unicorn – HTML Validator • Go to http://validator.w3.org/unicorn/ • Type in URL • Press “Check” button
- 19. HTML Validator – 454 Errors!
- 20. WAVE • Go to http://wave.webaim.org/ • Type in URL to test • Press “WAVE this page” button
- 21. WAVE - 77 Accessibility Errors!
- 22. Web Developer Toolbar • Install Web Developer Toolbar in Firefox • Open Firefox and Select “Replace Images with ALT Attributes”
- 23. Check UT Longhorn Home Page with Images Replaced by ALT
- 24. Color Contrast • Install Juicy Studios Accessibility Toolbar in FireFox https://addons.mozilla.org/en-US/firefox/addon/juicy-studio- accessibility-too/?src=search • Select “Lumunosity Contrast Ratio” from Toolbar
- 26. Headings Map • Install Heading Map plugin in Firefox http://addons.mozilla.org/en- us/firefox/addon/headingsmap • Select “Headings Map” from the Tools menu
- 27. Heading Issues
- 28. Testing a Site www.utsports.com or www.texassports.com www.deque.com/products/deque- labs/worldspace-fireeyes
- 29. Demo of FireEyes Accessibility Testing Tool
- 30. Using FireEyes to Test for Color Contrast
- 31. FireEyes Color Contrast Results
- 32. Listen Real test: Can users with disabilities actually use your site? Test representative pages with a screenreader • JAWS screenreader www.freedomscientific.com • Fangs screenreader emulator standards- schmandards.com/projects/fangs
- 33. Keyboard Alone Test representative pages with a keyboard alone. • Mouse requires mobility & vision • Keyboard Access allows assistive technology access
- 34. No Speakers Test multimedia pages with no speakers
- 35. Enterprise Tools • Define URL & Spider Profile • Select Testing Criteria • Reports of Progress Over Time
- 36. Enterprise Accessibility Testing Tool • Worldspace by Deque
- 37. Importance of User Testing
- 38. User Testing Just Ask: Integrating Accessibility Throughout Design By Shawn Lawton Henry www.uiaccess.com/justask/ Accessibility is a subset of Usability Testing.
- 39. A Practical Testing Plan 1. Code Validation 2. Browser Testing – turn off images – don’t use the mouse – turn off speakers 3. Online Accessibility Testing (representative pages) – use more than one tool, example: Wave & FireEyes 4. Screenreader Testing – JAWS 5. Enterprise Accessibility Report – like Worldspace 6. Hands-on Accessibility Testing
- 40. Web development process 40
- 41. Accessible web development 1. Plan 2. Equip Assess site, Adopt development and people, process test tools Integrate with IDE, WCM Benchmark and Testing tools industry Review design and coding standards 3. Empower Develop roadmap Role-specific training 4. Test Distributed unit tests Centralized, automated tests 6. Sustain Expert usability evaluation Continuous monitoring 5. Remediate with assistive technology Vendor verification Prioritize New employee training Fix Retest 41
- 42. Create an Accessibility Plan 1. Gather Baseline Information 2. Gain Top Level Support 3. Organize Web Accessibility Group 4. Define a Standard 5. Create an Implementation Plan 6. Provide Training and Technical Support 7. Monitor Conformance 8. Remain Flexible Through Changes WebAim 8 Step Implementation Model www.webaim.org/articles/implementati on 42
- 43. Implementation Strategy - Prioritize • Top 10% of pages based on use • Critical Pages (required for your business purpose) • Audience Public Members Employees Geeks 43
- 44. Implementation Strategies Accessible (immediately, no excuses) • All new or revised pages • Top 10% pages (based on analytics) • Critical pages • Accessibility pages Accessible by (date) • Legacy Web Pages * * encourages archive of old / outdated pages! 44
- 45. It is up to YOU! Good Design is Accesible design For most people technology makes things easier. For people with disabilities, technology makes things possible. President’s Council on Disabilities @goodwitch glenda.sims@deque.com
Hinweis der Redaktion
- First, let me introduce myself. I’m Glenda (the goodwitch) Sims. I’m the accessibility goddess at Deque where I get to share my passion and expertise for the open web with .gov, .edu and companies ranging from small business to Fortune 500. I’m also a consultant, judge and trainer for the non-profit Knowbility (whose mission is Barrier Free IT) and I give back to the web by volunteering on the web standards project including co-leading the Open Web Education Alliance, an Incubator Group in the W3C.
- When Sir Tim Berners-Lee invented the web...he always intended it to be an open platform for society to connect, communication and build knowledge.
- Do you recognize this man? (pause)He is a world class runner.
- Do you recognize him now?His name is Oscar PistoriusHe is also known as the "Blade Runner" and "the fastest man on no legs”
- Pistorius is not discouraged, believing every bit in his credo, "You're not disabled by the disabilities you have, you are able by the abilities you have.”May 2008 the ruling was overturned. Pistorius is confident that he will qualify for 2012 Olympics in London.See latest on his time trials at http://sportsillustrated.cnn.com/2011/writers/david_epstein/06/11/oscar.pistorius.worlds/
- Accessibility is Sexy. Accessibility is Beautiful.Accessibility is Innovation. Think about accessibility as Excess Ability – More than HumanIBM and Apple actually consider accessibility to be an innovative business strategy
- The open web is an ecosystem, and it takes all of us, developers, users, content creators, browser vendors and assistive technology companies, working together, by the same rules, to create a web that is accessible to all. Description of open web ecosystem image from W3C - illustration with labeled graphics of boxes, content, and people. at the top center is a pie chart, an image, a form, and text, labeled 'content'. coming up from the bottom left, a line connects 'developers' through 'authoring tools' and 'evaluation tools' to 'content' at the top. coming up from the bottom right, a line connects 'users' to 'browsers, media players' and 'assistive technologies' to 'content' at the top.
- Accessibility Testing Tools come in three flavors. Manual tools (which remind me of taking the stairs). Authoring Tool (which remind me of taking the escalator) and Enterprise level tools (which remind me of taking a high speed elevator).
- This slide is an example of how an accessibility expert might use page-by-page testing tools to begin the process of seeing how accessible a page is.
- Rather than just describe these testing tools, I’d like to show you these tools in action.
- Let’s start by looking at the UT Longhorns home page at www.texassports.com.
- First, I use the W3C’s Unified Validator, also known as Unicorn, to validate the HTML and the CSS. While this is not a strict requirement of accessibility, it is a good indicator of the quality of the page from a professional standard.
- 454 errors is not a good sign. I can predict before even running the first accessibility testing tool, that this page will have accessibility issues.
- A simple and powerful free tool I’ve often used in the past is the WAVE.
- With one click of the “wave this page” button, we can see there are at least 77 accessibility errors. Red icons indicate actual accessibility errors. Yellow icons indicate issues that would need to be tested manually. Green icons indicate good accessibility features that have been found on the page. And, even though I’ve described these icons by color, the Wave tools itself is fully accessible. Each of these icons have unique symbols that can be distinguished without relying on color. And the alt text for each icon is accurate and accessible.
- The web developer toolbar is another useful tool for your toolbelt. I’ve used the “Replace Images with ALT attribute” option to check if the alt text conveys all the essential information from the images.
- A quick check of the UT Longhorn home page with images replaced by the alt text, shows us that the alt text for images is not conveying essential information that was in the images alone. For example, the main stories section in the top left of the page has been completely lost when images are turned off.
- Color contrast is a very valuable part of accessibility testing. I still like to show people the simple tool in Juicy Studios Accessibility Toolbar for testing color. There are more sophisticated tools that I use now, that make my job of testing for color contrast even easier. But I like this tool because it is an easy way to explain the concepts of color contrast quickly.
- The results from this color contrast testing tool are in a table that lists all the color contrast issues (and the associated html element, foreground color, background color and luminosity contrast ratio). I will warn you that this report shows all the color contrasts on the page, even the items that pass. It also shows potential color contrast issues based on what is possible using the css. So, there are usually a number of false positives in the report. Still, I like it as a quick way to see what is going on, and especially for explaining the concepts.
- Headings are very valuable to accessibility. I recently became aware of a really neat tool called the Headings Map that allows you to quickly see the heading structure of a page.
- Here we see the heading structure for the texassports.com home page. All pages should have at least 1 header level one. This page only has 5 total headings and all of them are level 2. That is not good structure, and from a quick visual review of the page, we can easily see additional sections of the page that should have headings, for example “Main Stories” “More Headlines”, “Feature Stories”, “Calendar” and “Texas Videos” .
- So, I’ve shown you a number of different tools that I’ve had in my accessibility tool belt including the HTML validator, the Wave, the Web Developer Toolbar, Color Contrast and Headings Map…but each of these tools are separate tools. Wouldn’t it be nice if there was one tool that had all these features? Let me show you the FireEyes tool. A free, page-by-page testing tool that will blow your socks off.
- FireEyes is a testing tool that works in FireBug on FireFox. Once you have it installed, simply bring up the web page you want to test in FireFox and click on the “Now” button to analyze the page for accessibility issues. You will be rewarded with a list of accessibility issues with access to the exact line of code with the issue, the ability to highlight visually where these issue is on the page, a brief tutorial (in “details”) on how to solve this issue and more.
- The FireEyes tool also has a powerful color contrast tool built in. So, if you are wondering if the grey on black text at the bottom of your page is accessible. Simply pull the page up in FireFox and press the “Color” button in FireEyes
- And you will discover that dark grey on black only has a color contrast ratio of 2.16 to 1. There are very few (if any) false positives in this color contrast test. In fact…if you find any false positives, let me know…because we want this test to be 100% accurate. The more accurate an accessibility testing tool is, the more quickly you can find and resolve accessibility errors.
- As valuable as automated accessibility testing tools are, the real test is if real people with disabilities can actually use your site. So, one of my first tests after running a FireEyes, is to test a site using a screenreader like JAWS. I use JAWS because it is the predominant screenreader in the U.S. I consider my client and their customer base when selecting the screenreader to use for testing. I don’t use screenreader emulators. They are useful. But, as an accessibility expert, I think it is important for me to test with the real thing.
- My next step is to test for keyboard alone. Can I access all the functionality on the page without using the mouse. Keyboard access is critical for screen reader users and for mobility impaired users.
- One of my favorite tests is to turn off my speakers and see if I still have access to all the essential content without audio.
- Enterprise Accessibility Testing Tools put you in a position of having super human strength. Having enterprise class testing tools is a bit like having the accessibility super heroes on your team. Imagine having a tool that could scan your entire enterprise site on a regular basis and alert you to accessibility issues as they occur.
- Here is a screenshot of a powerful accessibility dashboard from Worldspace. Worldspace is an enterprise class accessibility testing tool. This is an example of an imaginary university with separate accessibility reports set up for each college and each business unit on campus. You can quickly log into this dashboard and see whose sites are in good shpae, like the “Web Technology Team” who has 98% clean pages. And whose sites are an accessibility nightmare, like “Athletics” with 0% clean pages. Having a dashboard like this, empowers you to communicate the accessibility health of your organization to upper management while simultaneously motivating the individual business units to “get their scores” up. In my past life, as the accessibility goddess of UT Austin, I actual set up a rewards program based on my dashboard. I wrote a letter of thanks for any webmaster show brought their scores up to 90% clean pages or higher, and I also offered to buy them a book that would make them smarter as a webmaster. Each book I bought was a priceless investment in the open web.
- How important is User Testing? Well, I like to use this comic strip to make my point.Cell 1 – Caption: How the customer explains it. Image of a triple-level swing hanging from a branch in a tree.Cell 2 – Caption: How the project leader understood it? Image of a single-level swing hung in such a way that you would smash into the trunk of a tree if you tired to use it.Cell 3 – Caption: How the Analyst designed it. Image of a tree with the center of the trunk cut out so you could try to use the swing. The tree is being held up on both sides by braces so it won’t fall down (since the center of the trunk is gone).Cell 4 – Caption: How the Programmer wrote it. Image of a swing tied to the trunk of a tree. The swing is not usable.Cell 5 – Caption: What the consumer really needed. Image of a simple tire swing.Moral of the story. If you don’t test your software, you will be sorry.
- The real test of accessibility is running usability testing with people who have disabilities. Shawn Henry of the W3C has written a wonderful book on the subject and the entire book is free online at www.uiaccess.com/justask/
- Here is a sample of a practical accessibility testing plan I used when I was at the University of Texas at Austin.
- How does accessibility fit into the standards web development process?