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

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 "click here" link, or a "more..." 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:
<a href="..."><img border=0 src="spacer.gif" alt="Passport Application Information " />More...</a>

Screenreaders can ignore the title attribute. Different browsers deal with the css attributes "visibility" and "display" 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.

<%
dim altText
Function writealttext(altText)
            response.write("<img src='/common/images/spacer.gif' border=0 alt='" & altText & "' />")
End Function
%>

Now you simply write on the page:
<a href="..."><%writealttext("Passport Application Information ")%>More...</a>

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 UTC