Is this method screen-reader accessible ?
On Apr 14, 2009, at 6:03 PM, Mitch Malone wrote:
This is what I would recommend...
HTML:
<hX class="hideme"><a href="#" title="This is the link title">This
is the link text</a></h1>
CSS:
hX.hideme {
text-indent: -9999px;
background: url("linktofile.png");
height: XXpx; // This should match the a element
width: XXpx; // This should match the a element
}
hX.hideme a:link, hX.hideme a:visited, hX.hideme a:hover, hX.hideme
a:active, {
display: block;
height: XXpx; // This should match the hX element
width: XXpx; // This should match the hX element
}
Working examples of this are actually at my website: http://www.mitchmalone.name/
where the social media icons are. All icons are replaced using a
spriting technique which enables tooltips etc. but removes text.
Please ignore the rest of the site as it is a work in progress.
Hope this helps!
- M
On 15/04/2009, at 10:39 AM, Christopher Kennon wrote:
Hi All,
The text indent CSS property can render an h# element inaccessible
to screen readers. Other than using an img element and alt
attribute, what image replacement techniques are also accessible?
h#{
text-indent: -9999px;
}
Chris
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
