- From: WCAG 2.0 Techniques Submission Form <nobody@w3.org>
- Date: Mon, 22 Feb 2016 17:53:51 +0000
- To: public-wcag2-techs@w3.org
Submitter's Name: Sailesh Panchang Submitter's Email: sailesh.panchang@deque.com Technique ID: UNKNOWN Short Name: Using role=img and aria-label to render informational non-text content via CSS Technique Category: ARIA Techniques Success Criterion Reference: UNKNOWN Applicability: For informational images rendered as background via CSS when native image element cannot be used. This mainly applies to SC 1.1.1 Note: SC 2.4.4 may apply to links with CSS background images that convey information. SC 1.4.5 may apply to images of text used as background Description: The objective of this technique is to demonstrate how WAI-ARIA role=img and the aria-label property may be employed to render informational non-text content in the background via CSS when design or implementation challenges constrain the ability to use native elements like the HTML IMG element instead. An element that is styled with the background image is exposed much like a native HTML IMG element by screen reader software when the element is assigned a role="img" and equivalend text with the aria-label attribute. For user interface elements, the equivalent text may be provided via the title or aria-label attributes. This may be null in some situations. e.g. For a link, its purpose may be available from link's visible text or title or aria-label set on the anchor itself. However, when users alter viewing preferences by suppressing author supplied styles or by using platform / user agent features, it is possible that the background image is not rendered or fails to convey the intended information. (See Failure F3). This technique may be combined with other techniques, such as a scripting technique to address this concern. Content authors and developers are therefore advised to use background images to render information only when native elements cannot be used. Example 1 Head: Informational image in the background | Image of text in the background Example 1 Description: Main content section of: http://mars.dequecloud.com/demo/ImgRole.htm Example 2 Head: Links with logo images in the background Example 2 Description: Footer section of: http://mars.dequecloud.com/demo/ImgRole.htm Related Techniques: F Test Procedure: 1. Check if the background image conveys essential information that: - helps to better understand content on the page, or - is required to understand the purpose or state of a user interface element on the page 2. Check if the element that is styled with the background image has role="img" and a non-empty meaningful aria-label value. (see exception for user interface controls in step 3). 3. In case of a user interface control like a link, check if its purpose is available in text from the image's equivalent text or text associated directly with the link Expected Result: All tests 1, 2 and 3 are passed Test File 1: http://mars.dequecloud.com/demo/ImgRole.htm Test File 1 Pass/Fail: pass Additional Notes: Note: 1. The applicable SC 1.1.1 and related technique F3 were selected in the drop down but these are not displayed on the review page before technique submission. 2. The HTML and related CSS for each example is extensive and it may not be readily understandable if the code is placed in the box for each example. Besides there are 3 exampples in the link provided. No guidelines reference was submitted! No UA issues were submitted! No resource 1 title submitted! No resource 1 URI submitted! No resource 2 title submitted! No resource 2 URI submitted! No test file 2 was submitted! No test file 2 pass/fail was submitted! ------------------------------------------------ <technique id="UNKNOWN"> <short-name>Using role=img and aria-label to render informational non-text content via CSS</short-name> <applies-to> <guideline idref="" /> <success-criterion idref="UNKNOWN" /> </applies-to> <applicability> For informational images rendered as background via CSS when native image element cannot be used. This mainly applies to SC 1.1.1 Note: SC 2.4.4 may apply to links with CSS background images that convey information. SC 1.4.5 may apply to images of text used as background </applicability> <ua_issues> </ua_issues> <description> The objective of this technique is to demonstrate how WAI-ARIA role=img and the aria-label property may be employed to render informational non-text content in the background via CSS when design or implementation challenges constrain the ability to use native elements like the HTML IMG element instead. An element that is styled with the background image is exposed much like a native HTML IMG element by screen reader software when the element is assigned a role="img" and equivalend text with the aria-label attribute. For user interface elements, the equivalent text may be provided via the title or aria-label attributes. This may be null in some situations. e.g. For a link, its purpose may be available from link's visible text or title or aria-label set on the anchor itself. However, when users alter viewing preferences by suppressing author supplied styles or by using platform / user agent features, it is possible that the background image is not rendered or fails to convey the intended information. (See Failure F3). This technique may be combined with other techniques, such as a scripting technique to address this concern. Content authors and developers are therefore advised to use background images to render information only when native elements cannot be used. </description> <examples> <ex_head_1> Informational image in the background | Image of text in the background </ex_head_1> <ex_desc_1> Main content section of: http://mars.dequecloud.com/demo/ImgRole.htm </ex_desc_1> <ex_head_2> Links with logo images in the background </ex_head_2> <ex_desc_2> Footer section of: http://mars.dequecloud.com/demo/ImgRole.htm </ex_desc_2> </examples> <resources> <resources_title1> </resources_title1> <resource_uri1> </resource_uri1> <resources_title2> </resources_title2> <resource_uri2> </resource_uri2> </resources> <related_techniques> <related_technique> F </related_technique> </related_techniques> <tests> <procedure> 1. Check if the background image conveys essential information that: - helps to better understand content on the page, or - is required to understand the purpose or state of a user interface element on the page 2. Check if the element that is styled with the background image has role="img" and a non-empty meaningful aria-label value. (see exception for user interface controls in step 3). 3. In case of a user interface control like a link, check if its purpose is available in text from the image's equivalent text or text associated directly with the link </procedure> <expected_result> All tests 1, 2 and 3 are passed </expected_result> <test_file_1> http://mars.dequecloud.com/demo/ImgRole.htm </test_file_1> <pass_fail_1> pass </pass_fail_1> <test_file_2> </test_file_2> <pass_fail_2> </pass_fail_2> </tests> </technique> Additional Notes: Note: 1. The applicable SC 1.1.1 and related technique F3 were selected in the drop down but these are not displayed on the review page before technique submission. 2. The HTML and related CSS for each example is extensive and it may not be readily understandable if the code is placed in the box for each example. Besides there are 3 exampples in the link provided.
Received on Monday, 22 February 2016 17:53:53 UTC