It is proposed that the alt attribute will be optional rather required in HTML 5, proponents of the change claim that it will not have an adverse effect upon the accessibility of images. Initial testing of this claim with assistive technolgy suggests otherwise.
The current draft HTML 5 specification has removed the requirement for an img element to have an alt attribute. The presence of images without good quality alt text is the reason put forward for changing the alt attribute from required (in HTML 4.01) to optional (in HTML 5). The main use case cited is of photo sharing sites such as flickr.com where The images are the whole point of the pages containing them
.
It is claimed that this change is not another slap in the face for accessibility
, that any perceived undermining of the accessibility benefits arising from the requirement for all img elements to have alt attributes is nothing more than an an unfortunate misconception
.
The problem being addressed is what should be done in those cases where no alt text has been provided and is virtually impossible to acquire. With the current requirement for including the alt attribute in HTML 4, it has been observed that many systems will attempt to fulfil the requirement by generating alternate text from the images metadata.
Flickr, for example, repeats the images title
- Lachlan Hunt, WHATWG blog
It is clear from what has been written about the change that, very little investigation into how assistive technology in particular presents content to users, has been carried out. It must be noted that although the changes have already been introduced into the specification, before such a change is agreed upon by the HTML working group, much more debate and a thorough examination of the ramifications of such a change must occur.
If the developers of flickr.com or Photobucket were to implement the recommendations within the current HTML 5 draft what are the potential effects upon the accessibility of the sites for users of assistive technology such as screen readers?
Taking an example page from flickr.com where the alt text is a repetition of the title for the image. If the alt attribute is omitted as recommended, what are the results?
To demonstrate the results of implementation, the critical content from the example page was extracted and inserted into 2 documents. The first document contains the critical content (the photos) along with the alt text provided in the original page. The alt texts for the images are automatically generated from the user supplied photo titles. The second document contains the same photos, but the alt attributes have been removed.
The 2 test pages were then "viewed" using the Jaws screen reader and Fangs screen reader emulator and the resulting output from these applications was captured.
The text output from the Fangs screen reader emulator provides (in this case) an accurate text version of the JAWS screen reader aural output.
Page has one heading and forty links critical content with alt text dash Internet Explorer Heading level one critical content with alt text Link Graphic Sgt.Pepper and Robintwo From Link pinktigger Link Graphic Sgt.Pepper and Robinthree From Link pinktigger Link Graphic Sgt.Pepper and Robinone From Link pinktigger Link Graphic Boba and Franny's Baby Cat Sleeping From Link jacquiscloset Link Graphic little Robinfour From Link pinktigger Link Graphic pozycja roku From Link nettys dash girlthree Link Graphic Baby From Link m.mchenry Link Graphic After a long day, Ruby loves to kick back... From Link ahablab Link Graphic four thousand eight hundred thirty-nine SleepingHard From Link helorime Link Graphic four thousand eight hundred thirty-eight Sleeping From Link helorime Link Graphic four thousand eight hundred forty-two Foursome From Link helorime Link Graphic four thousand eight hundred thirty-three KittenKnot From Link helorime Link Graphic Lenny sleeps weird From Link linneaseventy-eight Link Graphic The Lion's Sneak Attack From Link Sasha with an X Link Graphic Disturbing Heechee's Nap From Link Sasha with an X Link Graphic Sleepy Smokey From Link klausvonmersault Link Graphic sleeping princess From Link gina loves kitties Link Graphic Rather Strange Position, Freddie From Link merriewells Link Graphic Bootz From Link m.mchenry Link Graphic Baby From Link m.mchenry
Page has one heading and forty links critical content without alt text dash Internet ExplorerHeading level one critical content without alt text Link Graphic slash one billion two hundred thirty-seven million eight hundred seventy-four thousand two hundred ninety-three underline eight dfcdzerocbfe underline t.jpg From Link pinktigger Link Graphic slash one billion two hundred thirty-seven million eight hundred seventy-four thousand three hundred seven underline thirty-eight afifty-nine dbftwo c underline t.jpg From Link pinktigger Link Graphic slash one billion two hundred thirty-seven million eight hundred seventy-four thousand two hundred eighty-nine underline three million eight hundred thirteen thousand nine hundred sixty-five csixty-eight underline t.jpg From Link pinktigger Link Graphic slash one billion two hundred twenty-one million one hundred six thousand five hundred seventy-five underline bfive bthirty-seven dbftwo a underline t.jpg From Link jacquiscloset Link Graphic slash one billion two hundred fifteen million eighty-seven thousand seven hundred five underline four eeczerobsix thousand six hundred fifteen underline t.jpg From Link pinktigger Link Graphic slash one billion two hundred twelve million six hundred fifty-six thousand three hundred nineteen underline six thousand six hundred ninety-seven acfive esixty-nine underline t.jpg From Link nettys dash girlthree Link Graphic slash one billion two hundred eight million three hundred seventy-one thousand five hundred twenty-six underline one hundred fifty bnine ffaseven e underline t.jpg From Link m.mchenry Link Graphic slash one billion one hundred eighty-nine million three hundred thirty-two thousand four hundred fifty-one underline eight bseven thousand five hundred four ctwo hundred seventy-four underline t.jpg From Link ahablab Link Graphic slash one billion one hundred forty-six million twenty-one thousand two hundred thirty-seven underline seven beight asixty-five cceone underline t.jpg From Link helorime Link Graphic slash one billion one hundred forty-six million eight hundred sixty-one thousand seven hundred two underline five thousand five hundred thirty aseventy-seven dthirty underline t.jpg From Link helorime Link Graphic slash one billion one hundred forty-six million eight hundred seventy thousand two hundred twenty-eight underline beight hundred sixty-three fabcefive underline t.jpg From Link helorime Link Graphic slash one billion one hundred forty-six million eight hundred fifty-nine thousand eight hundred ninety-four underline four cforty eeighty-nine underline t.jpg From Link helorime Link Graphic slash one billion one hundred nineteen million ninety-eight thousand three hundred thirteen underline atwenty-eight esix thousand eighty-five cnine underline t.jpg From Link linneaseventy-eight Link Graphic slash one billion ninety-four million five hundred sixty thousand two hundred ten underline fsix hundred twenty-six thousand three hundred forty-seven fthirty-three underline t.jpg From Link Sasha with an X Link Graphic slash one billion ninety-three million six hundred ninety-nine thousand five hundred sixty-one underline ninety-nine efthirty dseventy-two underline t.jpg From Link Sasha with an X Link Graphic slash one billion eighty-nine million one hundred twelve thousand four hundred one underline four million five hundred eighty-one thousand four hundred ctwenty-four underline t.jpg From Link klausvonmersault Link Graphic slash one billion seventy-seven million two hundred nineteen thousand nine hundred fifty-two underline dtwenty-six dnine hundred three esixty-two underline t.jpg From Link gina loves kitties Link Graphic slash one billion sixty-two million six hundred forty-eight thousand one hundred sixteen underline seventy-six ffifty-seven thousand four hundred forty-two dfive underline t.jpg From Link merriewells Link Graphic slash one billion twelve million one hundred eighty thousand two hundred one underline five bsix caseventy aenine underline t.jpg From Link m.mchenry Link Graphic slash nine hundred sixty-five million two hundred twenty-seven thousand five underline seven fedtwo ethree eff underline t.jpg From Link m.mchenry
Taking an example from Photobucket (provided by Lachlan Hunt) of a page containing a single "critical content" image.
The page in question contains 2 copies of the image. Both of the copies have the same alt text "laugh.jpg laugh image by pbhomepage".
The behaviours detailed apply to JAWS version 6.2, 7.0, 7.1 and 8.0.
alt attribute containing textalt=""alt attributealt=""alt attribute in a linksrc attributeIn the case of the example pages, each "critical content" image is the sole content of a link, so when the image has alt text this is announced, when the alt attribute is absent the filename of the image is announced.
JAWS users can change their settings for graphics, the options are:
When JAWS encounters a link which includes a graphic, it says, "link graphic" followed by the alt or title text. If no alt or title text is available, JAWS reads the file name of the image. JAWS can be set to announce all graphic and image map links, only those that are tagged, or to ignore all graphic and image map links. - JAWS 8.0 Help file
Notes: The Window Eyes 6.0 screen reader exhibits similar default behaviours to JAWS except where the containing a element has a title attribute and the img element does not have an alt attribute. In this case the title text is announced. So in the case of the example critical content the recommendation of omitting the alt attribute is negated as the the title text is the auto generated photo title.
The results clearly indicate that the amount of content conveyed to the screen reader user is increased by around 300% (comparing the length of the texts from the Fangs output) when no alt text is provided. How much of this is useful? From reading or listening to the output it is clear that the file names do not provide any clue to what is contained within the images, it can also be concluded that for the majority of images some useful information can be gleaned from the poor quality auto generated alt text.
To illustrate that, while of poor quality, the alt texts can provide some useful information, example interpretations (based on the knowledge of the image category "sleeping cats") of the alt texts and the file names from "critical content" images in the example page are provided.
| (auto generated) alt text | interpretation of alt text | no alt text (file name) | file name possible interpretation |
|---|---|---|---|
| Sgt.Pepper&Robin2 | Image 2 in a series of photos of cats named sergeant pepper and robin. | 1237874293_8dfcd0cbfe_t.jpg | none |
| Sgt.Pepper&Robin3 | Image 3 in a series of photos of cats named sergeant pepper and robin. | 1237874307_38a59dbf2c_t.jpg | none |
| Sgt.Pepper&Robin1 | Image 1 in a series of photos of cats named sergeant pepper and robin. | 1237874289_3813965c68_t.jpg | none |
| Boba and Franny's Baby Cat Sleeping | a cat owned by Boba and Franny that is sleeping. | 1221106575_b5b37dbf2a_t.jpg | none |
| little Robin4 | Image 4 in a series on photos of a "little" cat named robin possibly the same cat in the sergeant pepper and robin photos. | 1215087705_4eec0b6615_t.jpg | none |
| pozycja roku | A picture of a polish cat perhaps? | 1212656319_6697ac5e69_t.jpg | none |
| Baby | A cat named baby or a kitten. | 1208371526_150b9ffa7e_t.jpg | none |
| After a long day, Ruby loves to kick back... | A cat named ruby in a relaxed pose. | 1189332451_8b7504c274_t.jpg | none |
| 4839SleepingHard | A cat fast asleep? | 1208371526_150b9ffa7e_t.jpg | none |
| 4838Sleeping | A cat sleeping. | 1189332451_8b7504c274_t.jpg | none |
| 4842Foursome | Four cats sleeping. | 1146021237_7b8a65cce1_t.jpg | none |
| 4833KittenKnot | A kitten or kittens tangled up together. | 1146861702_5530a77d30_t.jpg | none |
| Lenny sleeps weird | Lenny the cat sleeping in a strange position | 1146870228_b863fabce5_t.jpg | none |
| The Lion's Sneak Attack | A cat sneaking up to attack something. | 1146859894_4c05088e89_t.jpg | none |
| Disturbing Heechee's Nap | Heechee being woken by the taker of the photo. | 1119098313_a28e6085c9_t.jpg | none |
| Sleepy Smokey | Smokey the cat looking sleepy. | 1094560210_f626347f33_t.jpg | none |
| sleeping princess | A cat named princess or referred to as princess. | 1093699561_99ef036d72_t.jpg | none |
| Rather Strange Position, Freddie | Freddie the cat sleeping in a strange position. | 1062648116_76f57442d5_t.jpg | none |
| Bootz | A cat named bootz. | 1089112401_4581400c24_t.jpg | none |
| Baby | A cat named baby or a small cat. | 965227005_7fed2e3eff_t.jpg | none |
Admitted the alt text is very poor, but of the two (alt or src) which provides more information about the image?
Of the two choices:
Which makes the most sense?
At least the alt text makes some sense and provides information about the image format. As in Scenario 1 the src attribute value is nonsense.
The effects upon accessibility of allowing the omission of the alt attribute are not well understood, it is not evident from arguments produced so far that omitting it under certain cirucmstances will not have an adverse effect upon the accessibility of images. From the results provided here, it is strongly suggested that encouraging omission will reduce the accessibility of images even under conditions where the quality of the alt text is poor.
Before changing the status of the alt attribute from required to optional and before including recommendations about where and when it is to be omitted, more research must be completed into how user agents deal with the absence of the alt attribute and how this affects the end user. In particluar it appears that no AT or user testing was done prior to the change being commited to the specification draft, so it must be carried out now to ensure that damaging changes are not agreed to in a state of ignorance.
updated: 03/09/2007