Skip to Content
Skip to Table of Contents

← Previous Article Next Article →

ATPM 13.05
May 2007

Columns

How To

Extras

Reviews

Download ATPM 13.05

Choose a format:

Web Accessibility

by Miraz Jordan, http://mactips.info

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

Reader Comments (2)

Jesse the K · May 15, 2007 - 22:47 EST #1
Good article!

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.
Miraz · May 17, 2007 - 00:46 EST #2
Thanks for the tips Jesse. Those bookmarklets sound really interesting and useful.

I'm glad you liked the article.

Add A Comment





 E-mail me new comments on this article