Transcript Web Accessibility Tests Using Firefox and WAVE

Web Accessibility Tests Using
the Firefox Browser
ACCESS to Postsecondary Education through
Universal Design for Learning
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


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. 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.)
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 suspiciouslooking links in pages of dubious authenticity.)
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.usnews.com/usnews/
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 )
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?
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/)
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.current.tv/network/pods/tech/mostrec
ent)
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.colostate.ed
u/depts/ATRC/ )
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/res
ervations/RTripSearchFlights.j
html )
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?
Does the text make
sense on its own?
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?
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?