W3C home > Mailing lists > Public > public-wcag2-techs@w3.org > June 2012

HTML and XHTML Techniques - providing descriptive link text in spacer gif alt tag

From: WCAG 2.0 Techniques Submission Form <nobody@w3.org>
Date: Wed, 13 Jun 2012 20:41:10 +0000
Message-Id: <E1SeuNK-0008J0-90@nelson.w3.org>
To: public-wcag2-techs@w3.org
Submitter's Name: Susan Verhoef
Submitter's Email: susan.verhoef@co.travis.tx.us

Technique ID: UNKNOWN
Short Name: providing descriptive link text in spacer gif alt tag
Technique Category: HTML and XHTML Techniques
Success Criterion Reference: UNKNOWN

Applicability:
Use with link text which is not sufficiently descriptive

UA Issues:
This technique will ALWAYS work

Description:
The object of this technique is to provide meaningful text when the text itself is not meaningful. There are times when a client insists upon a &quot;click here&quot; link, or a &quot;more...&quot; link. We use this technique to allow screenreaders to provide meaningful text to users.

Example 1 Head: Using image alt text with links
Example 1 Description:
&lt;a href=&quot;...&quot;&gt;&lt;img border=0 src=&quot;spacer.gif&quot; alt=&quot;Passport Application Information &quot; /&gt;More...&lt;/a&gt;

Screenreaders can ignore the title attribute. Different browsers deal with the css attributes &quot;visibility&quot; and &quot;display&quot; differently. This technique ensures that no matter what changes and modifications happen with css and html our links will always provide meaningful text.

This technique will NEVER FAIL.



Related Techniques:
G53

Test Procedure:
add the single pixel gif at the beginning of the link text.

We actually have a server-side vbscript function included in our script file to cut down on the drudgery.

&lt;%
dim altText
Function writealttext(altText)
            response.write(&quot;&lt;img src=&#039;/common/images/spacer.gif&#039; border=0 alt=&#039;&quot; &amp; altText &amp; &quot;&#039; /&gt;&quot;)
End Function
%&gt;

Now you simply write on the page:
&lt;a href=&quot;...&quot;&gt;&lt;%writealttext(&quot;Passport Application Information &quot;)%&gt;More...&lt;/a&gt;

Expected Result:
The screen reader will read the text.

Test File 1:
http://www.traviscountytx.gov/commissioners_court/agendas/2012/06/ssi/120612.asp

Test File 1 Pass/Fail: pass

Additional Notes:
I work for the government and we cannot override the dictates of elected officials. Some let us adapt their copy for the web, but many do not. Much as I like plain language and lean text, I do not have the power to impose these standards on my clients, so the meaningful text maybe nowhere near the link text.

This technique is impervious to ill-conceived stylesheet edits or deprecated css/html methods.

No guidelines reference was submitted!
No example 2 header was submitted!
No example 2 description was 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>providing descriptive link text in spacer gif alt tag</short-name>
<applies-to>
<guideline idref="" />
<success-criterion idref="UNKNOWN" />
</applies-to>

<applicability>
Use with link text which is not sufficiently descriptive
</applicability>
<ua_issues>
This technique will ALWAYS work
</ua_issues>
<description>
The object of this technique is to provide meaningful text when the text itself is not meaningful. There are times when a client insists upon a &quot;click here&quot; link, or a &quot;more...&quot; link. We use this technique to allow screenreaders to provide meaningful text to users.
</description>

<examples>
<ex_head_1>
Using image alt text with links
</ex_head_1>
<ex_desc_1>
<a href=&quot;...&quot;><img border=0 src=&quot;spacer.gif&quot; alt=&quot;Passport Application Information &quot; />More...</a>

Screenreaders can ignore the title attribute. Different browsers deal with the css attributes &quot;visibility&quot; and &quot;display&quot; differently. This technique ensures that no matter what changes and modifications happen with css and html our links will always provide meaningful text.

This technique will NEVER FAIL.


</ex_desc_1>
<ex_head_2>

</ex_head_2>
<ex_desc_2>

</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>
G53
</related_technique>
</related_techniques>

<tests>
<procedure>
add the single pixel gif at the beginning of the link text.

We actually have a server-side vbscript function included in our script file to cut down on the drudgery.

<%
dim altText
Function writealttext(altText)
            response.write(&quot;<img src=&#039;/common/images/spacer.gif&#039; border=0 alt=&#039;&quot; &amp; altText &amp; &quot;&#039; />&quot;)
End Function
%>

Now you simply write on the page:
<a href=&quot;...&quot;><%writealttext(&quot;Passport Application Information &quot;)%>More...</a>
</procedure>
<expected_result>
The screen reader will read the text.
</expected_result>
<test_file_1>
http://www.traviscountytx.gov/commissioners_court/agendas/2012/06/ssi/120612.asp
</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:

I work for the government and we cannot override the dictates of elected officials. Some let us adapt their copy for the web, but many do not. Much as I like plain language and lean text, I do not have the power to impose these standards on my clients, so the meaningful text maybe nowhere near the link text.

This technique is impervious to ill-conceived stylesheet edits or deprecated css/html methods.
Received on Wednesday, 13 June 2012 20:41:13 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 13 June 2012 20:41:13 GMT