老甘 - Forestgan - Posts tagged by "".

Posts tagged with "亲和力"

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

Monday, 29. May 2006, 02:21:19

"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的地方，正常使用样式表是看不到的．

最终效果

3 comments

一个遵照 WCAG 指导原则设计的表单

Thursday, 25. May 2006, 07:11:15

WCAG, form, 表单, 亲和力

表单是网页中一个不可缺少的部分，如何使表单更具有亲和力了？这是一个遵照 WCAG 指导原则设计的表单，许多地方都努力去做了。

fieldset标签
fieldset标签会在包含的文本和input等表单元素外面形成一个方框，legend元素作为标题。

Label标签
Label 用于表单元素 (input, textarea or select),配于 for 将值传递给相应的表单元素。

tabindex
用于 input, textarea......，给其一个编号，使用键盘上的TAB（制表键），就很容易地进入输入框中。

背景和前景色
背景: #FFFFF，前景:#333333，色彩差异: 612 > 500，亮度差异: 204 > 125 ,符合要求。

代码:

<form action="index.html">
<fieldset>
<legend>Contact Form</legend>
<div>
<label for="name">Name : </label>
<input name="name" type="text" id="name" value="Enter your name here *" maxlength="30" tabindex="1" />
</div>
<div>
<label for="email">E-mail : </label>
<input name="email" type="text" id="email" value="Enter your E-mail here *" maxlength="35" tabindex="2" />
</div>
<div>
<label for="title">Title : </label>
<input name="title" type="text" id="title" value="Enter title here *" maxlength="30" tabindex="3" />
</div>
<div>
<label for="introduce">Comments : </label>
<textarea name="introduce" cols="50" rows="8" id="introduce" tabindex="4">Enter comments here *</textarea>
</div>
</fieldset>
<div class="center">
<input name="cmdOk" type="submit" class="button" value="Send" tabindex="5" />
<input name="cmdReset" type="reset" class="button" value="Reset" tabindex="6" />
</div>
</form>

演示地址

2 comments

一个无障碍的、具有亲和力的图像地图

Wednesday, 17. May 2006, 05:49:34

无障碍, 亲和力, WCAG, AAA ...

图像地图是网上经常可以看到的，对于大部分用户来说，这些地图都是比较完美的，但对有各种障碍的网络用户，非常直观的地图是无用的。所以要有一种即直观、有视觉吸引力、还要以文本为基础的、无障碍的、具有亲和力的地图数据，方便任何人随时查阅。

结构

地图文字数据：

上海 2002年12月，国际展览局举行第132次成员国代表大会，对2010年世博会举办地进行投票表决，中国上海最终胜出。
北京 2008 奥运会将在此举行。比赛项目已经确定，共包括28个大项、302个小项。

用自定义列表来装数据

<dl>
<dt>2010 上海世博会</dt>
<dd>上海 2002年12月，国际展览局举行第132次成员国 代表大会，对2010年世博会举办地进行投票表决，中国上海最终胜出。</dd>
<dt>2008 北京奥运会</dt>
<dd>2008 奥运会将在此举行。比赛项目已经确定，共包括28个大项、302个小项。</dd>
</dl>

标题放在dt标签里，内容放在dd里

用CSS修饰

dl#world.map.on {
position:relative;
/*相对定位*/
width:360px;
height:270px;
background:url(map.gif) no-repeat;
 /*地图背景图*/
text-align:left;
margin:20px auto;
padding:0px;
}

dl.map.on dd {
position:absolute;
/*绝对定位*/
left:-9999px;
/*相对屏幕不可见*/
width:232px; /* for ie5.x */
w\idth:220px; /* other */
padding:5px;
border:#999 1px solid;
background:#FFF;
z-index:11;
font-size:12px;
color:#333;
}
dl.map.on dd img {
position:relative;
float:right;
margin:2px;
}
/* 设定地图上的点 */
dl.map.on a.location {
display:block;
position:absolute;
text-indent:-9999px;
background:url(point.gif) no-repeat;
width:10px;
height:10px;
z-index:10;
text-decoration:none;
}
/* 地图上的点翻转状态 */
dl.map.on a.location:hover {
background:url(point_hover.gif) no-repeat ;
}
dl.map.on dd a {
text-decoration:none;
color:#000;
}
/* 点的定位 */
dl.map.on a#location101 {
top:168px;
left:260px;
}
dl.map.on a#location102 {
top:100px;
left:235px;
}

数据的位置、显示和隐藏：采用JAVASCRIPT来控制

mapevents.js

感谢 Seth Duffey 的 A More Accessible Map

在 Firefox 1.5.0.3 、IE 6.0 SP2、Opera 8.5、 IE 5.01 测试通过。

最终效果

1 comment