HTML and XHTML Techniques - Providing Text Alternatives for Functional Images

Submitter's Name: Laura Carlson
Submitter's Email: laura.lee.carlson@gmail.com

Technique ID: UNKNOWN
Short Name: Providing Text Alternatives for Functional Images
Technique Category: HTML and XHTML Techniques
Guideline Reference: text-equiv
Success Criterion Reference: UNKNOWN

Applicability:
Applies to HTML

UA Issues:
None known

Description:
The objective of this technique is explain and demonstrate how to markup functional images. Functional images are images that allow the user to 'do' things. They provide functionality. Activating or selecting a functional image causes something to happen, such as activating a link that causes a resource to be retrieved.



To provide the same functionality to the user, emphasize the action performed by the image or the link purpose. For instance, if a search button is a magnifying glass or binoculars, appropriate alt text could be "search" or "find"; not "magnifying glass", "binoculars" or "button". For navigation images, use the destination of the link as alt text. "Previous page" or "Next page" would be appropriate alt text for navigation images; not "picture of an arrow". By default, on receiving focus, a screen reader will announce to the user that it is link. So for navigation images, it is unnecessary to say "Link to previous page". "Previous page" will suffice. If a redundant text link of a navigation image is provided, the value of the alt attribute of the image can be null (alt="").



Examples

* Navigation Links

* Buttons 

Example 1 Head: Navigation link
Example 1 Description:
<a href="page1.html"><img src="leftarrow.png" alt="Previous page"></a>

Example 2 Head: Navigation link with text content.
Example 2 Description:
<a href="page1.html"><img src="leftarrow.png" alt="">Previous page</a>

Resource 1 Title: Web Design References: Accessibility
Resource 1 URI: http://www.d.umn.edu/itss/support/Training/Online/webdesign/accessibility.html#alt

Related Techniques:
H36
H37

Test Procedure:
1. remove, hide, or mask the non-text content

2. replace it with the text alternative

3. Check that nothing is lost (the purpose of the non-text content is met by the text alternative)

4. If the non-text content contains words that are important to understanding the content, the words are included in the text alternative.

Expected Result:
Check #3 is true. If the non-text content contains words that are important to understanding the content, check #4 is also true.

Additional Notes:
This technique is part of the HTMLWG's Action 54: First Draft

http://esw.w3.org/topic/HTML/Action54AltAttribute



If it is accepted by WCAG we hope to remove it from our document as stated in the second draft

http://esw.w3.org/topic/HTML/Action54AltAttributeSecondDraft#head-f0bf2ebf9f3e1fa190974101c6b70700ff176772



The Action 54 first draft provides much non-normative guidance in the application of the ALT attribute, which may not be appropriate for inclusion in a markup language specification, and which moreover could be seen as usurping the role of WCAG 2.0 and its techniques documents. A format specification is not a tutorial. It would be very helpful if the Techniques for WCAG 2.0. could incorporate this information or a variation of it. Then the HTML5 spec could link to it. As PF has said, "WCAG WG is chartered to set Accessibility guidelines and HTML WG is not".

http://lists.w3.org/Archives/Public/public-html/2008Feb/0082.html



Thank you,



The HTMLWG Action 54 Team:

Steven Faulkner

Joshue O Connor

Laura Carlson



Peer reviewers:

Gez Lemon

Gregory Rosmaita

No resource 2 title submitted!
No resource 2 URI submitted!
No test file 1 was submitted!
No test file 1 pass/fail was submitted!
No test file 2 was submitted!
No test file 2 pass/fail was submitted!


------------------------------------------------

<technique id="UNKNOWN">
<short-name>Providing Text Alternatives for Functional Images</short-name>
<applies-to>
<guideline idref="text-equiv" />
<success-criterion idref="UNKNOWN" />
</applies-to>

<applicability>
Applies to HTML
</applicability>
<ua_issues>
None known
</ua_issues>
<description>
The objective of this technique is explain and demonstrate how to markup functional images. Functional images are images that allow the user to &#039;do&#039; things. They provide functionality. Activating or selecting a functional image causes something to happen, such as activating a link that causes a resource to be retrieved.



To provide the same functionality to the user, emphasize the action performed by the image or the link purpose. For instance, if a search button is a magnifying glass or binoculars, appropriate alt text could be &quot;search&quot; or &quot;find&quot;; not &quot;magnifying glass&quot;, &quot;binoculars&quot; or &quot;button&quot;. For navigation images, use the destination of the link as alt text. &quot;Previous page&quot; or &quot;Next page&quot; would be appropriate alt text for navigation images; not &quot;picture of an arrow&quot;. By default, on receiving focus, a screen reader will announce to the user that it is link. So for navigation images, it is unnecessary to say &quot;Link to previous page&quot;. &quot;Previous page&quot; will suffice. If a redundant text link of a navigation image is provided, the value of the alt attribute of the image can be null (alt=&quot;&quot;).



Examples

* Navigation Links

* Buttons 
</description>

<examples>
<ex_head_1>
Navigation link
</ex_head_1>
<ex_desc_1>
<a href=&quot;page1.html&quot;><img src=&quot;leftarrow.png&quot; alt=&quot;Previous page&quot;></a>
</ex_desc_1>
<ex_head_2>
Navigation link with text content.
</ex_head_2>
<ex_desc_2>
<a href=&quot;page1.html&quot;><img src=&quot;leftarrow.png&quot; alt=&quot;&quot;>Previous page</a>
</ex_desc_2>
</examples>

<resources>
<resources_title1>
Web Design References: Accessibility
</resources_title1>
<resource_uri1>
http://www.d.umn.edu/itss/support/Training/Online/webdesign/accessibility.html#alt
</resource_uri1>
<resources_title2>

</resources_title2>
<resource_uri2>

</resource_uri2>
</resources>

<related_techniques>
<related_technique>
H36
</related_technique>
<related_technique>
H37
</related_technique>
</related_techniques>

<tests>
<procedure>
1. remove, hide, or mask the non-text content

2. replace it with the text alternative

3. Check that nothing is lost (the purpose of the non-text content is met by the text alternative)

4. If the non-text content contains words that are important to understanding the content, the words are included in the text alternative.
</procedure>
<expected_result>
Check #3 is true. If the non-text content contains words that are important to understanding the content, check #4 is also true.
</expected_result>
<test_file_1>

</test_file_1>
<pass_fail_1>

</pass_fail_1>
<test_file_2>

</test_file_2>
<pass_fail_2>

</pass_fail_2>
</tests>

</technique>

Additional Notes:

This technique is part of the HTMLWG&#039;s Action 54: First Draft

http://esw.w3.org/topic/HTML/Action54AltAttribute



If it is accepted by WCAG we hope to remove it from our document as stated in the second draft

http://esw.w3.org/topic/HTML/Action54AltAttributeSecondDraft#head-f0bf2ebf9f3e1fa190974101c6b70700ff176772



The Action 54 first draft provides much non-normative guidance in the application of the ALT attribute, which may not be appropriate for inclusion in a markup language specification, and which moreover could be seen as usurping the role of WCAG 2.0 and its techniques documents. A format specification is not a tutorial. It would be very helpful if the Techniques for WCAG 2.0. could incorporate this information or a variation of it. Then the HTML5 spec could link to it. As PF has said, &quot;WCAG WG is chartered to set Accessibility guidelines and HTML WG is not&quot;.

http://lists.w3.org/Archives/Public/public-html/2008Feb/0082.html



Thank you,



The HTMLWG Action 54 Team:

Steven Faulkner

Joshue O Connor

Laura Carlson



Peer reviewers:

Gez Lemon

Gregory Rosmaita

Received on Wednesday, 4 June 2008 17:06:48 UTC