Skip navigation.

Forestgan

CSS layout in China

Posts tagged with "WCAD"

让More和更多链接具有亲和力和无障碍化

, ,

"More"和“更多”是网页中经常用到的,意思是指点击这里以获得更多的信息,你可在Title标签里加上更多的信息的简单描述,对于大多数的用户是没有问题的,但对于使用屏幕阅读器的用户来说,一大堆的MORE,是一头雾水吧,如何解决?

解决方法

对于支持CSS的大多浏览器,CSS可用来隐藏对"More"和“更多”的简单描述,而老的不支持CSS的浏览器和屏幕阅读器又可方便阅读到全部的内容。

xhtml

<a href="http://www.forest53.com/tutorials" 
title="关于具有亲和力和无障碍化的文章">More
<span>关于具有亲和力和无障碍化的文章</span></a>


CSS

span{
    position: absolute;
    left: -999em;
    width: 10em;

}



这样将span标签中的内容移到离屏幕左边999em的地方,正常使用样式表是看不到的.

最终效果
December 2009
S M T W T F S
November 2009January 2010
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31