Introduction
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.
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 Mozilla 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. 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.)
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.)
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/)
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: (TBA)
Note: For tests 5 through 7, open the Options dialog box. (Tools > Options)
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.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).
The General tab shows basic page information as well as your meta data.
(Example: http://www.cvmbs.colostate.edu/mip/)
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/aa/reservation/roundTripSearchAccess.do)
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.
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.
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?
Firefox Add-ons for Developers
To view and manage Firefox Add-ons, open the Add-ons window. Tools > Add-ons.
The Add-ons dialog box show currently installed Add-ons (called “Extensions” in earlier versions of Firefox), configuration options, buttons for disabling and uninstalling, and a link to the Mozilla website for additional Add-ons.
The following are some of the free Add-ons we use and recommend. New Add-ons appear every day, and there are many more than those listed here. You can search for them at https://addons.mozilla.org/en-US/firefox/.
Recommended Add-ons
Essential!
- Mozilla Accessibility Extension
- http://firefox.cita.uiuc.edu/
- Makes it easier for people with a disability to view and navigate web content. Developers can use the toolbar to make sure structural markup matches page content.
- Web Developer
- http://chrispederick.com/work/web-developer/
- Adds a menu and toolbar with various web developer tools.
- LinkChecker
- http://www.kevinfreitas.net/extensions/
- Check the validity of links on any web page.
Very useful
- Add N Edit Cookies
- http://addneditcookies.mozdev.org/
- Cookie Editor that allows you add and edit “session” and saved cookies.
- ColorZilla
- http://www.iosart.com/firefox/colorzilla/
- Advanced Eyedropper, ColorPickeer, Page Zoomer, and other colorful goodies.
- CSSViewer
- https://addons.mozilla.org/en-US/firefox/user/9866
- A simple CSS property viewer.
- CustomizeGoogle
- http://www.customizegoogle.com/
- Enhance Google search results and remove adds and spam.
- Document Map
- https://addons.mozilla.org/en-US/firefox/addon/475
- Displays the current page’s heading structure in the sidebar, allowing rapid navigation between sections.
- EditCSS
- https://addons.mozilla.org/en-US/firefox/addon/179
- Stylesheet modifier in the sidebar.
- FireBug
- http://www.joehewitt.com/software/firebug/
- All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one tool.
- FireFTP
- http://fireftp.mozdev.org/
- A free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.
- IE Tab
- https://addons.mozilla.org/en-US/firefox/addon/1419
- View a webpage in a Firefox tab using the IE rendering engine.
- IE View
- https://addons.mozilla.org/en-US/firefox/addon/35
- Opens pages in IE via right-click in Firefox.
- MeasureIt
- http://www.kevinfreitas.net/extensions/
- Draw out a ruler to get the pixel dimensions of any element on a web page.
- Screen grab!
- http://www.screengrab.org/
- A Java applet that takes a screen shot of the window, the viewport, or the entire page.
- View Cookies
- http://www.bitstorm.org/extensions/view-cookies/
- View the cookies of the current web page.
- View Dependencies
- http://mozilla.queze.net/
- Adds a tab in the Page Info window listing dependencies and their sizes.
- View Source Chart
- http://jennifermadden.com/scripts/ViewRenderedSource.html
- Creates a colorful chart of a web page’s rendered source.
- X-Ray
- http://www.designmeme.com/xray/
- See the tags on a page without viewing the source code.
- Yellowpipe Lynx Viewer Tool
- http://www.yellowpipe.com/yis/tools/lynx/rightlynx/
- Displays a Lynx-style view of a web page
WAVE Aaccessibility Test
The WAVE 3.0 development team:
- Leonard Kasday: The originator of the initial concept for WAVE
- Paul Bohman: Project Coordinator
Dr. Kasday was a universal design engineer at the Institute on Disabilities/UCE at Temple University. He worked with Pennsylvania’s Initiative on Assistive Technology (PIAT), funded by The National Institute on Disability and Rehabilitation Research (NIDRR) through the Assistive Technology Act of 1998, and with the RERC on Communication Enhancement (AAC-RERC). He joined the Institute after retiring from a 22-year career at AT&T.
Dr. Kasday’s work to improve the accessibility of the World Wide Web for all individuals with disabilities is well known throughout the country and the world. His accessibility checker, the “WAVE,” is one of a select number of tools promoted by the government to assist Web designers in improving accessibility. In Pennsylvania, Dr. Kasday was instrumental in the development of standards and policies governing the accessibility of all state Web sites. He served as chair for the Evaluation and Repair Tools Interest Group, World Wide Web Consortium’s Web Accessibility Initiative (W3C-WAI).
The WAVE project hung in limbo for several years but was adopted by WebAIM (Web Accessibility in Mind) from Utah State University. This group has taken WAVE to a new level and plans to release version 3.5 sometime in the near future. WAVE is more easily understood than many other accessibility checking programs, using graphical representations, text indications, and color coding to organize into Errors, Warnings, Accessibility Features, and Stuctural and Semantic Elements:
- RED icons
- ERRORS that should be fixed.
- YELLOW icons
- ALERTS that the author should check for possible errors.
- GREEN icons
- ACCESSIBILITY FEATURES that the author should check for accuracy.
- LIGHT BLUE icons
- STRUCTURAL, SEMANTIC or NAVIGATIONAL ELEMENTS that may aid accessibility, and which the author should check for accuracy.
- All OTHER COLORS
- FORMATTING or OTHER ELEMENTS.
The color coding allows quick assessment, and the icons themselves allow you to follow the links to find references to the actual meaning of the finding.
Prev 