Tutorial - Images

The work on this deliverable has primarily moved to Github. If you can, leave your comments as issues there. This wiki page is still monitored.

The information on this page is outdated, see Tutorials/Feedback/Images for current information.

Nav: EOWG wiki main page > Tutorials main page

For discussion 27 Sept

The following are comments from the Images Tutorial review that we would like EOWG input on:

[open issue] Concepts page and navigation: change the order to – decorative; informative; functional; text; complex; groups; image-maps. Rationale: reflects frequency of encounter (and partly complexity of solution) {Andrew}
- Decorative vs informative: definitely feel these two should be top of the list, but which should go first? We seem to spend a lot of effort convincing people to use alt text, but in our discussions it seems that the expert view is that most images are just decorative. Case in point: my son is struggling with asking content authors whether their pictures are informative or just decorative - but finds that the authors react negatively to the idea of having unimportant images. He's trying to encourage them to make sure the information element is in the text since they have a requirement to translate everything into 3 languages. So, I would like to ask if we can make decorative images appear a more positive choice. I would also like to make the case for access-friendly content for people with low literacy, or with low attention span who need (decorative) images to help their understanding. {Suzette}
- comment {name}
[open issue] Overall: Is this tutorial meant to be strictly for HTML, or is it a technology-neutral tutorial for what the text equivalents should contain? There are html-isms, such as requiring alt="". Perhaps changes the title of the tutorial, or providing some explanation at the beginning that html will be used to discuss the different examples in a concrete way. {Loretta Guarino Reid (WCAG WG)}
- comment {name}

Images tutorial overall

NOTE: If you have comments that apply to all tutorials — e.g., on the navigation design — please put them in the main Tutorials wiki page.

[no action]This is a remarkable section, from overview to coding details. It all follows, and develops a good introductory course on accessibility. It is not exhaustive and it is not a dictionary of techniques, but one can read an individual topic. The overview page gives a clear description of what one can expect if one is looking to read the entire topic. {Wayne}
Reply: Thanks Wayne, that's very encouraging. {Bim, Aug 13}

Images needed

There are four placeholders for images in the Informative images page of the Images Tutorial. The images are described inline surrounded by "@@@" symbols, and the descriptions are also below.

Example 1: Two images, one of a telephone, the other of a fax machine. Size suggested 30px square. Used to distinguish between two phone numbers.
- http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/32/printer_and_fax.pngn CC by Subrat Kumar Nayak
- lots of options that are CC by or even public domain, e.g., from https://www.iconfinder.com/search/?q=phone QUESTION: want old handset? old full phone? mobile/cell phone?
Example 3: A graphical representation of a bottle cap and an arrow showing that it should be turned anti-clockwise. No need to include fingers or hand, the information being conveyed is the direction. Size, maximum 100px square, can be smaller as long as it's clear.
Example 4: A photo of a smiling family group, ideally parents with one or two children, alternatively, a line drawing (such as smilies) representing a family group). Something that might be used to represent a hotel or resort as "family friendly". Size could be any, but ideally not over 200px wide so that it doesn't overwhelm the page.
- a couple non-anglo options with CC: crop to 4 people, kids not smiling though

Comment{Name}

Image concepts page

[no action]LOVE this page! Comprehensive overview that I'm going to point people to, as the question comes up frequently with stakeholders of all stripes in my organization. Especially like the benefits section, it's nice to see use cases other than screen readers. With the exception of a couple very minor nit-picky things, I think it's ready to publish. { Paul 7/18 }
[no action]Also really like this new look. It's all in one bundle: clear, concise at the top of the page with pointers to more detailed info, improved navigation, pleasant design. Very nice - bravo! { Vicki 19/7 }
[EOWG to discuss] Minor edit under "Why is this important?" I think, in the first sentence, "illustration" should be plural {Vicki 19/7}
Reply: I think it could be either, such as in a statement "Images are used for illustration". Can we raise this in a meeting when we get to the word-smith stage? {Bim, July 19}
[EOWG to discuss]I agree with previous comments, that this page is clear. I only have a reading difficulty of following sentence in the bullet about image maps. I had to read it several times to understand the content.
"Image maps: Used to provide multiple selectable regions within an image - text alternative for the image should provide a context while the text alternatives for the selectable <area> elements need to describe the purpose or destination of the links;"
{Sylvie, 19 June}

Reply: Thanks Sylvie, is the current description (below) any better?

Image maps: Where one image is used to contain multiple clickable areas - the text alternative for the image as a whole should provide an overall context for the links, while text alternatives for the clickable areas need to describe link purpose or destination
{Bim, Aug 13}

Functional images page

[done]The very first sentence, although proper, reads awkwardly to me. { Paul, 7/18 }
[done - sentence simplified]Suggestion for less awkward first sentence: "Functional images are images which perform an action, e.g. a button, an icon to open a Word document, a shopping cart. { Vicki, 19/7 }
[done]Second sentence needs a comma after "initiated". { Paul, 7/18 }
[done]Suggested minor edit to second sentence: "In this case, the text alternative for the image ...." (replacing "an image" by "the image") { Vicki, 7/19 }
[done]Suggested minor edit to second sentence: "that will be initiated, rather than a description of the image." (replacing "to describe the image itself". Simpler style.) { Vicki, 7/19 }
[done]Printer icon image missing from Example 2 (I know, it's just a placeholder) { Paul, 7/18 }
[EOWG to discuss]Does it make sense to hide the code snippets with "show more" links? They're in the right places and they're not complicated, but they do break the text flow and might be distracting for readers who are not coders. { Paul, 7/18 }
<span color="808080"[EOWG to discuss]Like as is { Vicki, 7/19 }

Images of text page

[EOWG to discuss]Suggestion for first sentence: Images of text are images which display readable text.{Vicki 19/7}
[done]Missing comma after "In this case," {Vicki 19/7}
[done]Example 1, second sentence should probably be split into two sentences. Maybe also mention what is meant by NOT describing the decorative effects used in the Citylights example image (i.e. - thin greenish script). { Paul, 7/18 }
[done]Suggestion for second sentence under Example 2: Instead of "It has the text alternative...", use "The text alternative is "Contact us". Simple style. {Vicki 19/7}
[done]Structure question: the note about best practice is structured with an h2. Would it be better to tag it with a P? Otherwise, no comments on this page. {Sylvie, June 19}

Informative images page

[done]Great example of when to use null alt attribute. This page is ready to publish, in my opinion. { Paul, 7/18 }
[done]Missing capital on "i" at second sentence. {Vicki 19/7}
[done]Missing comma in second sentence after "In this case" {Vicki 19/7}
[done - example changed]Example 1: I understand the example. But for sighted readers who wouldn't know the breed, how do they get that info :) {Vicki 19/7}
Reply: Thanks for pointing this out Vicki, I hope the new examples don't fall into the same trap. :) {Bim, Aug 13}
[done]Example 2: Minor edit: after "Note:" capital "T" on "this" {Vicki 19/7}
[done]Unsure/uncomfortable about the explanation given in "Note" - it makes me think twice. Can it be simpler? E.g. "This technique is the most accessible. The image in this case can be considered as decorative. All the required information (in this case, the breed of the dog)is available within the text. Therefore, the user does not need to rely on the image to fully understand the text." Still a bit clumsy.
Reply: This example has been removed and a cross link to decorative images put in place. Hope the explanation makes sense{Bim, Aug 13}
Suggestion Example 3: Note: I would provide an example to illustrate this case since I immediately looked at Example 2 for how PDF is written as part of the text since the Note states "As shown in example 2".{Vicki 19/7}
[done]Minor edit: after "Note:" capital "T" on "this" {Vicki 19/7}
[done]I don't understand the note under example 3. Make it clearer. {Sylvie, June 19}

Complex images page

[done]Very often a graph, diagram or image convey an objective of the exposition. This objective and how the figure illustrates this objective should be stated explicitly. Example: The Gauss Flux Theorem justifies the visualization of lines of force for electromagnetic fields. This visual concept must be explained in words, even though a sighted person can perceive it at a glance. {Wayne}
Reply: Thanks Wayne, I hope the current version makes this valid point very much clearer. {Bim Aug 13}
[done]Thank you for including the parenthetical note about MathML! Need to close the parens. { Paul, 7/18 }
Reply: Thanks for spotting it, now fixed, though the example is moved to Images of text. { Bim, Aug 13 }
[done]Example 3, suggest changing the dummy URL to something like longdesc="2012-profits-chart-long-description.html" to make it clear that the longdesc alt attribute can point to any URL, and does not literally have to be longdesc.html { Paul, 7/18 }
Reply: Ah, I didn't think of that ... I've changed the filename now ... it is a real file. { Bim, July 19 }
[done] :) Missing comma after "In this case" {Vicki 19/7}
[done] :) Missing "s" at last word of last sentence in first paragraph "descriptions" {Vicki 19/7}
[done] :) Not 100% sure but should there be an "s" added to "The types of image" on "image"? {Vicki 19/7}
Reply: I don't think so, perhaps it could be either, the text has now changed though, so I've avoided the phrase to remove the problem.{ Bim, Aug 13}
[done]Example 1: I would remove the comma in the first sentence after "the text alternative,".
[done]Space between theResults and after below"identifies {Vicki 19/7}
[done]Example 3: missing comma "In this example" add comma{Vicki 19/7}

Image maps page

[done] ;) Missing comma, second sentence: In this case, comma {Vicki 19/7}
[done - (text changed)]Example 1: Minor edit. Remove the comma after "link" in second sentence. Add closing brackeet. {Vicki 19/7}

Groups of images page

Decorative images page

[no action]Looks good, ready to publish in my opinion. { Paul, 7/18 }
[done]Except for the missing comma in the second sentence :), after "In these cases", excellent, also ready to publish in my opinion. { Vicki, 7/19 }