说说淘宝的评价表单与盲人

使用淘宝购物已经很久了,有很长的一段时间我都是不给卖家评价的,而是默认等待系统自动给出评价。
原因很简单,系统自动评价总是给好评,而我主动评价有可能操作失误而给出差评,所以为了避免不必要的误会,我索性把评价权交给了淘宝系统。
有人会问了,评价不是很简单的吗,鼠标点几下就ok了。实际上也的确很简单,但是对我而言,对一个使用读屏软件的盲人来说,事情就并非那么简单了。
评价的网页做的不是很友好,用读屏软件很难分辨出“好评”、“中评”、“差评”几个选项,如果使用ie8,那问题还更复杂一些,所以一不小心,很可能就选择错误,心里想给个好评,结果却选中了差评,造成不必要的误会。
今天下午因为在一个好友的淘宝店买了一张手机充值卡,既然是好友,想想还是尽快评价一下吧,于是便进入了评价页面,费了很大力气,总算成功的给了好评。
经过查看源代码,找到了问题所在,html代码书写的不规范,导致读屏软件无法正确的获取提示信息。先摘录一段源码:

<table class="rate-table" style="table-layout: fixed;">
                    <thead>
                        <tr>
                            <th class="title">宝贝</th>
                            <th class="result"></th>
                            <th class="ok"> 好评</th>
                            <th class="normal">中评</th>
                            <th class="bad">差评</th>
                            <th class="comment"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="6"> 
                                <div class="rate-detail" id="J_RateContainer">
                            
                            <table>
                                
                                    <tr class="J_RateItem comment-more">
                                        <td class="buyting">
                                        <div class="item">
                                        <div class="pic s60"><a
                                            href="http://trade.taobao.com/trade/detail/trade_snap.htm?trade_id=59435601311588"
                                            target="_blank">
                                            <img
                                                src="http://img02.taobaocdn.com/bao/uploaded/i2/T18QXOXeVzXXX9y_6b_095409.jpg_sum.jpg" />
                                         </a></div>
                                        <div class="desc"><a
                                            href="http://trade.taobao.com/trade/detail/trade_snap.htm?trade_id=59435601311588"
                                            target="_blank"> 水精灵/富培美水精灵/万能去污专家/ 水精灵洗衣粉/ 正品 </a></div>
                                        </div>
                                        </td>
                                        <td class="result"><span
                                            id="rateWord59435601311588"
                                            
                                                                        
                                                                        
                                                                        
                                                                        
                                                                            class="rate-default-type"
                                                                            
                                                                    ></span>
                                        </td>
                                        <td class="ok"><input rate:type="rate-ok" type="radio"
                                            id="rates59435601311588"
                                            name="rates59435601311588"
                                            value="1"
                                            
                                            onclick="showDetail(59435601311588,1);" />
                                        <label for="type_0_1"></label></td>
                                        <td class="normal"><input rate:type="rate-normal"
                                            type="radio"
                                            id="rates59435601311588"
                                            name="rates59435601311588"
                                            value="0"
                                            
                                            onclick="showDetail(59435601311588,0);" />
                                        <label for="type_0_2"></label></td>
                                        <td class="bad"><input rate:type="rate-bad" type="radio"
                                            id="rates59435601311588"
                                            name="rates59435601311588"
                                            value="-1"
                                            
                                            onclick="showDetail(59435601311588,-1);" />
                                        <label for="type_0_3"></label></td>
                                        <td class="comment">                                                <input type="checkbox" class="anonymity J_Anonymity" name="anony59435601311588" value="1"   id="anony59435601311588"/>
                                                        <input type="hidden" name="isforceannoy59435601311588" value="0"/>
    <label for="anony59435601311588">匿名评价</label>
                                            </span>
                                            <span class="share-box J_ShareRow">
    <input type="checkbox" class="J_Share" name="sharePrivacy59435601311588" id="sharePrivacy59435601311588" value="0" />
                                            <label for="share59435601311588"><strong>分享至淘江湖</strong><span class="share-money">(<em class="add-money">+20</em>淘金币)</span></label>
                                            </span>
                                            </div>
                                        <div>

代码有点多,我想要说明以下几点:
第一,label的用法,上面代码里多处地方用到了label,正确的使用,对读屏软件是非常友好的,读屏软件可以通过label的文本来提示相关联的表单元素的用途。同时,有了lable关联的元素,鼠标点击label的文本或者点击表单元素自身都可以生效,这对于用户的体验是一个很好的扩展。
第二,好、中差三个单选按钮后面跟随的label,我想应该是用来说明这三个radio的,但问题是for关联的id并非之前radio的id,而且label居然没有任何文字,这要他还有什么用处,岂不是占用资源了。
第三,从另外的复选框来看,label用的很好,这里我猜想可能是程序员疏忽才导致前面radio的label出错。

这样的网页,读屏操作的情况是这样的,当用键盘切换到好、中、差三个单选按钮的时候,读屏只能提示是单选按钮,至于哪一个是好评,哪一个是差评就无法告知了,用上下左右箭头切换的时候,ie6是单方向的,这样还可以通过经验判断,而ie8则是循环的,就根本没办法了。

所以,程序员一个小小的疏忽,带给盲人用户的是一个非常大的困扰,是一个容易造成很大误会的陷阱。

当然这里提到的评价也只是淘宝存在的影响盲人使用的问题之一。
面对这些障碍,真的希望开发者能够关注,在尽可能的情况下给予一些改善。

晚上我在几个QQ群里与一些盲人讨论了关于淘宝评价的问题,很多盲人朋友给出了自己的解决方法,而且很多也是很有效的,这里总结一下。
第一,适用于ie6,一般情况下单选按钮是按照好、中、差的顺序排列的,所以只要用左右方向键找到最左边的一个肯定就是好评了。
第二,根据评论输入框的提示文本来判断。比如选择了差评,读屏在评论输入框附近会听到类似“您给了差评,说一下理由吧”的提示。
第三,选择了中评和差评是必须要输入评论内容的。

从上面的方法来看,都是盲人朋友在使用过程中摸索出来的经验,也就是说只有掌握了这些经验才能正确评价。假如一个新手,是很难了解到这些经验的,那就难免出错了。
面对大家的经验,我有一种感觉,是很无奈。为什么必须要用这种方式呢?只要工程师稍微留心一下,就不会有这些问题了。所以最后还是呼吁网页设计师、软件开发者关注一下自己的产品是否有考虑到残障人的使用,是否支持鼠标和键盘双向操作。
我一致认为,鼠标和键盘都是被用来操作电脑的,鼠标并不能完全代替键盘,鼠标和键盘就好比一个人的两条腿,要想走好路,必须两条腿一起,而现在很多软件或者网页根本不支持键盘操作,我想就好比一个人断了一条腿,那岂不是成了残疾人,你的产品岂不是一个残疾?

关键词:盲人

转载原创文章请注明,转载自晴天博客,原文地址:http://www.qt06.com/post/269/

上一篇:台湾立法院通过《身心障碍者权益保障法》—民航身障者陪伴不得收费

下一篇:爱的最高境界

评论:

    1. 小马 February 15th, 2011

      评价标签的问题已解决,再次感谢您的反馈。

    2. 晴天 January 28th, 2011

      谢谢,期待早日解决。

    3. 小马 January 28th, 2011

      我是淘宝的员工。谢谢您的建议,我们会尽快修复!

    4. 无痕 January 14th, 2011

      顶一个,希望程序员编写代码的时候能更多的使用常规操作,视觉体验固然重要,,但总不能脱离基础的东西,关注信息无障碍,大家共同努力才更有效果!