1. Web Accessibility Tests Using the Firefox Browser ACCESS to Postsecondary Education through Universal Design for Learning

2. Introduction – About this test… Is your website usable by the largest possible audience? Is your website usable by the largest possible audience? Does it comply with modern, W3C standards? Does it comply with modern, W3C standards? Will it continue to work with emerging technologies? Will it continue to work with emerging technologies? Wonder no longer! 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. 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.

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

4. A 12-Step Test for Your Web Pages Using the Firefox Browser 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? 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. It does, as you will discover in the following twelve tests.

5. 1. 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). 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.) Note: This tutorial was written for Firefox version 2.0. Earlier or later versions may differ from the descriptions and images below.)

6. 2. View the Status Bar. View > Status Bar (Alt + V, B). View > Status Bar (Alt + V, B). Turn your status bar on so that you can hover over a link to see its URL. 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. 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.) (It's also a safety precaution when clicking on suspicious- looking links in pages of dubious authenticity.)

7. 3. Check your font sizes. View > Text Size > Increase (CTRL +) or Decrease (CTRL - ) View > Text Size > Increase (CTRL +) or Decrease (CTRL - ) Can people vary the size of your text to accommodate their vision? Can people vary the size of your text to accommodate their vision? How does the text flow and wrap at different sizes? How does the text flow and wrap at different sizes? How flexible is your page layout? 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.) (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.usnews.com/usnews/ http://screenfont.cahttp://www.usnews.com/usnews/http://screenfont.cahttp://www.usnews.com/usnews/

8. 4. Check the organization of content by disabling style sheets. View > Page Style > No Style (Alt + V, Y, N) View > Page Style > No Style (Alt + V, Y, N) Is your information organized so that it can be understood without the visual formatting? 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 ) http://www.colostate.edu/Depts/ATRC/PDI/http://www.iditarodstore.com/browse.cfmhttp://www.colostate.edu/Depts/ATRC/PDI/http://www.iditarodstore.com/browse.cfm

9. Note: For tests 5 through 7, open the Options dialog box. (Tools > Options) Options give you the ability to turn off JavaScript and images. Options give you the ability to turn off JavaScript and images.

10. 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). 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? Does your page lose important information without the graphics?

11. 6. Check for "noscript" alternatives by disabling JavaScript. Tools > Options > Content. 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). 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? Do users receive alternate content when JavaScript is disabled or unavailable? (Examples: Good: http://www.ot.cahs.colostate.edu/) (Examples: Good: http://www.ot.cahs.colostate.edu/) http://www.ot.cahs.colostate.edu/ And while you have JavaScript disabled...

12. 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.current.tv/network/pods/tech/mostrec ent) (Example: Good: http://www.cvmbs.colostate.edu/ ; Bad: http://www.current.tv/network/pods/tech/mostrec ent)http://www.cvmbs.colostate.edu/ http://www.current.tv/network/pods/tech/mostrec enthttp://www.cvmbs.colostate.edu/ http://www.current.tv/network/pods/tech/mostrec ent

13. 8. Check your page information. Tools > Page Info, General (Alt + T, I, use CTRL Tab to move through file tab items). 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. 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. The General tab shows basic page information as well as your meta data. (Example: http://www.colostate.ed u/depts/ATRC/ ) (Example: http://www.colostate.ed u/depts/ATRC/ ) http://www.colostate.ed u/depts/ATRC/ http://www.colostate.ed u/depts/ATRC/

14. 9. Check your forms. Tools > Page Info, Forms. (Alt + T, I, CTRL Tab to Forms) Tools > Page Info, Forms. (Alt + T, I, CTRL Tab to Forms) Do the interactive parts make sense? Do the interactive parts make sense? Are the form fields and buttons logically marked up and labeled? Are the form fields and buttons logically marked up and labeled? (Example: Good: http://lib.colostate.edu/, Bad: http://www.aa.com/apps/res ervations/RTripSearchFlights.j html ) http://lib.colostate.edu/ http://www.aa.com/apps/res ervations/RTripSearchFlights.j html http://lib.colostate.edu/ http://www.aa.com/apps/res ervations/RTripSearchFlights.j html

15. 10. Check your links, especially the text. Tools > Page Info, Links (Alt + T, I, CTRL Tab to Links). Tools > Page Info, Links (Alt + T, I, CTRL Tab to Links). Can a user tell where they are being directed? Can a user tell where they are being directed? Does the text make sense on its own? Does the text make sense on its own?

16. 11. Check media elements. Tools > Page Info, Media (Alt + T, I, CTRL Tab to Media). Tools > Page Info, Media (Alt + T, I, CTRL Tab to Media). Are images all a reasonable size? Are images all a reasonable size? Does the alternative text seem appropriate, describing information that is relative to your page? Does the alternative text seem appropriate, describing information that is relative to your page?

17. 12. Check security settings, if applicable. Tools > Page Info, Security (Alt + T, I, CTRL Tab to Security). Tools > Page Info, Security (Alt + T, I, CTRL Tab to Security). Are you operating securely? Are you operating securely? Is your content encrypted? Is your content encrypted?