Web accessibility: what Safari can do

by Miraz on January 16, 2008

When you visit a web site you aren’t powerless or at the mercy of the web designer, but can take some control of the site’s appearance and functionality. This article considers the powers available to users of Safari, the browser that comes installed on every Mac. It was written for Safari under Tiger and some things may have changed since then.

When you visit a web site you aren’t powerless or at the mercy of the web designer, but can take some control of the site’s appearance and functionality.

One of the most common actions is to block unwanted pop-ups — most browsers now have a setting to do that. It’s also common and easy to make text larger or smaller, and to affect a web page’s appearance in other ways.

This article considers the powers available to users of Safari, the browser that comes installed on every Mac. There are others, such as Firefox, Opera, Netscape, Camino, OmniWeb, Flock, and others, but future articles will look at them.

Safari

Safari is included with all new Macs. It has been developed so rapidly that there are many different versions around. This article refers to Version 2.0.4 (419.3), which was current at time of writing.

The first step in taking control with Safari is actually to enable a couple of features that are disabled by default: the Status Bar and Tabbed Browsing.

Status Bar

The Status Bar is a gray strip at the bottom of the browser window. It displays information relating to the page you’re viewing. To enable it, choose View > Show Status Bar. Watch the Status Bar as you work with web pages as it gives you more information and therefore more control as you browse the web.

For example, call up a Bookmark or enter an address manually, and the Status Bar should carry messages such as “Contacting www.example.com” or “Loading www.example.com“.

The Status Bar shows where the URL goes. Hover over a link and the Status Bar should display where that link will take you. Sometimes a web page is created in such a way that it is able to override the useful information with text the web designer thinks is more important, but mostly the information in the Status Bar is useful.

Similarly, you can usually spot email addresses. Be careful if the URL you see in the Status Bar ends with a file extension such as .pdf, .doc. .xls as that means the link goes to a file of that type, which may download to your computer.

Screenshot 01: As I hover over the link to ATPM Issue 13.03 the Status Bar shows that if I click I will visit http://atpm.com/13.03/index.shtml. In this screenshot there also happens to be a tooltip visible (the text on the yellow background), but many websites don’t offer that.

Block pop-up windows

Some sites cause extra windows to pop-up without your asking for them. These may be perfectly legitimate, but more often they are advertising, or even spam or ridden with viruses.

All modern browsers, including Safari, allow you to block malign pop-ups, while allowing the harmless ones to appear. Choose Safari > Block Pop-Up Windows.

Text Size

Some sites use text that’s just too small to read comfortably. Of course, “too small” is very subjective, and can depend on the time of day, how tired you are, and other factors.

Increase the size of text on a page by pressing Command +. Press Command - to reduce it again. These commands are also available under the View menu as Make Text Bigger and Make Text Smaller.

You can press the key combinations repeatedly until you either find a comfortable size or Safari refuses to make any further changes. My tests suggested about eight or nine steps were available.

While you can enlarge or reduce text, the images remain the same size.

Minimum Text Size

But wait! Look in the Preferences, under the Advanced tab. Here you’ll see that you can set a minimum font size. This is great if you consistently find yourself enlarging the text. To really see the difference try the extremes: 9 and 24.

The text on the page is tiny. · The text on the page is huge.

Screenshot 02: With a minimum text size of 9, the text on the page is tiny. Screenshot 03: I’ve set the minimum text size to 24, so the text on the page is huge.

Choose your own style sheet

In modern web design the HTML coding should be plain and simple: a set of tags to mark out headings, paragraphs, lists and so on. All the layout is controlled (or rather, suggested) by a style sheet.

A style sheet may contain rules to say that all headings should be bold, centred and maroon, while paragraph text should be left-aligned, black, with margins of a certain width, and so on.

The style sheet sets up how the web designer thinks the page would best communicate its message, but such styles are not hard and fast.

Choose your own style sheet. For example, the designer may create different style sheets for print, for handheld devices, or even for how a page should sound when read aloud, though this last isn’t yet very popular or even very reliable.

For a visitor to a web page though, style sheets make possible a degree of control. Safari allows a visitor to choose their own style sheet and use it to override the designer’s suggestions.

Screenshot 04: Choose your own style sheet in the Advanced tab of Safari’s Preferences.

Try downloading my-styles.css (1Kb text file) and then choose it as a custom stylesheet. Now go to the Safari menu and choose Empty Cache … to clear out what Safari thinks it already knows about web pages.

Note: Safari is truly terrible at refreshing web pages; if you simply reload / refresh the web page with your new stylesheet loaded you may not see any change. Emptying the cache usually forces Safari to really refresh.

Large, white text on a black background. Now visit some websites and see what happens. You should find that web pages now use large, white text on a black background. Hover over some links and you should find that a red outline appears around the link text.

Screenshot 05: My custom style sheet causes the web page to display large, white text on a black background.

This isn’t a carefully crafted style sheet: it was simply cobbled together with a few rules pulled from information about accessibility. It should demonstrate, though, that the user has quite some power when visiting web pages.

Disable scripts and plug-ins

Enable and disable scripts and Plug-ins. Another area where you have power over a website is with scripts and plug-ins. Safari’s Security tab allows you to enable and disable Java, Javascript, Cookies and Plug-ins.

Screenshot 06: Safari’s Security tab allows you to enable and disable Java, Javascript, Cookies and Plug-ins.

There is enormous power here: as with most technologies, each can be used for good or evil. I have accidentally visited porn sites that pop open a million windows — every time you try to close the window to get away from the site half a dozen new ones open. That kind of trick is done with scripts.

On the other hand, your bank may use scripts to log you out if you don’t use a page for a while. This can help ensure your privacy and keep your financial information safer.

Cookies are commonly used on shopping websites to keep track of items you’ve added to a shopping basket, or to greet you by name when you next visit the site.

If you disable items in this Security section you may find that sites you want to use don’t work correctly.

But still, it’s up to you; you can take control.

This article was first published in About This Particular Macintosh in April 2007 and may have been modified from the original.

Popularity: 20% [?]

Confused? You've found you're at KnowIT when you expected to be at TiKouka at MacTips? The blog has been moved over here and you were automatically redirected. Found something broken? Please let me know.

Some possibly related posts

{ 1 comment… read it below or add one }

1 subcorpus 04.25.08 at 11:44 01

tried my own css …

works like a charm … amazing …

thanks for the info …

appreciated …

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>