Rebuilding The Web

Articles, advocacy, discussion and debate about the many problems of the Web and the challenges of rebuilding it.

Should HTML5 spec correct the img element definition?

The <img> element is one of the more difficult HTML elements to use correctly. Part of the problem is caused by the unhelpful definition of the <img> element in the HTML specification.

HTML5 tries to correct the definition of some elements

HTML 4 contains a number of elements whose definition does not match the correct or best practice use of the elements. The following are some examples from the HTML 4 specification:

  • The <a> element is defined as an "anchor", whereas the correct use of this element is as a hyperlink. There is no need for a dedicated anchor element because any element can be an anchor if it has an id attribute.
  • The <hr> element is defined as "[causing] a horizontal rule to be rendered by visual user agents", whereas the correct use of this element is as a content separator.
  • The <table> element is defined as "[containing] all other elements that specify caption, rows, content, and formatting", whereas the correct use of this element is for organizing tabular data.

As a consequence, tool vendors built tools that encouraged the incorrect use of these elements, educators wrote books and tutorials that taught others the incorrect use of these elements, and Web site creators who read the spec for themselves also used these elements incorrectly.

HTML5 tries to correct the definition of these elements. Here is how HTML5 defines them:

  • If the <a> element has an href attribute, then it represents a hyperlink (a hypertext anchor).
  • The <hr> element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.
  • The <table> element represents data with more than one dimension, in the form of a table.

Could the HTML5 definition of these elements be better written? Yes, because as they are, they are a little hard to understand. But it's a step in the right direction.

Time to correct the definition of img element

The HTML5 spec defines the <img> element as an element that "represents an image". The spec then defines alternate text (textual content) as "fallback content". What's wrong with this? These definitions suggest that the visual content (the image) is more important than the textual content. As a result, to many people, if the primary purpose of embedding an image is achieved, the secondary or fallback purpose (textual content) can be skipped or given cursory effort.

The following is a better way to describe the <img> element that gives equal weight to the visual and textual content: "The img element represents content that can be rendered visually (as an image) and textually. The src attribute provides visual content in the form of an image and the alt attribute provides textual content. The content in the src and alt attributes must convey equivalent meaning."

The principle behind this definition is already in practice in a publicly available HTML reference.

Conclusion

The <img> element's visual content and its textual content are equivalent in meaning and should therefore be of equal importance. How elements are defined in the specification influences tool vendors, educators and ultimately Web site creators, so that clearly defining the correct use of HTML elements can over time improve the use of HTML.

Public comments

1. Posted by Laura
on Friday 2010-02-19 at 06:18:24 PST

Hi Vlad,

I encourage you to file this as a HTML5 Spec Bug.
http://www.w3.org/WAI/PF/HTML/wiki/Process_to_submit_HTML_spec_comments

If you add the email address "public-html-a11y [at] w3.org" to the cc field for the bug, the HTML5 Accessibility task force will be alerted.

http://www.w3.org/WAI/PF/html-task-force
http://www.w3.org/WAI/PF/HTML/wiki/Main_Page

2. Posted by Vlad Alexander
on Friday 2010-02-19 at 08:40:34 PST

Hi Laura,

Submitting bug reports to W3C HTML WG or WHATWG is an implicit approval of a process in which I do not have confidence. The needs of many stakeholders in Web technology are not being met because they are denied equitable participation and influence in the process of developing the next version of HTML. Withholding my participation from the process and advocating for change from the street is for me, and I suspect for others as well, the only way to change the process itself.

Anyone is welcome to use ideas from this Web site to file bug reports. There is no need to credit these ideas or bug reports to me.

3. Posted by Laura
on Saturday 2010-02-20 at 03:55:07 PST

Hi Vlad,

I hope the W3C process works. I submitted your idea.
http://www.w3.org/Bugs/Public/show_bug.cgi?id=9098

4. Posted by WebDesignExpert.Me
on Sunday 2010-02-21 at 03:14:53 PST

Completely agree with this. I am of the view that the ALT text in IMG tag needs to be able to be displayed somehow not only as a 'fallback' (i.e., if the image is missing) but also as a tooltip even if the image is present (and can be rendered). I even filed a bug report with Bugzilla of Mozilla about the Firefox browser and they said Firefox is correct as per HTML 4.01 spec, and that ALT text is supposed to display only if the image is missing or cant be rendered. They said if the image has to have a tooltip, then it must come from the TITLE attribute of the IMG. With this kind of updated definition for the IMG tag, I hope browsers will start displaying ALT text of IMG as a tooltip even if the image can be rendered correctly. One can argue with the browser makers only if the HTML spec clearly specifies this point regarding IMG.

5. Posted by Vlad Alexander
on Sunday 2010-02-21 at 11:07:50 PST

WebDesignExpert.Me wrote: "I am of the view that the ALT text in IMG tag needs to be able to be displayed somehow not only as a 'fallback'..."

What I hear you say is that you would like to see alternate text for images on demand. Displaying alternate text as a tooltip would be the wrong behaviour in my opinion because tooltips are additional data to the content in the <img> element whereas alternate text is equivalent replacement data for an image.

I think the solution is for browsers to make it easier to switch between displaying images and alternate text. Opera makes this pretty easy by adding a switch on the status bar as shown in the screen shot below.

Screen shot of a pop-up menu showing the following three options: Show Images, Cached Images and No Images.

Unfortunately, Opera cuts off alternate text.

6. Posted by Adam Clark
on Wednesday 2010-02-24 at 02:46:02 PST

I would gladly support this change and I'm for any proposal that supports a more meaningful and usable online experience. Sadly the beast that is the HTML5 spec is a slow on the uptake as the IE6 community. There is no sense of urgency when it comes to improving, i would seem.

It frustrates me that in such a forward-thinking industry we are bound to rules and specifications that have the flexibility and agility as a glacier.

Comments are closed for this article.

Main menu

Check out the a11y bugs project that aims to help browser / tool vendors fix accessibility bugs.