title attributealt=∅alt=∅ role=imgalt & no role role=imgalt=text role=img alt=text img elements with and without the alt attribute.Background, purpose and results of these tests follows below. Otherwise, to take the test, just start reading the following two tables with your favorite assistive technology, graphical user agent or text browser. PS: Webkit browser users might benefit from reading a small note before takinging the test.
By the way: This document contains everything — tests, texts and results. If you plan to take these tests thoroughly — and not just read it to get the conclusions etc, then I have a dedicated page with just tests, so you avoid all text. Also, if you would like a score paper, to register your findings, then you can go to the empty results page.
| # | attribute combination | A: Default tests | B: Bogus src tests | C: CSS repair tests |
|---|---|---|---|---|
| 1 | alt=∅ | Test 1 A begins. | Test 1 B begins. | Test 1 C begins. |
| 2 | alt=∅ role=img | Test 2 A begins. | Test 2 B begins. | Test 2 C begins. |
| 3 | no alt & no role | Test 3 A begins. | Test 3 B begins. | Test 3 C begins. |
| 4 | role=img | Test 4 A begins. | Test 4 B begins. | Test 4 C begins. |
| 5 | alt=text role=img | Test 5 A begins. | Test 5 B begins. | Test 5 C begins. |
| 6 | alt=text | Test 6 A begins. | Test 6 B begins. | Test 6 C begins. |
| # | attribute combination | A: Default tests | B: Bogus src tests | C: CSS repair tests |
|---|---|---|---|---|
| 1 | alt=∅ | Test 1 A begins. | Test 1 B begins. | Test 1 C begins. |
| 2 | alt=∅ role=img | Test 2 A begins. | Test 2 B begins. | Test 2 C begins. |
| 3 | no alt & no role | Test 3 A begins. | Test 3 B begins. | Test 3 C begins. |
| 4 | role=img | Test 4 A begins. | Test 4 B begins. | Test 4 C begins. |
| 5 | alt=text role=img | Test 5 A begins. | Test 5 B begins. | Test 5 C begins. |
| 6 | alt=text | Test 6 A begins. | Test 6 B begins. | Test 6 C begins. |
Results are given in words, in screenshot and soundclips and finally in two big tables which uses the classification descibed below.
alttitle attribute is used — or affects the interpretation — when there is no altrole=img affects the handling of the img elementaria-* prefixed attributes and how they interact with these tests, were not looked atrole="presentation" was not testedimg without alt inside figure element was not testedalt attribute was not testedsrc attribute presented as alternative text.title attribute presented as alternative textalt attribute presented as alternative text[alt], then the ÷ signifies that alternative text presentaion is not accompanied with any short “image”/“graphic” announcment (similar to the dummy, see above)alt attribute.img with an empty alt is lacking: Some (Firefox/Opera) fall back to the empty string . Others (Safari/Chrome/IE) display an icon to indicate that the graphic is lacking.alt: Opera generates alt repair which says “image”. Firefox “disappears” the image. Safari/Chrome/IE display a dummy icon. Screenreaders tend to treat it like the empty string.alt="non-empty" is treated as expected. (Note: the effect of role=presentation not tested)alt is empty, then role="img" does not affect the interpretation. Exception: VoiceOver+Safari.title attribute has good support as a fallback for when there is no alt. Exception: VoiceOver+Safari 6 went for the file name instead – seems like a general problem.alt images are most often treated as a presentational images. Common exception: But when the image as well has a non-empty title attribute, then the image is recognized and the title is used as alternative text – this is the common trend.This section contains screenshots of browsers taking the above tests — as well as recordings of screenreaders taking the above tests.
— To be added —
The results in words are based on the findings in these tables. The first table does not include the title attribute. The second table includes the title attribute on every image.
| # | attribute combination | A: Default tests | B: Bogus src tests | C: CSS repair tests |
|---|---|---|---|---|
| 1 | alt=∅ |
|
|
|
| 2 | alt=∅ role=img |
|
|
|
| 3 | no alt & no role |
|
|
|
| 4 | role=img |
|
|
|
| 5 | alt=text role=img |
|
|
|
| 6 | alt=text |
|
|
|
| # | attribute combination | A: Default tests | B: Bogus src tests | C: CSS repair tests |
|---|---|---|---|---|
| 1 | alt=∅ |
|
|
|
| 2 | alt=∅ role=img |
|
|
|
| 3 | no alt & no role |
|
|
|
| 4 | role=img |
|
|
|
| 5 | alt=text role=img |
|
|
|
| 6 | alt=text |
|
|
|