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

使用淘宝购物已经很久了,有很长的一段时间我都是不给卖家评价的,而是默认等待系统自动给出评价。 原因很简单,系统自动评价总是给好评,而我主动评价有可能操作失误而给出差评,所以为了避免不必要的误会,我索性把评价权交给了淘宝系统。

有人会问了,评价不是很简单的吗,鼠标点几下就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,一般情况下单选按钮是按照好、中、差的顺序排列的,所以只要用左右方向键找到最左边的一个肯定就是好评了。 第二,根据评论输入框的提示文本来判断。比如选择了差评,读屏在评论输入框附近会听到类似“您给了差评,说一下理由吧”的提示。 第三,选择了中评和差评是必须要输入评论内容的。

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

updatedupdated2016-04-072016-04-07