Using a spacer.gif in 2020

From Wikipedia:


This content originally appeared on Scott O’Hara UX developer, designer & accessibility engineer and was authored by Scott O'Hara

From Wikipedia:

A spacer GIF is a small, transparent GIF image that is used in web design and HTML coding. They were used to control the visual layout of HTML elements on a web page, at a time when the HTML standard alone did not allow this. They became mostly obsolete after the browser wars-fueled addition of layout attributes to HTML 2.0 table tags, and were mostly unused by the time Cascading Style Sheets became widely adopted.

Why would one need to use a spacer.gif today, with CSS powers a-plenty?

If one were to need a background image which needed to be exposed as a graphic with alternative text for screen readers. For example…

See the Pen didja know you can give an image a background image? by Scott (@scottohara) on CodePen.

OK, that image didn’t actually need to be exposed. But, it was an example.

What is this example/hack showing?

  • img elements can have a transparent 1px by 1px source, but can also display an image via CSS background-image.
  • Using an img element rather than setting a background image on a div, or some other containing element, allows for the image itself to be exposed to the accessibility tree by giving it an accessible name via its alt attribute.
  • No worries of older browsers discarding the CSS background image in Windows High Contrast Mode. Cause we likely don’t want that.
  • CSS background-position and background-size work consistently in IE11+. Neat.
  • Couldn’t we use object-fit to do something similar? Yes. But, not if you needed to support IE11 or pre-Chromium Edge. Less neat.

Should you be doing this?

MEH? Situationally at best.

Typically background images really should be relegated to decorative purposes. The only reason I even thought about doing this, today, was because someone was asking if they could add an aria-label to a div to provide alternative text for a background image on a website.

And the answer to that question is no.

Naming a generic element, such as a div is prohibited and people need to cut that out.

Seriously.


This content originally appeared on Scott O’Hara UX developer, designer & accessibility engineer and was authored by Scott O'Hara


Print Share Comment Cite Upload Translate Updates
APA

Scott O'Hara | Sciencx (2020-02-13T00:00:00+00:00) Using a spacer.gif in 2020. Retrieved from https://www.scien.cx/2020/02/13/using-a-spacer-gif-in-2020/

MLA
" » Using a spacer.gif in 2020." Scott O'Hara | Sciencx - Thursday February 13, 2020, https://www.scien.cx/2020/02/13/using-a-spacer-gif-in-2020/
HARVARD
Scott O'Hara | Sciencx Thursday February 13, 2020 » Using a spacer.gif in 2020., viewed ,<https://www.scien.cx/2020/02/13/using-a-spacer-gif-in-2020/>
VANCOUVER
Scott O'Hara | Sciencx - » Using a spacer.gif in 2020. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2020/02/13/using-a-spacer-gif-in-2020/
CHICAGO
" » Using a spacer.gif in 2020." Scott O'Hara | Sciencx - Accessed . https://www.scien.cx/2020/02/13/using-a-spacer-gif-in-2020/
IEEE
" » Using a spacer.gif in 2020." Scott O'Hara | Sciencx [Online]. Available: https://www.scien.cx/2020/02/13/using-a-spacer-gif-in-2020/. [Accessed: ]
rf:citation
» Using a spacer.gif in 2020 | Scott O'Hara | Sciencx | https://www.scien.cx/2020/02/13/using-a-spacer-gif-in-2020/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts