Web Accessibility Best Practices

Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES)

University of Illinois at Urbana/Champaign

Positioning

Spacer Images

Images used for positioning are usually refered to as "spacers". Spacer images are 1 pixel by 1 pixel transparent GIF image files. They are resized using the WIDTH and HEIGHT attributes of the IMG tag as a way to absolutely position content.

Spacer images present many difficulties to developers of web resources and users of both graphical and non-graphical browsers. Graphical browsers render a web resource at a fixed width that does not adjust to the resolution or physical size of the display. For non-graphical browsers, there is no way to automatically seperate images that provide important content from those that provide unusable styling information. On the New York Times' website there are over 70 spacer images without ALT text; speech browser users might hear, "spacer dot gif," spoken over seventy times as they browse the page.

Fortunately, modern browsers support CSS standards that make the use of spacer images obsolete for modern web developers.

Example of Positioning with Images

User's View in a Graphical Browser

Screenshot of a Website that Uses Spacer Images for Positioning

User's View in a Browser with Images Turned Off

Screenshot of a Website that Uses Spacer Images for Positioning

CSS Positioning