Web Accessibility Tests Web Accessibility Tests Using the Firefox BrowserUsing the Firefox Browser

ACCESS to Postsecondary Education ACCESS to Postsecondary Education through Universal Design for through Universal Design for LearningLearning

Introduction – About this test…Introduction – About this test…

Is your website usable by the largest possible Is your website usable by the largest possible audience? audience?

Does it comply with modern, W3C standards?Does it comply with modern, W3C standards? Will it continue to work with emerging Will it continue to work with emerging

technologies? technologies? Wonder no longer!Wonder no longer!

This document will introduce you to several free and This document will introduce you to several free and easy-to-use tools to help you check your website for easy-to-use tools to help you check your website for usability and accessibility to maximize impact with your usability and accessibility to maximize impact with your audience. The tools featured include the Firefox browser audience. The tools featured include the Firefox browser by Mozilla, the large and growing complement of Firefox by Mozilla, the large and growing complement of Firefox Add-ons, and the online accessibility checker, WAVE.Add-ons, and the online accessibility checker, WAVE.

Introduction – About Web Introduction – About Web Accessibility…Accessibility…

Web accessibility is often achieved by providing information Web accessibility is often achieved by providing information in mulitple ways and making sure that alternative sources in mulitple ways and making sure that alternative sources of information are available for users with disabilities. of information are available for users with disabilities.

If we expand our definition of web accessibility to include If we expand our definition of web accessibility to include compatibility with diverse technologies (computer operating compatibility with diverse technologies (computer operating systems, web browsers, screen sizes, etc.) as well as the systems, web browsers, screen sizes, etc.) as well as the learning styles and abilities of users, we find a "universal" learning styles and abilities of users, we find a "universal" advantage in developing websites that are "accessible." advantage in developing websites that are "accessible." After all, an accessible website will reach the widest possible After all, an accessible website will reach the widest possible

audience, it will be easily understood by viewers, it will be audience, it will be easily understood by viewers, it will be cataloged more readily by search engines—and, because it cataloged more readily by search engines—and, because it conforms to modern web standards, it will be more compatible conforms to modern web standards, it will be more compatible with future browser technologies.with future browser technologies.

A 12-Step Test for Your Web A 12-Step Test for Your Web Pages Using the Firefox Pages Using the Firefox

BrowserBrowser You may already be using the Firefox You may already be using the Firefox

browser, but did you know that the browser, but did you know that the software contains the following built-in software contains the following built-in web development tools to help you web development tools to help you check your site? check your site?

It does, as you will discover in the It does, as you will discover in the following twelve tests.following twelve tests.

1. Check your version of 1. Check your version of Firefox.Firefox.

From the Help menu, choose From the Help menu, choose About Mozilla Firefox. (From About Mozilla Firefox. (From now on, we'll use a shorthand now on, we'll use a shorthand to indicate the steps you should to indicate the steps you should take (e.g., Help > About Mozilla take (e.g., Help > About Mozilla Firefox).Firefox). Note: This tutorial was written for Note: This tutorial was written for

Firefox version 2.0. Earlier or later Firefox version 2.0. Earlier or later versions may differ from the versions may differ from the descriptions and images below.)descriptions and images below.)

2. View the Status Bar.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 Turn your status bar on so that you can hover

over a link to see its URL. 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 (It's also a safety precaution when clicking on suspicious-looking links in pages of dubious suspicious-looking links in pages of dubious authenticity.)authenticity.)

3. Check your font sizes.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 Can people vary the size of your text to accommodate their

vision? 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 (Note: Firefox will scale text up and down regardless of whether Cascading Style Sheets (CSS) specify relative or absolute font sizes. Cascading Style Sheets (CSS) specify relative or absolute font sizes. To check for relative text sizes, open the page in Microsoft Internet To check for relative text sizes, open the page in Microsoft Internet Explorer and choose View > Text Size to try different settings. If 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 the text size doesn't change, the page uses fixed sizes in CSS. This limits the page's accessibility and usability for many viewers.)limits the page's accessibility and usability for many viewers.)

(Examples: (Examples: Good: http://screenfont.ca/,Good: http://screenfont.ca/,

Bad: http://www.usnews.com/usnews/Bad: http://www.usnews.com/usnews/

4. Check the organization of 4. Check the organization of content by disabling style content by disabling style

sheets.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 Is your information organized so that it can be

understood without the visual formatting?understood without the visual formatting?(Examples: (Examples:

Good: http://www.colostate.edu/Depts/ATRC/PDI/ , Good: http://www.colostate.edu/Depts/ATRC/PDI/ , Bad: http://www.iditarodstore.com/browse.cfm )Bad: http://www.iditarodstore.com/browse.cfm )

Note: For tests 5 through 7, Note: For tests 5 through 7, open the Options dialog box. open the Options dialog box.

(Tools > Options)(Tools > Options)

Options give you the ability to turn Options give you the ability to turn off JavaScript and images.off JavaScript and images.

5. Check your alt text by 5. Check your alt text by turning off image loading.turning off image loading.

Uncheck "Load images Uncheck "Load images automatically," then automatically," then reload the page (ALT + reload the page (ALT + T, O, Tab to Web T, O, Tab to Web Features, press enter, Features, press enter, tab to desired feature. tab to desired feature. Use F5, or CRTL R, add Use F5, or CRTL R, add shift to override shift to override browser caches).browser caches). Does your page lose Does your page lose

important information important information without the graphics?without the graphics?

6. Check for "noscript" 6. Check for "noscript" alternatives by disabling alternatives by disabling

JavaScript.JavaScript. Tools > Options > Content.Tools > Options > Content. Uncheck "Enable JavaScript." Uncheck "Enable JavaScript."

Reload page (ALT + T, O, Tab to Reload page (ALT + T, O, Tab to Web Features, press enter, tab Web Features, press enter, tab to desired feature. Use F5, or to desired feature. Use F5, or CRTL R, add shift to override CRTL R, add shift to override browser caches).browser caches). Do users receive alternate Do users receive alternate

content when JavaScript is content when JavaScript is disabled or unavailable?disabled or unavailable?

(Examples:(Examples:Good: Good: http://www.ot.cahs.colostate.edhttp://www.ot.cahs.colostate.edu/u/))

And while you have JavaScript And while you have JavaScript disabled...disabled...

7. Check that all important 7. Check that all important content on your page is still content on your page is still viewable, and that the site is viewable, and that the site is

navigable, with JavaScript navigable, with JavaScript disabled.disabled.

(Example: (Example: Good: http://www.cvmbs.colostate.edu/ ; Good: http://www.cvmbs.colostate.edu/ ; Bad: Bad: http://www.current.tv/network/pods/tech/mohttp://www.current.tv/network/pods/tech/mostrecent)strecent)

8. Check your page 8. Check your page information.information.

Tools > Page Info, Tools > Page Info, General (Alt + T, I, General (Alt + T, I, use CTRL Tab to use CTRL Tab to move through file tab move through file tab items).items). Choose 'Page Info' Choose 'Page Info'

from the Tools menu from the Tools menu to test many aspects to test many aspects of your page.of your page.

The General tab shows The General tab shows basic page information basic page information as well as your meta as well as your meta data.data.

(Example: (Example: http://www.colostate.http://www.colostate.edu/depts/ATRC/ )edu/depts/ATRC/ )

9. Check your forms.9. Check your forms.

Tools > Page Info, Tools > Page Info, Forms. (Alt + T, I, CTRL Forms. (Alt + T, I, CTRL Tab to Forms)Tab to Forms) Do the interactive parts Do the interactive parts

make sense? make sense? Are the form fields and Are the form fields and

buttons logically marked buttons logically marked up and labeled?up and labeled?

(Example: (Example: Good: Good: http://lib.colostate.edu/ , http://lib.colostate.edu/ , Bad: Bad: http://www.aa.com/apps/rhttp://www.aa.com/apps/reservations/RTripSearchFleservations/RTripSearchFlights.jhtml )ights.jhtml )

10. Check your links, especially 10. Check your links, especially the text.the text.

Tools > Page Info, Links (Alt + T, I, Tools > Page Info, Links (Alt + T, I, CTRL Tab to Links).CTRL Tab to Links). Can a user tell where they are being Can a user tell where they are being

directed? directed? Does the text makeDoes the text make

sense on its own? sense on its own?

11. Check media elements.11. Check media elements.

Tools > Page Info, Tools > Page Info, Media (Alt + T, I, Media (Alt + T, I, CTRL Tab to Media).CTRL Tab to Media). Are images all a Are images all a

reasonable size? reasonable size? Does the alternative Does the alternative

text seem appropriate, text seem appropriate, describing information describing information that is relative to your that is relative to your page? page?

12. Check security settings, 12. Check security settings, if applicable.if applicable.

Tools > Page Info, Tools > Page Info, Security (Alt + T, Security (Alt + T, I, CTRL Tab to I, CTRL Tab to Security).Security). Are you operating Are you operating

securely? securely? Is your content Is your content

encrypted?encrypted?