从新浪微博和微群的表情代码说起

昨天晚上我同学跟我说新浪微群改版之后，用读屏软件没办法发表情了。也曾有盲人朋友询问过如何在新浪微博发表情。今天索性仔细看了一下新浪微博和微群的表情，并使用不同读屏软件进行了比较测试。
测试的读屏软件有：nvda，争渡读屏公益版，永德读屏软件，阳光读屏软件，nvda是来自澳洲的开源免费读屏软件，争渡读屏公益版是国内一款免费的读屏软件，这两款软件如果您感兴趣可以下载来测试。
下面先贴出四段html源码

新浪微博表情源码：
`

`
新浪微群表情源码：
`

`

新浪微博表情显示源码：
` `

新浪微群表情显示源码：
` `

可以看出，微博里所谓的表情，就是用igm标签显示图片。
前两段代码分别是微博和微群发表情的源码，都是鼠标点击图片之后，将相应的代码加入到微博内容发表框，也就是用方括号括起来的表情代码，例如一个握手的表情，其代码就是
` [握手] `
。
鼠标点击图片之后相应的代码被填充到微博输入框，而且只有且必须是鼠标点击图片，这样就带来一个问题，如果不能用鼠标怎么办？盲人就属于不能用鼠标的用户之一。

让我们在来从html书写的角度看这四段代码。
第一段微博发表情的源码，img里没有alt属性，也没有title属性，但却在li标加了title。
第二段微群发表情源码，img有alt属性，但没有title属性。
第三段微博显示表情源码，img没有alt属性，只有title属性。
第四段微群表情显示源码，既有alt属性也有title属性。
第一段微博发表情源码在img标签外面套上了一个a，而且onclick等于false，href也似乎没什么用处。
第二段微群发表情源码只是li里写了img。

那么读屏软件会怎样渲染这几种不同的代码效果呢？
读屏软件对网页的操作，实际上就是键盘操作，也就是说，网页能用键盘操作到什么程度，读屏软件基本上就可以支持到什么程度。
网页元素有两种情况，一种是有tab键焦点的元素，例如a、input、textarea、button、以及使用了tabindex属性大于等于0的元素，其余的元素通常情况下键盘就很难访问到了。读屏软件一般会强制拦截上下左右方向键，把他们作为读屏软件的快捷键，用来逐一的访问网页内的元素。img就属于这种类型，也就是说img只能用方向键才能访问到。
那么网页中哪些信息会被读屏软件读出来呢？innerText、alt、title、value、accesskey等。
但是title和value并不是所有元素上的都会被读出来，甚至有的读屏软件根本不会获取这些属性。
经过对前面提到的四款读屏软件的测试比较，结果是：
img的alt都会被读出。
img的title都会被读出。
li的title只有永德读屏会读出来。
img同时有alt和title的时候，nvda和阳光读屏只读出一次（怀疑是做了重复判断处理），永德读屏和争渡读屏会两个属性分别读出来。

总结如下：
1 新浪微博
发表情代码img没有alt或者title，意味着读屏软件无法识别图片含义，基本上无法选择表情。在img之外套的a不知有何用处，如果是要解决img没有tab焦点的话，那现在问题是回车后没任何反映，并没有选中该表情。如果不是为了增加键盘焦点，那么增加这么一个元素是不是有点增加文档体积，浪费用户带宽呢？
虽然在li上加了title，但测试结果表明大多数读屏软件是不支持li的title的，这说明至少对读屏软件而言，这里的做法没有什么用处，当然鼠标停留在图片上会有显示。
至于表情显示的代码，只有title却没有alt，这里或许保留alt比保留title更有价值，alt是图片地址不存在时候显示的替代文本，因为网络或者浏览器原因而无法加载图片的时候，至少让用户知道这里是一张什么图片，没有alt，那么用户看到的只是一个叉叉。

2 新浪微群
代码总体非常规范，但是因为img没有tab焦点，这意味着用键盘的用户很难方便的选择表情，这里不只是使用读屏软件的盲人用户，而实际上读屏用户往往可以利用读屏软件本身提供的功能弥补这一缺陷。

最后的建议：
对新浪微博和微群发表情，在img外面套上a，并给他绑定onclick事件。或者不必使用a，只要给img增加tabindex="0"，并绑定onclick事件。
对新浪微博发表情源码，img一定加上alt，赶快加上吧。
外面还在下雨，已经写了两千六百多字，如果你有耐心看到这里，我表示非常感谢了。总结一句话，html还是尽可能的写的规范一些吧。