CSS Techniques - Using CSS to Style Electronic Text

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

Technique ID: UNKNOWN
Short Name: Using CSS to Style Electronic Text 
Technique Category: CSS Techniques
Guideline Reference: text-equiv
Success Criterion Reference: UNKNOWN

Applicability:
Applies to CSS and HTML

UA Issues:
None known

Description:
The objective of this technique is explain and demonstrate how to style electronic text instead of using an image of text.



Consider the necessity of using images of text at all and try to use electronic text when appropriate by style it with CSS. Electronic text is presentation neutral and can be rendered visually, auditorily, tactilely, or by any combination. 



Examples include pictures of:



* Words

* Phrases

Example 1 Head: Electronic text styled with CSS used instead of an image of text.
Example 1 Description:
HTML:



<span class="new">New!</span>



CSS:



.new{ color:#000; background-color:#FF9; padding:0em 0.1em; border:1px solid #000; font-size: 0.8em;}



Resource 1 Title: Web Design References: Cascading Syle Sheets
Resource 1 URI: http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html

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

Test Procedure:
1. use electronic text

2. use css to style it

3. check that the electronic text is perceivable without styling

Expected Result:
#3 is 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 example 2 header was submitted!
No example 2 description was submitted!
No related techniques were 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>Using CSS to Style Electronic Text </short-name>
<applies-to>
<guideline idref="text-equiv" />
<success-criterion idref="UNKNOWN" />
</applies-to>

<applicability>
Applies to CSS and HTML
</applicability>
<ua_issues>
None known
</ua_issues>
<description>
The objective of this technique is explain and demonstrate how to style electronic text instead of using an image of text.



Consider the necessity of using images of text at all and try to use electronic text when appropriate by style it with CSS. Electronic text is presentation neutral and can be rendered visually, auditorily, tactilely, or by any combination. 



Examples include pictures of:



* Words

* Phrases
</description>

<examples>
<ex_head_1>
Electronic text styled with CSS used instead of an image of text.
</ex_head_1>
<ex_desc_1>
HTML:



<span class=&quot;new&quot;>New!</span>



CSS:



.new{ color:#000; background-color:#FF9; padding:0em 0.1em; border:1px solid #000; font-size: 0.8em;}


</ex_desc_1>
<ex_head_2>

</ex_head_2>
<ex_desc_2>

</ex_desc_2>
</examples>

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

<related_techniques>
</related_techniques>

<tests>
<procedure>
1. use electronic text

2. use css to style it

3. check that the electronic text is perceivable without styling
</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:

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 16:47:31 UTC