快乐的大象 

新浪微博私信列表页键盘操作能力改进建议

 大杂烩  1304  3 分钟

新浪微博私信列表页改版后，失去了键盘操作能力，导致的结果是离开鼠标则几乎无法正常使用微博的私信功能。最明显的影响人群是盲人（必须且只能依靠键盘操作电脑）。

在微博上反馈之后，很快收到微博私信产品的回应，并希望了解盲人的使用情况，希望能尽快解决这一问题。我就我所知，总结一下。

先看下面代码片段：

                                                <div class="WB_msg_type S_bg1 msg_hover_on">
    <div class="msg_list_node S_line2 clearfix" node-type="messageUnit" uid="1980923321" black="0" block="0">
        <div class="id_avatar">
            <img width="50" height="50" src="http://tp2.sinaimg.cn/1980923321/50/5613461891/0">            </div>
        <div class="msg_main">
            <div class="W_f14 W_fb msg_title">
            达人<a href="http://verified.weibo.com/verify" target="_blank"><i title="新浪机构认证" class="W_ico16 approve_co"></i></a> ：
            </div>
            <div class="W_f14 msg_detail S_txt2">
                你好，今天是你的达人好友:@shaoxiaobo.. 的生日哦，他们正在期待你的祝福呢，快去问候一声吧!http://t.cn/zYygmJ1 
            </div>
        </div>
        <div class="msg_ctrls">
            <span class="S_txt2">5月8日 03:32</span>
            <a class="W_ico12 icon_choose" href="javascript:void(0);" action-data="uid=1980923321&amp;userName=达人" action-type="messageDropDown"></a>
        </div>
    </div>
  </div>
                                                <div class="WB_msg_type">
    <div class="msg_list_node S_line2 clearfix" node-type="messageUnit" uid="2215498921" black="0" block="0">
        <div class="id_avatar">
            <img width="50" height="50" src="http://tp2.sinaimg.cn/2215498921/50/5621400372/0"><span class="msg_notice_num"><i class="W_countm">1</i></span>            </div>
        <div class="msg_main">
            <div class="W_f14 W_fb msg_title">
            用心创世界-盲人新职业<a title="#随手拍#求点评" href="http://pai.weibo.com/2215498921" target="_blank"><em class="W_ico16 ico_pai"></em></a> ：
            </div>
            <div class="W_f14 msg_detail S_txt2">
                不是1499吗 
            </div>
        </div>
        <div class="msg_ctrls">
            <span class="S_txt2">5月7日 20:19</span>
            <a class="W_ico12 icon_choose" href="javascript:void(0);" action-data="uid=2215498921&amp;userName=用心创世界-盲人新职业" action-type="messageDropDown"></a>
        </div>
    </div>
  </div>
                                                <div class="WB_msg_type">
    <div class="msg_list_node S_line2 clearfix" node-type="messageUnit" uid="1288323133" black="0" block="0">
        <div class="id_avatar">
            <img width="50" height="50" src="http://tp2.sinaimg.cn/1288323133/50/5613708930/1"><span class="msg_notice_num"><i class="W_countm">2</i></span>            </div>
        <div class="msg_main">
            <div class="W_f14 W_fb msg_title">
            快乐的星星宝宝<a href="http://club.weibo.com/intro" target="_blank"><i title="微博达人" class="W_ico16 ico_club" node-type="daren"></i></a> ：
            </div>
            <div class="W_f14 msg_detail S_txt2">
                我现在正在申请新浪认证，希望能得到你的鼎力支持,烦请在24小时之内帮我进行辅助证明吧!地址：http://t.cn/zTWZ88E（该链接在2013年05月07日 18:35:27前有效） 
            </div>
        </div>
        <div class="msg_ctrls">
            <span class="S_txt2">5月6日 18:35</span>
            <a class="W_ico12 icon_choose" href="javascript:void(0);" action-data="uid=1288323133&amp;userName=快乐的星星宝宝" action-type="messageDropDown"></a>
        </div>
    </div>
  </div>

问题分析

要想查看跟某个人的私信对话，需要鼠标点击该人的私信区域（头像、昵称或者私信内容），而这些区域都没有键盘焦点（用tab键是切换不到的）。 这样意味着盲人（必须且只能用键盘操作）就没办法打开私信对话页面了。

解决办法

给class为msg_main的div加入tabindex和role属性。

tabindex="0" （将私信区域加入tab序列，同时具备焦点且不改变元素的tab序列顺序）

role="link" （通过使用WAI-ARIA里的建议，将该div渲染成链接）。也就是： <div class="msg_main" tabindex="0" role="link">

需要注意的一个问题

在上面代码片段中，第一个发信人的名字后面有个官方认证的图标，第二个昵称后面有个随手拍求点评的图标，注意这两个图标都用了a标签，都是链接，并且用了target="_blank"，我想是希望突出他们，并希望点击后开新窗口。 但实际上，大家可以测试下，鼠标点击这两个图标，结果并不是代码预期的结果。

这里面的链接实际上是无效的，并没有起到作用，想起来了我是IE10，并未测试其他浏览器。 如果是我索性直接去掉昵称后面的这图标的a元素。

相关文章：