The 12 Step Firefox Test
1. First, Check your version of Firefox.(Help > About Mozilla Firefox).
What you want to see…
It is good to know what version of the software you are running. If you are not running the same version as depicted in the screenshots, expect to see slight differences in your results. The overall test should not be adversely affected if you are not running the same version.
How to fix it…
Especially when running software that is updated frequently, it is good to have a current version. On the “Help” menu there is also a link to “Check for Updates.”
2. View the Status Bar.(View > Status Bar (Alt V, B)).
What you want to see…
You want to see if your link text corresponds to the destination. Link text can also be checked as a list of the links under Page Info (Tools > Page Info, Links (Alt T, I, ctrl tab to Links)).
How to fix it…
If the link texts do not convey a sense of the actual destination, and do not make sense when read out of context, rewrite the text so that it does make sense. Avoid using repetitive first words.
The following example from that in a section labeled modify, “change” could easily be the last word in these links, which would make an alphabetical list of links more meaningful to users.
Modify Your EID:
Change First.Last Alias
Change E-mail Privacy Settings
Change Password
Change E-mail Address
Change Forgotten Password Help Questions
3. Check your text size.(View > Text Size > Increase (CTRL +) or Decrease (CTRL - )).
In Firefox, test the flexibility of your page design by increasing and decreasing text size (View > Text > Increase (Ctrl +) or Decrease (Ctrl -). Content should be accessible at any size, regardless of the changing appearance of the page.
To test for relative font size specification in CSS, 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.
What you want to see…
There should be a range of viewable text sizes so users have a choice of how they view a webpage. You should be able to switch to smallest or largest, and get enough variation so that whether you are viewing on a high resolution monitor, or viewing at 800x600, you can still set a comfortable reading size.
How to fix it…
Specify font sizes in “relative” units using ems or percentages, not pixels or points. Cascading Style Sheets also support specifying font sizes using keywords like smaller, and larger. Relative sizes allow users to scale text as needed for legibility.
4. Check the organization of content by disabling style sheets.(View > Page Style > No Style (Alt V, Y, N)).
What you want to see…
Examine the opening text of your webpage. Is this how you want to greet users? Read the text to ensure that it conveys what you want your web page to say. Is the content of the page readily available?
How to fix it…
If your page content does not flow logically without the style sheet, consider reorganizing your code layout. Absolute positioning can often be used to adjust code layout so that it does not affect visual layout.
5. Check your alt text by turning off image loading.(Tools > Options > Content)
Uncheck “Load Images.” Reload page(Keyboard access = ALT T, O, Tab to Web Features, press enter, tab to desired feature. Use F5, or CRTL R, add shift to override browser caches).
What you want to see…
You do not want your page to lose key information. Check whether the alternative text sufficiently explains points that your graphics were intended to convey. Check to see if your alternative text made the general text redundant? Beware of repeating your site name several times in a row; it may sometimes make sense to use a blank alternative text for your logo.
How to fix it…
How you address lost content will depend upon the severity. In some cases it may be best to add a paragraph that conveys your key point. In other cases, you may find you will need to add a link to a page to describe a graph, or maybe just rewrite the alternative text.
6. Disable JavaScript to test for "noscript" alternatives.(Tools > Options > Content.)
Uncheck "Enable JavaScript." Reload page (Keyboard access = ALT T, O, Tab to Web Features, press enter, tab to desired feature. Use F5, or CRTL R, add shift to override browser caches).
What you want to see…
“Noscript” content is displayed when JavaScript (JS) is turned off. If JS has been used to generate menu items, test the access to your site by trying to use the tab key to get to the link. If your JS has other purposes, does “noscript” convey that purpose, or provide similar functionality?
How to fix it…
If you cannot get to all link items on your page, you will need to provide an alternative way to access this content. The most common way is to provide redundant text links on the actual page. You can also use “Noscript” to offer alternatives, such as a URL which points to your index page as an alternate way of navigating the page.
7. Also, while JavaScript is disabled, check to see that all important content on your page is still viewable, and that the site is navigable.
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 you basic page information as well as your meta data.
What you want to see…
Title: Check the title that reads in bold at the top of the gray section. This is the title that will be bookmarked as a “Favorite” in IE. It will also be displayed on the top bar of your browser. Check to see if it will make sense when it is truncated.
Render Mode:“Render Mode:” should be standards compliance mode, rather than quirks mode. This is determined by your doctype declaration (DTD). Internet Explorer 6 also has problems with an XML declaration preceding the DTD.
Page size: The page size should be appropriate to your site. This page size can vary greatly depending upon your audience, your type of content, and hosting restrictions. If you do not know what would be an appropriate size for your website, you may want to discuss this with your information technology administrator. JavaScript use can also bloat a webpage.
Meta Data: One of the most important things displayed in the General tab is your meta data. This data about the data is the information that describes your site.There are many types of meta data, including the category of “name” for which you can supply “content.”
Name values include:
•“keywords” which are categorical words that you would want people to use when they searched for your page.
•“description” is a description of your page.
•“author” allows you to attribute the site to its creator.
MetaContent-type should be set to describe the coding language and the character set being used. An example of a normal value would be: text/html; charset=iso-8859-1.
How to fix it…
Title:The title is specified in the Head content of the HTML document.
Render Mode:To find out more information regarding render-modes, visit or for more information on doctype declarations.
Page Size:If your site seems very large, check that the graphics used are appropriate for the web (see the Media tab). For help with graphics, see Optimizing Web Graphics JavaScript effects can often be replaced by CSS effects, or combined with CSS to make the JS involved much smaller. Consider using the hover attribute in CSS to replace “onmouseover” or “onfocus.”
Page optimizing tests and suggestions are available at:
MetaData:To add meta data to your site, you will need to edit your (X)HTML, and write the meta data in the head section of your document. For more information on meta data, see .
9. Check your forms.(Tools > Page Info, Forms. (Alt T, I, ctrl tab to Forms))
What you want to see…
Form elements should have label values attached to explain them. The various form elements in the upper box can be selected to display their specific values. The column Label should have a value that would tell the user what information should be entered into that form field. When you use the tab key to move through a form the order should be an logical one (good: tab to name, address, city, zip; bad: tab to name, zip, address, city).
How to fix it….
Design your forms to have a logical layout. “Label” needs to be added in the (X)HTML to the form controls, using “for” to associate it with that form control. The W3C specifies:
“The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.
The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one LABEL may be associated with the same control by creating multiple references via the for attribute.”
(
10. Check your links, especially the text.(Tools > Page Info, Links (Alt T, I, ctrl tab to Links).
What you want to see…
Viewing the links in a list with their associated URLs is an efficient way to test if the text is appropriate to the destination.
How to fix it…
Rewrite the text so that the link texts convey a sense of the actual destination, and so that they make sense when read out of context. Avoid using repetitive first words.Also see example in Step #2.
11. Check media elements.(Tools > Page Info, Media (Alt T, I, ctrl tab to Media)).
What you want to see…
Images will be listed with their alternative text, as well as their address and type. Select the various images to check on the use of “Title,” as well as the alternative text. The Media Preview is helpful in checking the usage of the alternative text.
How to fix it…
Write approriate descriptions using the “alt” attribute for the “img” tag. From the ACCESS Project Web Design Tips
Alt text should describe the meaning of the image rather than what it looks like. For example:
Poor: <img src=" lab_sign.gif" alt="Sign hanging on lab door.">
Better: <img src="lab_sign.gif" alt="Each laboratory has safety policies posted on the door.">
Ask yourself why you included the image on your page. For example:
Poor: <img src="play_audio.gif" alt="Speaker icon.">
Better: <img src="play_audio.gif" alt="Play the news stories featured on this page.">
12. If applicable for your site, check security settings. (Tools > Page Info, Security (Alt T, I, ctrl tab to Security)).
What you want to see…
If your website is not intended to be encrypted, this should read “Connection not Encrypted.”
How to fix it…
If you do not get the results you expect, contact your information technology administrator.
This document also available online: 1 of 7