<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/vnd.wap.wml; charset=utf-8"/>
<meta http-equiv="Cache-Control" content="no-cache"/></head>
<card title="创建具有可访问性的 Slider - Gracecode.com">
<p><a href="http://www.filamentgroup.com/lab/developing_an_accessible_slider/" title="http://www.filamentgroup.com/lab/developing_an_accessible_slider/">英文原文在此</a>，对于 accessible 这个单词的理解，我个人认为是“可访问性”（原谅本人蹩脚的“国式英语”）。Slider 是 GUI 的基本控件之一，<a href="http://developer.yahoo.com/yui/slider/" title="http://developer.yahoo.com/yui/slider/">YUI 库中也有相应的组件</a>，而我将其称之为“拉<del>皮</del>动条”。</p>

<p>废话不多说，下面我主要总结下原文作者的思路（翻译太麻烦，见谅）。在一般的情况下（二般的下面说），Slider 的值是唯一的。原作者认为从语义上理解，是个 select 元素集合，本人很是同意他的观点。</p>

<p><img src="http://www.gracecode.com/upload/2008_05_24/1211639806.png" alt="http://www.gracecode.com/upload/2008_05_24/1211639806.png" title="http://www.gracecode.com/upload/2008_05_24/1211639806.png" /></p>

<p>但由于 CSS 对于 select 元素控制有限，原作者的方法是先使用 CSS 渲染某个 Javascript 动态生成的 div 容器（div 好控制得多，请再次原谅本人的 CSS 水准），然后使用 Javascript 将其动态的从视觉上替换这个 select，再将用户操作 div 的值传回给 select（<a href="http://www.filamentgroup.com/examples/slider/" title="http://www.filamentgroup.com/examples/slider/">范例</a>）。</p>

<p>之所以这样的做法本人认为是具有“可访问性”的，是因为在没有 CSS 以及 Javascript 支持的情况下（因为上述的 div 根本就不会出现），用户仍然可以得知这个玩意是干什么的。</p>

<p>“二般”的情况，可能需要拉动条需要多个值（比如存储范围等）。则可以根据上述的思路，将两个指针到 div 中（这对于上述已经写好的 样式而言，并不复杂），然后分别代表两个 select 的值（<a href="http://www.filamentgroup.com/examples/slider/index3.php" title="http://www.filamentgroup.com/examples/slider/index3.php">范例</a>）。</p>

<p>上述的原理和思路，本人认为并不复杂，但文章中作者的观点非常值得深究。尤其当用户使用“瘦的不能再瘦的浏览器”时，我们应当如何去处理。</p>

<p>自从传说中的 Web2.0 风起，很多“传统”的 “桌面 GUI 控件”都出现在 Web 中；同时很多现代的浏览器都提供了强大的“技术支持”（Javascript、CSS、Flash、etc...）。作为名 Web 开发人员，应当很清醒的意识到，离开上述“先进的技术”，我们的 HTML（结构）代码，是否还是值得阅读的？</p>

<p>在此做个反省，此前<a href="http://www.gracecode.com/Archive/Display/459" title="http://www.gracecode.com/Archive/Display/459">本人做的一个进度条</a>，目前看来毫无复用价值。</p>


<p>
<a href="http://www.gracecode.com/wap/">Gracecode.com</a> |
<a href="http://www.gracecode.com/wap/d/1679 ">Permalink</a>(<a href="http://www.gracecode.com/Archive/Display/1679 ">xHTML</a>) |
<a href="http://www.gracecode.com/Trackback/Recieve/1679/mdf8sx">Trackback</a> |
<a href="http://rss.gracecode.com">Rss</a>
</p>
</card>
</wml>