Stanford Online Accessibility Program

Images and Icons Used as Links: Size Considerations

Images - or hot spots in image maps - that are too small can be very difficult to activate using voice controlled systems, touch screens, or even by traditional pointing devices used by someone with reduced fine motor control. For this reason, it is strongly recommended making linked images - or image map hot spots - as large as your design allows.

In the folllowing example, the displayed area of linked images 1) and 2) are the same (PDF icon) but the active area of the link (dashed lines) has been made larger in 2), thus easier to select with a pointing device.

Image 1) Image 2)

1. The active area for the first button is 16 pixels wide by 16 pixels deep: <img src="pdf.gif" width=16 height=16 alt="Download PDF">
2. The active area for the "PDF" button is now 32 pixels square, making the active spot much larger. Thus it is possible to make the displayed image text "look" the same to a sighted user, while making the active area much larger and easier to select with a mouse: <img src="pdf.gif" width=32 height=32 alt=" Download PDF">

Note: A graphic editor was used to make the second image "deeper": the space at the top should be made the same colour as the page background (e.g. white or in GIF files, transparent).

Unless indicated otherwise, this work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.