Examples for Provide text alternatives for images

[iadawn]

Tip: Provide text alternatives for images

[AndrewArch]

I like the idea of reusing the Tutorials examples - as this is for 'writing', I'd suggest an informative example and maybe a complex example

[iadawn]

From @bakkenb

Yes, include a few examples for this tip. The examples should demonstrate different reasons why the alternative text is so important. The obvious persona here is a blind user, is there another persona that can be used for a second example?

[vmmiller]

Yes :)

[sharronrush]

Another persona could be images turned off for bandwidth (like me in the mountains this week).

Could also use an example where the same image may have different alt text depending on its purpose. Like the box of chocolates with full description when it is a product for sale vs alt text that uses the same image but is a promo talking about all the choices they offer for banking accounts or telecomm plans.

[shawna-slh]

I think any examples here should be really short and simple -- just a couple to introduce the idea. (I love Sharron's idea for training, tutorials, etc., but I think it's too much for this resource.)

I like the idea of using one(s) from the Images Tutorial because it slightly reduces overall cognitive load if people read this page and then the Tutorial.

In Easy Checks, we said: "The text should be functional and provide an equivalent user experience, not necessarily describe the image. (For example, appropriate text alternative for a search button would be "search", not "magnifying glass".)"

[iadawn]

From James Green in WBS:

Alt text: I think background images are worthy of a mention here, the question comes up a lot. While they are not supposed to convey information, they often are used that way (e.g., sprites).

[iadawn]

Agreed to include example.

James: Implementation details for background images may be beyond the scope of the Writing tips but may be appropriate for Developing tips.

[shawna-slh]

I saw "'Golden labrador with a bell attached to its collar.'" (sidenote: spelling error) and disagreed that the type of dog should be in the alt and thought "Oh, darn, I missed that in the Tutorial, shame on me!" ... but now I see that in the Tutorial, the alt text is "Dog with a bell attached to its collar."

[shawna-slh]

Also, I think "Inaccessible alternative text" and "Accessible alternative text" are too strong for this -- the first one isn't totally inaccessible, it's just not as good. Maybe something along the lines like "Insufficient alternative text" or "Poor alt..." and then "More appropriate alt..." or "More relevant alt..."? (I thought of "descriptive" but don't think we want that 'cause they shouldn't be more descriptive than is needed for the context.)

[shawna-slh]

I do not like the example today ( "Alternative text for image: 'Keeper dives left as the ball sails into the top right corner.'").
I [strongly] think we should have an image that unquestionably needs alt text. (whereas the soccer goal is debatable)
I had suggested some a while back, although can't find them now. Something along the lines of http://www.w3.org/WAI/intro/iui-scroll.png or https://www.w3.org/WAI/intro/cycle.png

The idea I have mentioned on the teleconferences is to have one image in multiple contexts with different alts. I'm not necessarily suggesting that, but since I've mentioned it and it seems to get lost, I'll explain it more here now. (and thus giving away my training example ;)
Image: photo of person in colorful uniform kicking soccer ball.
Context: Community Recreation website. alt text: null (it's just decorative)
Context: Hickson Family website. alt text: Bubba kicking the winning goal!
Context: Sports Uniforms website. alt text: Top with gold stars on white background. Shorts with royal blue and white horizontal stripes.
(I have example web pages, but for these Tips pages, one could just provide the context in text, not take up space and complexity on more of an example.)

[shawna-slh]

plugging in charger image is AWESOME example !!!
suggestion for alt text:
'Phone on charge' -> "Charging phone"
'Charger fits into the bottom edge of the phone.' -> "Plug cable into bottom of phone below start button" or "Cable plugs into bottom of phone below start button"
or some such

p.s. shouldn't you have double quotes instead of single quotes?

[iadawn]

'Phone on charge' -> "Charging phone"

Done. Are you aiming for the inherent absurd ambiguity in this as well?

'Charger fits into the bottom edge of the phone.' -> "Plug cable into bottom of phone below start button"

Using: 'Plug cable into the bottom edge of the phone'

'Start button' introduces an element of terminology that I don't know that we need. Also, since I will need to change the image, I don't know that there will be any such button! We can revisit if necessary.

p.s. shouldn't you have double quotes instead of single quotes?

There isn't any real requirement for single quotes. In some respects, removing them is a legitimate approach as well. What is your preference and why? :)

[iadawn]

Either is acceptable in HTML5

On 20 Aug 2015, at 14:23, shawn_slh notifications@github.com wrote:

alt="@@" is the format, yes? so that's my preference.

—
Reply to this email directly or view it on GitHub #133 (comment).

[vmmiller]

+1 for phone plus charger example