image alt and title tests

Image used for all tests

test image containing the phrase 'get happy!'></p>
<div class=

Test images with incorrect src values

Example 1

no alt

Example 2

alt=""

Example 3

alt="get happy!"

get happy!

Example 4

no alt , title="get happy"

get happy

Example 5

alt="get happy!" and title="get happy"

get happy!

Example 6

alt="", title="get happy"

Example 7

alt="get happy get happy get happy get happy get happy get happy get happy"

get happy get happy get happy get happy get happy get happy get happy

Example 8

title="get happy get happy get happy get happy get happy get happy get happy"

get happy get happy get happy get happy get happy get happy get happy

Results summary

All browsers tested display the content of the alt attribute as text, if the image is missing or images are disabled, with the following exceptions:.
- Opera truncates the display of text if it is longer than the img width.
- Chrome and Safari do not display the text if it is longer than the img width.
All browsers except Firefox render an area equal to the image dimensions.
IE, Chrome and Safari always display an icon and border.
Chrome and Safari (only) display the content of the title attribute as text if the alt attribute is not present.
Chrome and Safari (only) the display of title attribute content is suppressed if an empty alt attribute (alt="") is present.
Opera displays the text "image" if images are not available and the image does not have an alt attribute.

Results Screenshots

A page with screenshots of the test images in each of the browsers tested is available.

Results detail.

Notes

Image background color: if set using CSS.
Nothing: no displayed indication of the image.
Icon styles vary across browsers.
The area displayed with the images background color and/or the bordered area is equal to the dimensions of the image in browsers except for Firefox.

Display results for test using popular browsers on Windows
alt/title	IE 8	Firefox 3.6 beta 1	Opera 10.10 beta	Chrome 4.0	Safari 4.0
1. no alt	img background color, border and icon	nothing	img background color, text "image"	img background color, border and icon	img background color, border and icon
2. alt=""	img background color, border and icon	nothing	img background color, border	img background color, border and icon	img background color, border and icon
3. alt="get happy!"	img background color, border and icon, text "get happy!"	img background color, text "get happy!" Note: area under text inherits img background color.	img background color, border and icon, text "get happy!"	img background color, border and icon, text "get happy!"	img background color, border and icon, text "get happy!"
4. no alt , title="get happy"	img background color, border and icon	nothing	img background color, text "image"	img background color, border and icon, text "get happy"	img background color, border and icon, text "get happy"
5. alt="get happy!" and title="get happy"	img background color, border and icon, text "get happy!"	img background color, text "get happy!" Note: area under text inherits img background color.	img background color, border and icon, text "get happy!"	img background color, border and icon, text "get happy!" Note: alt content displayed not title content.	img background color, border and icon, text "get happy!" Note: alt content displayed not title content.
6. alt="", title="get happy"	img background color, border and icon	nothing	img background color, border.	img background color, border and icon. Note: alt="" supresses title content display.	img background color, border and icon. Note: alt="" supresses title content display
7. alt="get happy get happy get happy get happy get happy get happy get happy"	img background color, border and icon,text "get happy get happy get happy get happy get happy get happy get happy"	img background color, text "get happy get happy get happy get happy get happy get happy get happy" Note: area under text inherits img background color.	img background color, border and icon, text "get happy get happy get happy get hap" Note: text truncated, constrained by img width.	img background color, border and icon. Note: text not displayed as length is greater than img width.	img background color, border and icon. Note: text not displayed as length is greater than img width.
8. title="get happy get happy get happy get happy get happy get happy get happy"	img background color, border and icon	nothing	img background color, text "image"	img background color, border and icon. Note: text not displayed as length is greater than img width.	img background color, border and icon. Note: text not displayed as length is greater than img width.