Web Accessibility
What Browsers Can Do, Part 2
Part 1 of this article considered the abilities of Safari, but Firefox and Opera are two major browsers that Mac users may also have in their toolbox. Both browsers are free.
This article shows how to use Firefox and Opera to take control when you use a Web site. Because Part 1 covered a lot of background, you may wish to read that article first.
Firefox
Firefox is very popular with Web developers in particular because of the huge list of optional extensions you can install.
Opera
Opera is known for its accessibility features, including the ability to zoom in on a page, enlarging both text and images.
Block Pop-Up Windows
Firefox and Opera are both set by default to block pop-ups.
Firefox’s exception list is where you can add the URLs of sites whose pop-ups you want to see. Go to Preferences ‣ Content and click the “Exceptions…” button beside “Block pop-up windows,” then follow the instructions in that window.
In Opera you can modify the preferences, including for pop-ups, for individual sites:
Quick Preferences ‣ Edit site preferences…
Site preferences are also available under the General Preferences in the Advanced ‣ Content section, and from a contextual menu reached by Control-clicking on a blank part of the page.
Status Bar
As with Safari, Opera’s status bar is disabled by default. To enable it, choose View ‣ Toolbars ‣ Status bar.
Choose View ‣ Toolbars ‣ Customize… to modify characteristics of all toolbars, including the status bar. If you like you can move the status bar around too.
Text Size
In Firefox you can use the standard Command-Plus keystroke to increase the size of text on a page. Press Command-Minus to reduce it again. These commands are also available under the View menu. While you can enlarge or reduce text, the images remain the same size.
Opera handles this quite differently, using Shift-Plus and Shift-Minus, instead of the more usual Command-Plus/Minus. Moreover, the images also increase or reduce in size, along with the text.
Along with commands under the View menu, Opera also has a toolbar item for the zoom feature: click the spectacles icon beside the Google search box to make an additional toolbar visible. Choose a zoom amount from the pop-up menu.
Minimum Text Size
As with Safari, you can set a minimum font size:
Firefox ‣ Preferences ‣ Content ‣ Fonts & Colors ‣ Advanced
Opera ‣ Preferences ‣ Advanced ‣ Fonts
Hide and Display Images
Would you like to turn off images? This feature is useful for Web designers, but also for those in a hurry, or stuck with a very slow or expensive connection.
While text is generally quick to load and accounts for very little bandwidth, images, sound, and video chew through the megabytes.
Firefox, like most browsers, shows images by default, but you can set it to disable images. Again, you can set exceptions for certain sites:
Preferences ‣ Content ‣ Load images automatically
Opera provides more tools for dealing with images: set a general preference, set a per-site preference, or use a toolbar button.
Once a Web browser has displayed an image, it is stored in a cache on your computer so it loads more quickly next time you need it. With Opera you can choose “Show images,” “Cached images,” or “No images.”
Preferences ‣ Web pages ‣ Images
Click the spectacles icon beside the Google search box to make an additional toolbar visible. The third button from the right toggles between “Show images,” “Cached images,” and “No images.”
Choose Your Own Stylesheet
Firefox allows you to view a page without the stylesheets the designer assigned:
View ‣ Page Style ‣ No Style
With free extensions you can do much more. See the section below on Firefox extensions.
Opera allows you to choose your own stylesheet for individual sites. Try downloading my-styles.css and then choose it as a custom stylesheet:
Opera ‣ Quick Preferences ‣ Edit site preferences…. ‣ Display ‣ My style sheet
Caution: if you’ve changed the stylesheet for a particular site, it’s not possible to change it back to the default, which resides at:
Opera.app/Contents/Resources/Styles/user.css
To reset, remove the site from the list of sites whose preferences you are managing:
Preferences Advanced ‣ Content ‣ Manage site preferences…
There is a great deal more you can do with stylesheets in Opera, though. See Opera’s Author Mode below.
Disable Scripts, Add-ons, and Plug-ins
Some Web designers use scripts to change your browser window, perhaps disabling or changing the content of the status bar, moving or resizing the window.
Firefox lets you manage this:
Preferences ‣ Content ‣ Enable JavaScript ‣ Advanced…
If a site tries to install add-ons without your knowledge or permission, Firefox warns you. It also allows you to change and customize the behavior:
Preferences ‣ Security ‣ Warn me when sites try to install add-ons ‣ Exceptions…
Opera’s Quick Preferences allow you to enable and disable JavaScript and Plug-ins on the fly, but you can also choose settings in the general Preferences window:
Preferences Advanced ‣ Content
As with Firefox, you can allow and disallow particular JavaScript behaviors, but you can also use your own JavaScript files:
Preferences Advanced ‣ Content ‣ Enable JavaScript ‣ JavaScript options…
Opera’s Block Content
Control-click on a blank part of a Web page in Opera to bring up the Contextual menu and choose Block content…. This is also available under Tools ‣ Advanced ‣ Blocked content….
Now click on items such as images or plug-in content and they will be blocked for that site. Opera’s help points out:
You can block all content that shares the same file path on a server, or you can block single files, or both.
Firefox Extensions
Many people have created add-ons, or extensions, for Firefox. Click on Tools ‣ Add-ons to bring up the Add-ons window, then look at the Extensions tab.
This window displays any extensions you may have already installed, allows you to set preferences, disable or uninstall them, or click the Get Extensions link to find more.
There are hundreds of extensions available, for all kinds of purposes including blocking ads, customizing your view of a Web page, and clipping sections of pages. If there’s something you want to do with a Web page, there is probably an extension for it.
Web designers should be sure to install Chris Pederick’s Web Developer extension, which lets you analyze the elements on a Web page, edit stylesheets, validate pages, and so on.
Opera’s Author Mode
Opera has a long-standing history of including accessibility tools. One of the very interesting tools is User Mode.
Call up a Web page, then go to the View menu and look under the Style submenu. Start with “Author mode,” which should be the default. This should give you a normal view of the Web page as the designer intended it.
Now choose “User mode” and try out some of the many alternative user stylesheets, such as “Accessibility layout,” “High contrast,” or “Table of contents.” It’s possible to check more than one item at a time, so for the clearest results uncheck the item you’ve just tested before trying another one.
Web designers will find some of these possibilities very helpful, for example “Class and id” displays elements with a class or ID, together with the class or ID name.
Summary
While Opera and Firefox both have similar tools and preferences to Safari for enlarging and reducing text size, blocking pop-ups and so on, both also include many features that give users much more control over a Web page they are visiting.
Anyone who makes Web pages will also find Opera and Firefox vital additions to their toolbox, because of their capacity to reveal what’s behind the scenes of a Web page.
Also in This Series
- What Browsers Can Do, Part 2 · May 2007
- What Browsers Can Do · April 2007
- The Flip Side of the Coin · March 2007
- SeaMonkey 1.0.6 · December 2006
- PageSpinner 4.6.3: Quirky and Erratic · November 2006
- Nvu: Impressive and Powerful · October 2006
- RapidWeaver: A Useful Tool in Need of Sharpening · September 2006
- Sandvox: Sand in the Eyes · August 2006
- The Clayton’s Web · July 2006
- Complete Archive
Reader Comments (2)
Let me add two tips from my experience.
I often enlarge the type to 18 or 24 point; at this size, multi-column layouts often are confusing to read, if legible at all.
Another barrier can be the colors chosen by web designers. They may think yellow on a green background is pretty, but I can't make it out. The style sheet approach works on many sites, but not all.
I get around these problems with two tiny programs I have installed on the favorites bar in Safari, iCab, and OmniWeb(haven't tested others). These are Javascript programs called "bookmarklets," so you need to have Javascript enabled for them to work. The site below explains how to install these tools.
The "linearize" bookmarklet breaks down multi-column designs into a single column.
http://www.squarefree.com/bookmarklets/validation.html
Once "linearized," even complex layouts -- like the NYTimes.com -- are easy to view in very large fonts.
The "zap colors" bookmarklet strips all the color out of a file. Text is black, links are blue, background is white. http://www.squarefree.com/bookmarklets/zap.html
Much easier on the eyes.
I installed both of these at the left end of my favorites bar. I can choose either one with command-#, so two quick keystrokes change a multi-column, squinty-color site into easy reading.
I'm glad you liked the article.
Add A Comment