快乐的大象

新浪微博新版需要加强html细节的优化

 大杂烩  1494  3 分钟

这段文字其实是一个多月前在之乎回答过的一个问题，一个多月过去了，新浪微博大概已经完全升级到新版了，而文中提到的一些细节问题，却不见一点改善。前几天在新浪微博上有关新浪微博是否有必要提供盲人用的专用版本的问题，也引起一些小的波澜。

用户体验重在细节，包括代码层面。

前几天吧新浪微博升级到新版之后，一直感觉非常不爽，所以最近几天几乎没有发微博的心情了。 湖玛Humar在之乎创建了个话题讨论新版新浪微博可以做哪些无障碍优化，于是今晚花了一些时间仔细查看了新浪微博新版。 其实新版没有之前印象中那么差，我现在想来之前之所以会留下新版很差的印象，原因在于新版出现了很多细节上的不注意，这主要是对html代码写的不够规范，导致读屏软件读出来很多诡异的内容。 我当时本来怀着对新版的一份期望进行了升级，结果升级后的第一印象就是听到那些毫无意义的提示，心情自然很不爽。 从我的这次微博升级，我想对于产品细节的把握，会在不经意间影响到用户的使用体验，或许就是代码中少写了一个单词，就可能流失一个用户呢。 下面给出几个具体的代码例子，其实问题并不多，只要加以注意，做做调整，很快会便的好起来的。

顶部搜索表单

 			<div class="gn_search"><!--gn_clicked-->
				<input tabindex="4" title="" node-type="searchInput" type="text" class="gn_input"  maxlength="40" />
				<a class="gn_btn" tabindex="4" title="" href="javascript:void(0);" node-type="searchSubmit" target="_top"></a>
				<div class="gn_topmenulist gn_topmenulist_search" node-type="searchSuggest" style="display:none">
					<div node-type="basic"></div>
					<div node-type="plus"></div>
				</div>
			</div>

问题分析

  1. 从input标签猜测这应该是个表单，但没有通常的表单属性，也没有普通的提交按钮。
  2. 如果这可以当作表单，那么input元素没有给出label来关联该编辑框的用途。
  3. 从这段代码很难知道这里具体是做什么用途，从css和input的有关属性猜测可能用于搜索，但具体搜索范围和内容无从知晓。
  4. 如果a元素被用来作为提交按钮，显然没有任何文字提示他是提交搜索按钮。

顶部个人信息区域部分代码

				<div class="gn_setting " node-type="msg"><!--gn_onmouse-->
				<i>
					<a href="#" class="gn_tab gn_notice" node-type="msgIcon"><em class="W_new" target="_top"></em><span class="ico"></span></a><!--gn_notice_new-->
				</i>
					<!--下拉层-->				
					<div class="gn_topmenulist gn_topmenulist_notice" node-type="msgLayer" style="display:none;"></div>
				</div>
				<div class="gn_setting" node-type="account"><!--gn_onmouse-->
				<i>
					<a href="#" class="gn_tab gn_set"><span class="ico" target="_top"></span></a>
					</i>
					<!--下拉层-->				
					<div class="gn_topmenulist gn_topmenulist_set" node-type="accountLayer" style="display:none;"></div>
				</div>
				<div class="gn_setting" node-type="member"><i><a href="http://vip.weibo.com/personal?topnav=1&wvr=5" class="gn_tab gn_member"><span class="ico"></span></a></i>
					<!--下拉层-->				
					<div class="gn_topmenulist gn_topmenulist_set" node-type="memberLayer" style="display:none;" >
					</div>
					<!--下拉层-->
				</div>

问题与总结

  1. 代码中三个a元素既没有innerText也没有title。
  2. 这是新浪微博存在的最普遍的问题之一。链接没有文字提示是最痛苦的事情，我完全不知道我点击了这个链接后会带我到什么地方去。

其他细节

  1. logo，个人感觉logo应该是个有价值的图片，使用img元素会更好一些。如果实在不用img，那么至少在现有的状态下，给a加上title。
  2. 页面顶部的首页，应用，微吧，游戏和搜索区没有必要使用tabindex属性。他们在页面顶部，本身tab顺序已经在最前面了，加tabindex没有意义，何况现在居然用的是tabindex=4，想不明白为什么用序号4。
  3. 左侧蓝的分组和应用，都有个“展开”链接，用来显示更多分组或者应用。如果单纯按tab键，听到“展开”链接或者“折叠”链接，是很难知道这个链接的具体用途的。建议给这样的链接加上title用来描述其具体用途，比如 <a title="展开更多分组" href="#">展开</a>
  4. 建议在页面主要区域增加跳转快捷键，用来在左右侧栏和中间微博内容区域之间切换。
  5. 建议可以对左右侧栏分别进行完全折叠和展开。

结语

读屏软件对网页的朗读实际上是建立在对html的解析上，读屏软件是按照html的相关规范来处理的，所以html书写的是否规范，是直接影响到读屏朗读效果的，也直接影响到使用读屏软件访问网页的用户的体验的。 新浪微博是很不注意html的细节处理的，尤其在对容易影响读屏朗读效果的表单，链接等方面就格外突出。 个人建议很简单，吧html写规范。

推荐参考下面链接： 参考地址

相关文章：