Replace an image map used for navigation with real text links. Alt text on each region helps screen readers, but keyboard order, tiny phone targets and text that cannot be enlarged remain until the menu is rebuilt.

One picture, several links

Some older sites use a single picture as the main menu: a row of painted buttons, a photograph with each window linking somewhere, a drawing of the region with each town clickable.

In the code, shapes are marked out over the picture (rectangles, circles or freehand outlines), each pointing to a page. This is an image map.

It was a common way to make a menu look exactly as designed, before web fonts made that possible with ordinary text.

To a sighted visitor with a mouse, it works. To many others it is a picture with hidden links.

Who it fails

The first is the most complete failure. A region with no alt text is announced by its web address or not at all, so the menu becomes a list of file names.

Alt text on each region

Each clickable region can carry its own alt text, a short label read out in place of the picture. WCAG 2.0, the guidelines accessibility checks are usually measured against, asks for exactly that.

Adding it is quick, and worth doing this week on any site that still has an image map. It gives screen readers the names of the links.

It fixes nothing else. Keyboard order, tiny targets and text that cannot be enlarged all remain, which makes alt text a patch rather than the fix.

Keyboard order and focus

Someone using a keyboard presses Tab to move from link to link. On an image map, the order is whatever order the regions were written into the code.

That can jump across the picture: the bottom corner, then the centre, then the top. The outline showing which region is selected can be faint, or hard to see against a busy image.

Keyboard order matters to everyone who cannot use a mouse, including many people with tremors or limited movement.

On a phone

On an older site built at a fixed width, a phone shows the whole page shrunk to fit the screen. The picture menu shrinks with it, and each region ends up a few millimetres wide.

Some sites have been patched so the picture shrinks to fit the phone. The regions do not shrink with it, because their positions are set in pixels for the full-size picture, so they drift away from their drawings.

And image maps that show labels only when a mouse hovers over a region show nothing on a touch screen, because there is no hover.

Text that is part of the picture

Words painted into an image do not respond to the text-size settings people use to read more comfortably, and they blur when the page is zoomed.

They cannot be selected, copied or translated, and search engines read them only through whatever alt text exists.

They are also hard to change. Adding a menu item means an image editor and new coordinates, so menus built this way tend to stay as they were the day they were drawn.

A worked example

A chess instructor teaches private lessons, runs after-school chess clubs at several elementary schools, and holds a week-long camp each summer.

His site, built in 2005, opened on a photograph of a chessboard, and each piece was a link.

The king led to his biography, the queen to lessons, a rook to the school clubs, a knight to the camp, the pawns to contact.

None of the regions had alt text, and tabbing went from the pawns to the king to a rook and back across the board.

On a phone the board was the width of a coaster. A parent asking about camp dates mentioned she had tried the knight twice and reached the school clubs page both times.

The rebuild kept the photograph as a decorative header and put a plain menu of text links beneath it: About, Lessons, School clubs, Camps, Contact.

Every link is real text, in a sensible order and large enough to tap, and nobody has to redraw the board when the camp moves to a different week.

Maps of service areas

The other common image map is a drawing of the region, with each town or neighbourhood clickable and leading to a page about working there.

Keep the drawing if it helps people see the area you cover. Put a list of the towns beside or beneath it as ordinary text links, in alphabetical order.

The list works for screen readers, keyboards, phones and search engines, and it answers the visitor's real question, whether you come to them, faster than any drawing.

Real links instead

The replacement is a list of ordinary links, styled to look much like the old design: the same colours, the same typeface where possible, even the old artwork behind the text.

On phones the same list can stack vertically or sit behind a menu button. Put the links in the order a visitor reads them, and make each one large enough to tap.

If the old picture carries the brand, keep it as decoration, with empty alt text so screen readers skip it.

The counter-case

An image map used as an illustration, with every link repeated as text nearby, does little harm. The problem is a picture doing the work of a menu.

Some pictures genuinely need clickable regions, such as a detailed floor plan, and those need careful work rather than a simple list.

A site already scheduled for replacement this year can reasonably get alt text now and a new menu with the new site. For navigation, though, real links are the fix.

The fix, in order

  1. Tab through the page and watch where focus goes.
  2. Try the menu on a phone with your thumb.
  3. Add alt text to every region now.
  4. Replace the picture menu with text links.
  5. Order the links the way visitors read them.
  6. Keep the picture as decoration, if wanted.
  7. List service areas as text beside any map.

Step four is the real fix. Step three helps screen reader users this week, but only real links work for keyboards, phones and enlarged text at the same time.

Who approves a change like this and who checks it afterwards is covered in who decides what goes on the website this year.

Frequently asked questions

What is an image map?

A single picture with clickable regions marked out in the code, each linking to a page. Older sites used them for menus and for maps of the areas they serve.

Why are image maps hard for screen readers?

Each region needs its own alt text. Without it, a screen reader announces each link by its web address or not at all, and the menu becomes unusable.

Does adding alt text fix it?

It gives screen readers the link names. Keyboard order, tiny targets on phones and menu text that cannot be enlarged all remain, so it is a patch, not the fix.

Why do image maps fail on phones?

On a fixed-width site the picture shrinks with the page, so regions become tiny. If the picture is resized to fit, the clickable shapes no longer line up with it.

Can the new menu look like the old one?

Largely, yes. Text links styled with the same colours, typeface and even the old artwork behind them keep the look and work for keyboards, phones and screen readers.

What about a map of the areas we serve?

Keep the drawing as an illustration, and put a text list of the towns beside it, each a real link. The list works for everyone.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Menu still a single picture?

Tell us the web address. We will explain what replacing it with real links would involve.

Start a Conversation