Including img and longdesc in the HTML 5 automatic cross-reference feature.

This document proposes to include the img element as well as the longdesc attribute into the HTML 5 automatic cross-reference feature. (Version 1, 2008.04.16.)

Table of
contents at the bottom of this document.

Related: On a related page, I investigate longdesc accessibility footnotes.

HTML 5’s automatic cross-referencing

works like this: It checks the content of – primarely – the title attribute or – secondly – the very content of «info elements» (abbr, span, i, var, code, samp) and creates a cross-link to the nearest dfn element with the same title or content. The very HTML 5 draft itself implements manual cross-references, by using the a element inside the info-elements, and this article does the same.)

I would say that cross-references are a (new) sub class of semantic links. And because they are links from passages where a term is used, to a place where the term is explained, or explained in more detail, cross-references thus have much in common with what the longdesc link allready does for images in current HTML 4.

This document therefore also proposes to generalize the longdesc attribute to be allowed inside all the info-elements, for the purpose of manual cross-links and for the purpose of cross-links to definitions in outside documents and for the purpose of (some) backward compatibility. (The automatic cross-reference function is page internal.)

Status and perspective

Img is not included in the cross-reference feature

Img is not thought of as a info element. However, img plays many roles – including that of referenes to consepts, terms, ideas etc. So, for instance, when an image of a cat is used to send the message «cat», then you could also have had a cross-link to a defintion of cat. This consept could be used for instance in illustrated dictionaries.

Benefits of including img

For users in general (and authors): The HTML 5 draft sets an example: It uses red color for cross-reference links and blue color for regular links. By saying that the longdesc represents cross-refrences to outside documents/pages (a cross-reference to something the author adheres to and perhaps has written him-/herself), we would not need to introduce the a element insde the info-elements in the moment we decided to split the document into several pages, or just because we chose to link to a defintion in another document.

For authors: Web authors are often in doubt about how to staff img elements with alternative text which is useful for AT users. And often there is no way to programmatically do it. But for those times img is used for creating cross-links, it should be pretty clear: Either you put the term to be defined inside the alt attribute, or you insert som other, related, text in the alt attribute and the term inside the title attribute. As long as the author do not use the title attribute, the alt must be exactly equal to the corresponding term in the dfn element.

For AT users: In as much as the auto cross-link feature becomes a success, and the img element is taken into use together with that feature, this should lead to more images with clear functions, which also are available for AT users. For instance, via this feature, they coud jump to a long description about of the an image. Thus this feature clicks with the longdesc feature.

Two tasks: img and longdesc

Thus, there are two things I try to argue for here:

1) (Some degree of) inclusion of img in the cross-references functionality

2) The extending of longdesc to all the info-elements. (And in the same go, a generalisation of the long description functionality,which currently are mostly aimed at AT users)

The two task are best implemented together. But solving only task 1) or task 2) is also possible.

Task 1: The img element in cross-referencing

The ideal solution

If included in the cross-link feature in the same way as the regular info-elements, then the author would become abel to insert the cross-link term either inside the title attribute of img or inside the alt attribute.

But it is also possible to imagine some special rules for img. I list those below, when I examine som scenarios.

Scenario 1: Cross-referencing stays as is.

Without any changes at all, then the img would have to be wrapped inside another info-element in order to be used in cross-references. All one needs to do is to wrap the img in one of the info elements:

Example 1

<span title=cat ><img alt=cat src=cat_image  ></span> 

As you see, I included the cat word both in the alt text of the img and in the title of the span. For the sighted users, the image of the cat will be the ”term”, while the title text will create the link. For the unsighted user, he/she sees the alt text instead. As you see, one must coordinate two elements this way - span and img.

The alt attribute in the above exampele, could it be empty? Well, if the text ”cat” was included outside the img but inside the span element, then yes. But if not, in the example above, excluding the alternative text, would mean that the image only had a title. And that is not what we want. Alternative text is at least needed as a label. At the same time, the alt text does, in this scenario, take part in the cross-reference feature.

The ideal solution would be that authors could establish a cross-link bettween a the span or img simplly through inserting an alt text. But in this scenaril, while I otherwise could have left the title empty, and let the cross-link be made from the content of the span, like in example 2 …

Example 2

<span>cat</span>

… the corresponding thing, namely, to think that alt=cat could create a link, as in example 3 …

Example 3

<span><img alt=cat src=cat_image ></span>

… does not work. Allthough, example 3 could have worked. And that is what we want. But it doesn't yet work, for reasons I mention below. Therefore, if I had not filled out the title attribute of the span element, then there would not have been any possibility for a link.

Note regarding alt: The reason why this does not work, is because HTML 5 says when the info-element has non-text content, then it is what in the DOM is called textContent that is looked at. And textContent does not include the alt text.

Scenario 2: Changes to how the cross-refrences algorithm looks at img

This scenario has 3 possible outcomes: that only alt gets included, that both alt and title get included or that only title included. And the first of those, namely inclusion of alt has two solutions as well: One could make the content of alt visible in the DOM so that the alt text becomes available for the current info-element. This can be done without including img itself as an info-element

Regarding alt: There is an editorial question in HTML 5, asking Should textContent be defined differently for dir="" and <bdo>? Should we come up with an alternative to textContent that handles those and other things, like alt=""?. Answering yes to this question would, by itself, make alt available for the info-elements. Therefore, it is the most important issue to solve. If alt was included in textContent or if textContent was exchanged with something that includes alt, then we could wrap the img in an info-element, and place the cross-link term inside the alt attribute, as shown in example 3. In other words, we could skip using title of the info-element. This would make the use of img much more generic than what is currently possible. It would make the alt be counted in.

As mentioned above, this solution can be have either one or two effects: As long as the the content of alt is be counted in, then this would make the algorithm, as it currently stands, include the alt text regardless of whether the img element itself is included in the algorithm. (Again, se example 3 above.)

Regarding both alt and title: To include the title, the entire img element would need to be included amongst the info-elements. This would allow us to skip wrapping the img in another element in order to get the cross-link. This would be possibly more rich for AT users, as you could use the alt text more freely. It should also be more simple for authors keeping all in one element. It would mean that the author did not need to add additional elements, when the image was all he cared about!

Thirdly: It would also be possible that img was included, without looking at the alt text. I.e. without including alt in the textContent. This would mean that it would never be possible to use img alone, without using title to create the link.

Task 2: Longdesc

Info elements cannot be interactive

The draft says that only info-elements that has no interactive elements can create cross-referenes. This means that if you includa an a element around the img, for instance, the functionality will not work. This is important to note, because it means that, in case AT User Agents are slow implementing this feature, one cannot workaround the problem by supplying ordinary links instead. Or – one can, but then the automatic cross reference feature is lost, and replaced by a manual cross-reference. The result could become that accessibility boards would advice against relying on the automatic cross-reference feature for cross referencing! Thus having longdesc as part of this feature and as part of HTML 5 in general, could play a role in getting cross-referencing implmented.

Cross-referencing’s relationship to longdesc

I would claim that the longdesc attribute has the role of acting as a cross-reference link especially for users of assistive technology. It is the same thing, only especially aimed at such users. Though, the longdesc attribute also has a wider use, since it does not need to lead to a dfn element.

The longdesc attribute makes the img into an interactive element. Both Opera, Webkit, Internet Explorer and Firefox support the longdesc via the DOM. And thus, via JavaScript, all those browsers, can open the longdesc URIs via mouse clicking etc. Example 6 shows this in practise.

Thus, the longdesc attribute is possibly in conflict with the auto crossreference feature, from a very pure, or puristic, theoretical perspective. Thus, via longdesc one could create manual cross-references as a back-up for AT users. This would have to work in such a way that, for browser that support longdesc, the automatic cross-rererence would win over the manual longdesc reference. I.e. browser checks for automatic cross-references first, and only if such are not found, will it start looking for longdesc.

Extending longdesc to all info-elements

This document propose that longdesc should be supported on any info-element. That is, even for non-assistive users.

This means that one could use longdesc for linking to cross-references outside the current document as well (not possible with the cross-reference feature of HTML 5). The benefit being that the user could see on the color/look of the link that it is a cross-reference link.

It would also enable manual cross-references to other elements than dfn, and regardless of match between title.

Examples

From HTML 5

The HTML 5 draft examplified the ABBR cross-referencing functionality this way, there second paragraphs gest cross-linked to the first paragraph:

Example 4

The <dfn><abbr>Zat</abbr></dfn>, short for Zat'ni'catel, is
a weapon.

 Jack used a <abbr>Zat</abbr> to make the boxes of 
 evidence disappear 

Reworked with img

That example could also be made using an IMG element. Here, I demo it using the id + longdesc attribute. (With img included in the auto cross-reference function, one would in this case not need the longdesc.

Example 5

The <dfn>Zat</dfn>, short for Zat'ni'catel, is a weapon.

Jack used a <img alt='Zat'longdesc="#long_description_of_Zat"src='
http://upload.wikimedia.org/wikipedia/en/thumb/f/fb/SGZatGun.jpg/180px-SGZatGun'> 
to make the boxes of evidence disappear.

Below is a living example of the code above, which proves that all the mayor web-browsers support longdesc via JavaScript and can be used for cross-referencing. Scroll down to the image, click, and see what happens!

Example 6

Note: You must double click the image to activate the longdesc link. I chose double click in order to separate normal links from cross-reference/long description links. See the note about why I chose to do it his way.

Jack used a to make the boxes of evidence disappear.

Joining the longdesc function and the automatic cross-reference function?

I imagine that some could consider that we could ditch longdesc as a special long description link for users of AT and ask such UAs to rely on automatic cross-references instead.

Well, firstly, such an approach would exclude the use of longdesc inside all the info-elements. That is a misbenefit for all users. But, ok, let's imagine that one are willing to let go of that feature as wel.

Then, I think, indeed, that the automatic cross-reference function could help making documents more accessible to users of Assistive Technology. I think, though, that such cross-links would have to be treated by the assistiv User Agent much the same way as long description URIs are treated. That is, they would have to open the cross-link in a new window, which could be closed when the reader would like to go back to the paragraph he/she was reading. This could, again, be claimed as an example of how the two features duplicate each others.

But one of the drawbacks of the automatic cross-reference feature is that it links directly to a term contained in dfn. That term can be in the middle of a long paragraph. I don't think that this is a problem for users of assistive technology. But if you want to designa page excluselive for sighted users, and would like to include a paragraph or section on that same page which should only be available to users of assistive technology, then that would be much more difficult as long as the automatic cross-referencing can only link directly to a dfn elelement. Because, what use is there in hiding a small definition element for all users?

I have created an related page, bravely called The Acid Longdesc Test page, where I keep an whole article inside that page hidden for sighted users. I recommend a visit to see what I mean.

HTML 4 note about longdesc

HTML 4 mandates that the longdesc URI must be available to the user in parallell to the <a href=> link, if e.g. an image has both kinds of links.

img with longdesc wrapped in <a href>

But if the longdesc is extended to work as ”normal” link when used inside info-elements and the img element, then this means that for such info-elements, it will not be possible to offer a separate long description to that image. And that would also be logical. At least, when used for cross-referencing, this article assumes that it will not be necessary to have long description of the very image, since, when used for cross-referencing, the cross-reference itself contains the long description of that eventual image.

However, it might still be possible to think of edge cases where the image is both crucial and wrapped inside a <a href=> link and where it would be useful to offer a separate longdesc URI to describe that image in more detail.

Single-click links and double-click links

I think, then, that it is important to keep in mind that part of the longdesc experience for AT users is that the longdesc by default is opened in a new window. This ensures that they can just close the window in order to go back to where they was reading.

At least for sighted users, those User Agents that suppport, or can be made to support longdesc via extensions and plug-ins, has kept a separate submenu which allows the users to select the long description. But it should also be possible to discern between the two functions by setting the rule that double-clicks opens cross-reference and long description links, while single-clicks opens normal links.

I believe that even sighted users would benefit from it, and soon adapt to it, if cross-referene links was opened in pop-up windows or in a way that ensured that would disturb the reading of the current text minimally.

Other elements as well? (Video, audio?)

It is entirely possible to include video and audio the same way as img. However, those new elements are defined without alt attributes. Thus they only work via the title attribute. (ISSUE: Must they not at least have a alt attribute, which could act as label?) Including these elements, they could be used more creatively, and also be auto-linked to sections in the page where they were explained. It is also entirely feasable to create illustrated dictionaries etc with living pictures and sound. If we got these elements included, then the very feature could be used to serve alternative, textual content.

The possible problem, though, is that such video and audio must be activated via a mouse click or similar. Thus, the interactivity that the cross-link should have created is – sort of – taken by the element itself. This is perhaps a hinderance.

Summaries

• img Should be includeded into the automatic cross-reference.feature.
• longdesc should be included into the cross-reference feature for backwards and AT compatibility and for the creation of manual cross-refernces to other pages.
• Alternative text advices/rules must be worked out.

img summary: The ways of including img

img should formally be included in the auto cross-reference feature of HTML 5 by:

• Either including alt in the textContent of the info-elements, but without including img itself in the feature.
• Or, by including img including alt into the feature without including title. (Proably the least useful option)
• Or by including img looking at title only but without looking at alt. (This is probably quite simple.)
• Or by including img and look at both title and alt

longdesc summary

longdesc should be included as part of the cross-reference feature and for support of assistive technology by:

• Generalising the longdesc attribute by allowing it on all info-elements and the img element.
• Make the longdesc attribute stand for cross-referene links when used inside info-elements and the img element.
• When used on img elements wrapped in <a href> elements, the longdesc can be reached via double-click
• It would be beneficial if cross-reference links was discerned from normal links by requiring double-clicking and by being opened in a way that let the user fast-read the definition, before going back to the main articl.

Alt summary: alt text when img is used in cross referencing

There would need to be included in the HTML 5 specification an example of how alt text for such images should be written. Such an example should be included regardless of whether img is formally included in the cross-reference feature or not, since the use case of including a image inside e.g a span for the purpose of making a cross-linkinking to a dfn somewhere, is a spesific usecase anyhow.