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

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

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

先看下面代码片段:

                                                <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元素。