Lately, I've seen a lot of image map tutorials circulating on Pinterest. And, as an unfortunate side-effect, I've also seen a lot of poorly-implemented image maps on blogs.
Image maps are often called an "easy" alternative to HTML & CSS, but a lot of that ease comes from cutting corners. Some tutorials leave out the steps you need to take to make image maps accessible and search engine friendly. Those cut corners can negatively impact your readers' experience.
This isn't a tutorial on how to make an image map. Instead, this is a primer on image map best practices. Use this along with your favorite image map tutorial to ensure that your maps lead all of your readers in the right direction!
Every Image Map Maker Should...
Provide Alt Text for the Map
Alt text (alternative text) is a required attribute for image elements, but many image map makers leave it out. When you create an image map, enter alt text for the base image and for each of the linked sections of the image. This helps people with visual impairments use your image map, and helps clarify the content of the image map for search engines.
Make Large Clickable Areas
Don't make it a challenge for your readers to click on the right part of your image map! Expand the clickable area so that it's large enough to cover the entire shape you're linking. It's ok to make the clickable area slightly larger than the shape itself to ensure that the entire shape is clickable. If you do go oversized, just give your clickable areas a bit of extra space around the edges so your readers don't accidentally click on the wrong area.
Order the Links Properly
Many people with disabilities use keyboard navigation to move through a blog. When you're setting up your image map, order the links as they appear from left to right in the image. This way if someone is using the "Tab" key of their keyboard to move through your links, they'll get to each link in a predictable pattern.
When you get your HTML output from your image map generator, check that all of your links are in order before putting the map up on your blog. If they're not, move them to the correct place or use the tabindex attribute[1] to put them in order.
Watch the File Size
Blog images tend to have a large filesize to begin with, and adding the coordinate data for the image map to the mix can increase the overall "weight" of your page. Big image maps will slow your page load time, especially on mobile devices. One small image map on an image with a small file size is generally not a problem, but if you're using large (or lots of) image maps, you should test your page out with Google's page speed tool. If your image maps are bulky, the tool will provide suggestions for minimizing your images' filesizes to improve load times.
If You're Using an Image Map for Navigation...
First, Reconsider
Image maps are not recommended for navigation for three main reasons:
- They are difficult for people with disabilities to use. For example, some screen readers only read the alt text of the base image to people with visual impairments, and only make the first link clickable [2].
- Readers who use translation services to read your blog won't be able to translate the text in your image map.
- Search engines don't give links in an image map as much attention or "weight" as they'd give to regular HTML links[3].
After you've considered all that, if you still really, really want to use an image map for your navigation, make sure to:
Provide A Set of Text Links, Too
To assist your visitors with disabilities, international readers, and the search engines, add a set of text links as a navigation alternative below your navigation image map — the closer the better!
Avoid "Mysterious" Navigation
If you're building a navigational image map, don't do this:
And not just because that's ugly — I'm a developer, not a graphic designer, cut me some slack ;)
If that's your header navigation, your visitors may not realize that those images are clickable links. They may assume they're your logo or just decorative. Be sure to label the clickable areas with visible information about where the links will take your readers (in addition to the alt text, not instead). Here's an more user-friendly (but still super-ugly) version of the image menu above:
In this version, each of the image areas are labeled so that readers will have an easier time understanding that the images are links.
Phew! That's a lot to absorb, I know. Image maps aren't quite as easy as they might seem at first glance, but now you know how to make them as user-friendly and search-engine friendly as possible.
Alternatives to Image Maps
If you're having second thoughts about using an image map, here are some resources for building social media buttons and navigation menus with HTML & CSS.
- How I Set Up My Social Media Buttons - my tutorial on how I made my social media buttons with HTML and one little line of CSS.
- Turning a List into a Navigation Bar - from 456 Berea Street. An oldie but goodie, this comprehensive & well-written tutorial shows you how to make a basic navigation menu out of an HTML list.
- HTML and CSS - Lists & Navigation - from Coding for Good. Part of an HTML/CSS tutorial series, with excellent instruction and resources on creating your own navigation menu.
Footnotes:
- University of Arizona Web Developers Group on tab order and the tabindex attribute.
- OSU Web Accessibility Center on image map accessibility.
- Columbia University Information Technology on the basics of SEO.
Map image in title card CC-BY Norman B. Leventhal Map Center at the Boston Public Library
