ACCESS to Postsecondary Education Through Universal Design for Learning

ACCESS to Postsecondary Education through Universal Design for Learning

Colorado State University Web Accessibility Tests Using Firefox and WAVE Contents

1. Introduction 2. The 12-Step Firefox Test 1. Check version 2. View status bar 3. Check font sizes 4. Check organization of content 5. Check alt text 6. Check for "noscript" alternatives 7. Check that content and navigation without JavaScript 8. Check page information 9. Check forms 10. Check links 11. Check media elements 12. Check security settings 3. Firefox Add-ons for Developers 4. WAVE Accessibility Test

Introduction – About this test…

Is your website usable by the largest possible audience?

Does it comply with modern, W3C standards?

Will it continue to work with emerging technologies?

Wonder no longer! This document will introduce you to several free and easy-to-use tools to help you check your website for usability and accessibility to maximize impact with your audience. The tools featured include the Firefox browser by Mozilla, the large and growing complement of Firefox Add-ons, and the online accessibility checker, WAVE. Introduction – About Web Accessibility… Web accessibility is often achieved by providing information in mulitple ways and making sure that alternative sources of information are available for users with disabilities. If we expand our definition of web accessibility to include compatibility with diverse technologies (computer operating systems, web browsers, screen sizes, etc.) as well as the learning styles and abilities of users, we find a "universal" advantage in developing websites that are "accessible." After all, an accessible website will reach the widest possible audience, it will be easily understood by viewers, it will be cataloged more readily by search engines—and, because it conforms to modern web standards, it will be more compatible with future browser technologies. A 12-Step Test for Your Web Pages Using the Firefox Browser Firefox - rediscover the web. You may already be using the Firefox browser, but did you know that the software contains the following built-in web development tools to help you check your site? It does, as you will discover in the following twelve tests. 1. First, check your version of Firefox. From the Help menu, choose About Mozilla Firefox. (From now on, we'll use a shorthand to indicate the steps you should take (e.g., Help > About Mozilla Firefox). Note: This tutorial was written for Firefox version 2.0. Earlier or later versions may differ from the descriptions and images below.) Check version Firefox version number dialog 2. View the Status Bar. View > Status Bar (Alt + V, B). Turn your status bar on so that you can hover over a link to see its URL. This is an easy way to double check your work. (It's also a safety precaution when clicking on suspicious-looking links in pages of dubious authenticity.) Choose 'Status Bar' from the 'View' menu. 3. Check your font sizes. View > Text Size > Increase (CTRL +) or Decrease (CTRL - ) Can people vary the size of your text to accommodate their vision? How does the text flow and wrap at different sizes? How flexible is your page layout? (Note: Firefox will scale text up and down regardless of whether Cascading Style Sheets (CSS) specify relative or absolute font sizes. To check for relative text sizes, open the page in Microsoft Internet Explorer and choose View > Text Size to try different settings. If the text size doesn't change, the page uses fixed sizes in CSS. This limits the page's accessibility and usability for many viewers.) (Examples: Good: http://screenfont.ca/, Bad: http://www.cvmbs.colostate.edu/) Choose 'Text Size Increase' or 'Text Size Decrease' from the 'View' menu. 4. Check the organization of content by disabling style sheets. View > Page Style > No Style (Alt + V, Y, N) Is your information organized so that it can be understood without the visual formatting? (Examples: Good: http://www.colostate.edu/Depts/ATRC/PDI/, Bad: http://www.iditarodstore.com/browse.cfm) Select 'No Style' to test your reading order. Note: For tests 5 through 7, open the Options dialog box. (Tools > Options) Options give you the ability to turn off JavaScript and images. 5. Check your alt text by turning off image loading. Uncheck "Load images automatically," then reload the page (ALT + T, O, Tab to Web Features, press enter, tab to desired feature. Use F5, or CRTL R, add shift to override browser caches). Does your page lose important information without the graphics? Check whether your page is understandable without the images. 6. Check for "noscript" alternatives by disabling JavaScript. Tools > Options > Content. Uncheck "Enable JavaScript." Reload page (ALT + T, O, Tab to Web Features, press enter, tab to desired feature. Use F5, or CRTL R, add shift to override browser caches). Do users receive alternate content when JavaScript is disabled or unavailable? (Examples: Good: http://www.ot.cahs.colostate.edu/) Check whether your page works without JavaScript. And while you have JavaScript disabled... 7. Check that all important content on your page is still viewable, and that the site is navigable, with JavaScript disabled. (Example: Good: http://www.cvmbs.colostate.edu/; Bad: http://www.cvmbs.colostate.edu/mip/) 8. Check your page information. Tools > Page Info, General (Alt + T, I, use CTRL Tab to move through file tab items). Choose 'Page Info' from the Tools menu to test many aspects of your page. The General tab shows basic page information as well as your meta data. (Example: http://www.cvmbs.colostate.edu/mip/) General page information. 9. Check your forms. Tools > Page Info, Forms. (Alt + T, I, CTRL Tab to Forms) Do the interactive parts make sense? Are the form fields and buttons logically marked up and labeled? (Example: Good: http://lib.colostate.edu/, Bad: http://www.aa.com/apps/reservations/RTripSearchFlights.jhtml) Check your forms. Remember to connect labels with form elements. 10. Check your links, especially the text. Tools > Page Info, Links (Alt + T, I, CTRL Tab to Links). Can a user tell where they are being directed? Check your link text to ensure it is understandable. Check your link text to ensure it is understandable. 11. Check media elements. Tools > Page Info, Media (Alt + T, I, CTRL Tab to Media). Are images all a reasonable size? Does the alternative text seem appropriate, describing information that is relative to your page? Check your media size as well as the alt-text associated with it. Check your media size as well as the alt text associated with it. 12. Check security settings, if applicable. Tools > Page Info, Security (Alt + T, I, CTRL Tab to Security). Are you operating securely? Is your content encrypted? Check security settings to view information about encryption and certificates.