HTML and XHTML Techniques - Providing Text Alternatives for Complex Data Images

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

Technique ID: UNKNOWN
Short Name: Providing Text Alternatives for Complex Data 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 complex data images. Complex data images allow sighted users to understand data and data relationships. These visual representations can convey a vast amount of non-text content. 



Provide a short text equivalent that gives the user an overview of the content  or helps them to understand the thrust of a relationship. In addition, for many data images it may be necessary to provide more detailed information or supplemental content in another suitable way. Other ways of conveying equivalent information for complex data images are to use the image as a link, or to provide a separate text link to a more complete text description.



Examples:



* Charts

* Graphs

* Diagrams

* Histograms



Sample:

Flowchart that repeats the previous paragraph in graphical form.



Markup for Sample:

<p id="flowdescription">The network passes data to the Tokeniser stage,

which passes data to the Tree Construction stage. From there, data goes to both the DOM and to Script Execution. Script Execution is linked to the DOM, and, using document.write(), passes data to the Tokeniser.</p>



<p><img src="images/parsing-model-overview.png" alt="parsing model overview" aria-describedby="flowdescription"></p>

Example 1 Head: A graph depicting browser visits. 
Example 1 Description:
This graph depicting browser visits. It uses short alt text to summarize a trend with all the data in the image provided in a table.



<img src="graph.png" alt="Browser X leads visits to my site at 50 percent." aria-describedby="t1">

<table summary="Browsers and percent of visitors to my site." id="t1">

<!-- Remainder of table -->

Example 2 Head: A graph that repeats the previous paragraph in graphical form.
Example 2 Description:
<p id="piedescription">According to a study covering several billion pages, about 62% of documents on the Web in 2007 triggered the Quirks rendering mode of Web browsers, about 30% triggered the Almost Standards mode, and about 9% triggered the Standards mode.</p>



<p><img src="rendering-mode-pie-chart.png" alt="The majority of documents triggered quirksmode." aria-describedby="piedescription"></p>



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:
G73
G74
G92
G95
H37

Test Procedure:
1. remove, hide, or mask the image

2. replace it with the text alternative

3. check that the main purpose of the non-text content is clear (gives the user an overview of the content or helps them to understand the thrust of a relationship).

Expected Result:
#3 is true.



Additional Notes:
These techniques are part of the HTMLWG's Action 54: First Draft

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



If accepted by WCAG we hope to remove them 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 Complex Data 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 complex data images. Complex data images allow sighted users to understand data and data relationships. These visual representations can convey a vast amount of non-text content. 



Provide a short text equivalent that gives the user an overview of the content  or helps them to understand the thrust of a relationship. In addition, for many data images it may be necessary to provide more detailed information or supplemental content in another suitable way. Other ways of conveying equivalent information for complex data images are to use the image as a link, or to provide a separate text link to a more complete text description.



Examples:



* Charts

* Graphs

* Diagrams

* Histograms



Sample:

Flowchart that repeats the previous paragraph in graphical form.



Markup for Sample:

<p id=&quot;flowdescription&quot;>The network passes data to the Tokeniser stage,

which passes data to the Tree Construction stage. From there, data goes to both the DOM and to Script Execution. Script Execution is linked to the DOM, and, using document.write(), passes data to the Tokeniser.</p>



<p><img src=&quot;images/parsing-model-overview.png&quot; alt=&quot;parsing model overview&quot; aria-describedby=&quot;flowdescription&quot;></p>
</description>

<examples>
<ex_head_1>
A graph depicting browser visits. 
</ex_head_1>
<ex_desc_1>
This graph depicting browser visits. It uses short alt text to summarize a trend with all the data in the image provided in a table.



<img src=&quot;graph.png&quot; alt=&quot;Browser X leads visits to my site at 50 percent.&quot; aria-describedby=&quot;t1&quot;>

<table summary=&quot;Browsers and percent of visitors to my site.&quot; id=&quot;t1&quot;>

<!-- Remainder of table -->
</ex_desc_1>
<ex_head_2>
A graph that repeats the previous paragraph in graphical form.
</ex_head_2>
<ex_desc_2>
<p id=&quot;piedescription&quot;>According to a study covering several billion pages, about 62% of documents on the Web in 2007 triggered the Quirks rendering mode of Web browsers, about 30% triggered the Almost Standards mode, and about 9% triggered the Standards mode.</p>



<p><img src=&quot;rendering-mode-pie-chart.png&quot; alt=&quot;The majority of documents triggered quirksmode.&quot; aria-describedby=&quot;piedescription&quot;></p>


</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>
G73
</related_technique>
<related_technique>
G74
</related_technique>
<related_technique>
G92
</related_technique>
<related_technique>
G95
</related_technique>
<related_technique>
H37
</related_technique>
</related_techniques>

<tests>
<procedure>
1. remove, hide, or mask the image

2. replace it with the text alternative

3. check that the main purpose of the non-text content is clear (gives the user an overview of the content or helps them to understand the thrust of a relationship).
</procedure>
<expected_result>
#3 is 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:

These techniques are part of the HTMLWG&#039;s Action 54: First Draft

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



If accepted by WCAG we hope to remove them 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 16:40:51 UTC