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 '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 </description> <examples> <ex_head_1> Navigation link </ex_head_1> <ex_desc_1> <a href="page1.html"><img src="leftarrow.png" alt="Previous page"></a> </ex_desc_1> <ex_head_2> Navigation link with text content. </ex_head_2> <ex_desc_2> <a href="page1.html"><img src="leftarrow.png" alt="">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'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 RosmaitaReceived on Wednesday, 4 June 2008 17:06:48 GMT
This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 4 June 2008 17:06:48 GMT