Introduction

Accessibility is often about alternatives: we are going to examine some easy ways to see if your alternatives are working. Using these tools, allows you to understand what your page is telling the world.

In this session, we will explore both of these free tools. Using the Firefox browser by Mozilla, we will explore the alternatives that are provided in your favorite web pages. Take the challenge with your page, one of your favorites or test a variety of pages. There are some easy ways to see if your alternatives are working! When determining the accessibility of your webpage, you still should check your page using a checker such as WAVE, Bobby or Cynthia Says, yet even using this simple test will give you a lot of information about your page. Accessibility checking at WAVE.webAIM.org will also be reviewed, as will Firefox Extensions for Developers.

What We will Cover:

  1. The 10 Step Test

  2. WAVE Accessibility Test

  3. Firefox Extensions for Developers

A 10 Step Webpage Test using the Firefox Browser.

Accessibility is often about alternatives; here are some easy ways to see if your alternatives are working. While you still should accessibility check your page using a checker such as Wave or Cynthia Says, this simple test will give you a lot of information about your page.

The View Menu

  1. Turn your status bar on so you can hover on a link to check its URL. This is an easy way to double check your work.
    View > Status Bar (Alt V, B)    .
    Use View, select status bar.
  2. Check your font. Can people vary the text size to accommodate their vision?
    View > Text Size > Increase (CTRL +) or Decrease (CTRL - )
    Use View, text size, increase to test font relativity.
  3. Check your style sheet. Is your information organized so it can be understood without the accompanying organization of the visual display?
    View > Page Style > No Style (Alt V, Y, N)
     Select no style to test your reading order.

    The Tools Menu

  4. Check your alt text by unloading your images. Does your page lose important information without the graphics?
    Tools > Options > Web Features > uncheck Load Images, refresh 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).
     Options give you the ability to turn off JS and images. Test whether your page is understandable without the images.
  5. Check your noscript and see whether your page functions without JavaScript. Can people still get to all your content?
    Tools > Options > Web Features > uncheck Load JavaScript, refresh 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).
     Check whether your page works without Javascript.
  6. Check your page information. Here is where your metadata will show up. Is it reflective of your page content?
    Tools > Page Info, General (Alt T, I, use CTRL TAB to move through file tab items). Use page info on the Tools menu to test many aspects of your page.General page information.
  7. Check your Forms. Do the interactive parts make sense? Are the form fields and buttons logically labeled?
    Tools > Page Info, Forms. (Alt T, I, ctrl tab to Forms) Check your forms - remember not to send users to a new page without telling them.
  8. Check your Links, especially the text. Can a user tell where they are being directed?
    Tools > Page Info, Links (Alt T, I, ctrl tab to Links).Check your link text to ensure it is understandable.
  9. Check your Media. Are images all a reasonable size? Does the alternative text seem appropriate, describing information that is relative to your page?
    Tools > Page Info, Media (Alt T, I, ctrl tab to Media). Check your media size as well as the alt text associated with it.
  10. Check your Security. Are you supposed to be operating securely, or have your content encrypted?
    Tools > Page Info, Security (Alt T, I, ctrl tab to Security).
    Page info, security will give you information about encryption and general security.

WAVE Accessibility Test

WAVE Web Accessibility Tool

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.

Go to WAVE

Firefox Extensions for Developers

Firefox - rediscover the web.

Firefox extension notes: taken from the firefox extension pages 11/28/05. No actual links in this document.

Firefox extensions give greater power to Firefox. Below you will find a sampling of some of the useful extensions available. Extension are written for particular versions of Firefox, so are frequently updated. You will find that some are better maintained and supported than others: some have entitre webpages devoted to them.

What you will find
User Rating: number of stars out of 5 possible stars
Name of Extension
(Sometimes get screenshots)
Author
Authors description of the extension.

page 1

Rating: 4.3 stars out of 5
Checky 2.5

Checky preview - Checky context menu and preferences

By Joachim Schreiber

Easy to use interface to many free and commercial Online
Validation and Analysis Services. Validate and analyse HTML,
XHTML, CSS, RDF, RSS, XML, WAI, Section 508, P3P, Hyperlinks,
Metadata and many more. Adds a context and tools menu.Changes between Release 2.5 and 2.4: - Support for Firefox 1.0
and Mozilla 1.8a5. - Bug fix for O'Reilly XML RUWF? The XML
Syntax Checker Service.
Install
81 kb
For Firefox:
0.9.3 - Deer Park
Last Update: February 05, 2005 8:30:16am | Downloads Last 7 Days: 1545 | Total Downloads: 121877

Rating: 4.69 stars out of 5

ColorZilla 0.8.2

ColorZilla preview -

By Alex Sirota

Advanced Eyedropper, ColorPicker, Page Zoomer and other
colorful goodies.With ColorZilla you can get a color reading from any point in
your browser, quickly adjust this color and paste it into another
program. You can Zoom the page you are viewing and measure
distances between any two points on the page. The built-in
palette browser allows choosing colors from pre-defined color
sets and saving the most used colors in custom palettes. DOM
spying features allow getting various information about DOM
elements quickly and easily. And there's more...
Install
81 kb
For Firefox:
0.9.x - 1.6a1
Last Update: October 20, 2005 4:37:12am | Downloads Last 7 Days: 6165 | Total Downloads: 368216

From page 3
Rating: 4.59 stars out of 5
Html Validator 0.7.6

Html Validator preview -

By Marc Gueury

HTML Validator is a Mozilla extension that adds HTML validation
inside Firefox and Mozilla. The number of errors of a HTML
page is seen on the form of an icon in the status bar when
browsing.The details of the errors are seen when looking the HTML
source of the page.The extension is based on Tidy. Tidy, was originally developed
by the Web Consortium W3C. And now extended and improved
by a lot of persons. Tidy is embedded inside Mozilla/Firefox and
makes the validation locally on your machine, without sending
HTML to a third party server.Tidy is a helpful program that tries to help people to correct
their HTML errors. It finds HTML errors and classifies them in 3
categories:* errors: HTML errors that Tidy cannot fix or understand.
* warnings: HTML errors that Tidy can fix automatically
* (optional) accessibility warnings: HTML warnings for the 3
priority levels defined in W3c WAI
This is Windows version 0.76 for Firefox 1.0 and 1.5 rc
Install 604 kb
For Firefox:
0.8 - 1.5
For Windows only
Last Update: October 25, 2005 11:42:05am | Downloads Last 7 Days: 4564 | Total Downloads: 171620

IE View Rating: 4.39 stars out of 5

IE View

By Paul Roub

Lets you load pages in IE with a single right-click, or mark
certain sites to *always* load in IE. Useful for incompatible
pages, or cross-browser testing.
Install
kb
For Firefox:
-
For Windows
only
Last Update: October 27, 2005 10:50:25am | Downloads Last 7 Days: 40450 | Total Downloads: 1868201

page 4

Rating: 4.23 stars out of 5
LinkChecker 0.4.3

By Kevin Freitas

Check the validity of links on any webpage.

- updated to work with Fx 1.5b2
Install
28 kb
For Firefox:
0.8 - 1.6a1
Last Update: November 09, 2005 8:46:18pm | Downloads Last 7

Days: 1346 | Total Downloads: 50390

page 5

Rating: 4.38 stars out of 5
MeasureIt 0.3.3
MeasureIt preview - MeasureIt screenshot

By Kevin Freitas

Draw out a ruler to get the pixel width and height of any
elements on a webpage.- fixed CSS error in Fx 1.5 b2 - change JS method for dragging
ruler box for better accuracy
Install
19 kb
For Firefox:
0.9.x - 1.5b2
Last Update: November 09, 2005 8:28:17pm | Downloads Last 7 Days: 2937 | Total Downloads: 98864

page 7

Rating: 4.42 stars out of 5
Screen grab! 0.6

By Andy Mutton

Screengrab saves entire webpages as images.Just install it, make sure Java is configured (Java absolutely
necessary), and right-click on a page.You can save the entire page as an image (it scrolls around the
page taking shots and stitches it together), just the visible
portion, or the browser window.For examples take a look at the homepage.Fixed the amusing problem with mozilla.org, and hopefully any
other webpage that has strange horizontal banding issues.
Made better error messages (problems are usually that Java isn't
configured properly). Fixed a stupid bug where I was calling a
method that doesn't exist. Fixed some SecurityException
problems (I hope - feedback on this would be good). Fixed
problems with context menu obscuring view in some Linux
variants (I hope). Made my update rdf actually work (I think)
Install
19 kb
For Firefox:
1.0 - 1.6a1
Last Update: September 23, 2005 9:45:41am | Downloads Last 7 Days: 2489 | Total Downloads: 34503

Rating: 4 stars out of 5

TAW3 with a click 0.9.2
TAW3 with a click preview - TAW3 icon

By Fundacion CTIC

Web Accessibility Test. TAW3 with a click allows to verify, with
just a click, the accessibility of the Web sites that you are
visiting, by means of the TAW3 online service (www.tawdis.net)
and making use of the W3C Web Content Accessibility
Guidelines (WCAG 1.0).changes: fixed new parametized url parsing bug
Install
31 kb
For Firefox:
0.9.x - 1.0.7
Last Update: October 07, 2005 7:53:47am | Downloads Last 7 Days: 380 | Total Downloads: 7637

page 8

Rating: 4.36 stars out of 5
View formatted source (format source extension) 0.9.3.4
---Cath's note: not compatable with current release

candidate---

View formatted source (format source extension) preview - view

CSS information

By Felix Ritter

Displays formatted and color-coded source and optional CSS
information for each element.You can see exactly which CSS rules match for an element. The
rules are displayed including file name and line number. The
topmost element is that with the highest priority.You can fold/unfold/hilite block elements (table, tr, td, div,
span,...). Really cool feature: select a block level element of
interest directly in the page and view it's source! To help you to
quickly analyze the source code you can view images directly
from the source and add comments to folded block elements.
The code view is based on the rendered document, so you will
also see dynamically (by Javascript) created and modified html
elements! Works also with frames and selected text.
added possibility to make the css information window sticky
Install
28 kb
For Firefox:
1.0 - 1.0.4
Last Update: June 04, 2005 1:51:43pm | Downloads Last 7 Days: 2009 | Total Downloads: 96908

Rating: 4.9 stars out of 5

Web Developer 0.9.4

Web Developer preview - The toolbar on Windows.

By Chris Pederick

Adds a menu and a toolbar with various web developer tools.
Install
94 kb
For Firefox:
1.0 - 1.5.0.*
Last Update: November 28, 2005 12:13:20pm | Downloads Last 7 Days: 20293 | Total Downloads: 790356

These are just some of the extensions available. Page references here will change as extensions are added, so use the name of the extension as your main reference. Look for updates to the extensions as well.