Transparent image fallback – demo page

This is a demo document related to the article Using a transparent image as an icon fallback. Please see the article for context and information.

Just the image

Below this paragraph is a transparent image with the alt text “I am transparent”. If images are turned off in the browser, this text should be exposed.

input type="image"

Below are two input type="image" buttons. The first uses the same transparent image as the standalone image above. The second uses the same image converted to a data URI. The alt text of both buttons is “Click me”. The HTML looks like this:

<input type="image" width="32" height="32" alt="Click me" src="px.png" />
<input type="image" width="32" height="32" alt="Click me" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQIHWNgYAAAAAMAAU9ICq8AAAAASUVORK5CYII=" />

And here are the buttons:

Button elements

Below are two button elements, each containing an img element. As in the input type="image" example the first uses a “real” image while the second uses a data URI. The alt text of the img elements is “Click me”. The HTML looks like this:

<button aria-label="Click me"><img width="32" height="32" alt="Click me" src="px.png" /></button>
<button aria-label="Click me"><img width="32" height="32" alt="Click me" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQIHWNgYAAAAAMAAU9ICq8AAAAASUVORK5CYII=" /></button>

In case you’re wondering why those aria-label attributes are there, see Making accessible icon buttons by Nicholas C. Zakas.

And here are the buttons: