快乐的大象

美味网存在的影响读屏软件操作的问题总结及其解决建议

 大杂烩  2095  5 分钟

就我个人体验来说，使用读屏软件可以访问美味网的所有页面和功能。但是还有很大的优化和改善空间。

主要问题：

  1. 右侧蓝的html代码写到了主要内容区域的前面
  2. 搜索区域的搜索按钮没有键盘焦点，搜索输入框没有文字提示
  3. 网页内图片没有文字描述
  4. 添加菜谱页面输入框没有有效的文字提示，添加选项的按钮没有键盘焦点
  5. h系列标签使用的有些混乱
  6. placeholder属性雨DOCTYPE 声明不匹配
  7. 没有使用landmark（路标）

解决建议：

1. 将右侧蓝的代码调整到主要内容区域之前。

测试页面：http://www.2meiwei.com/collect/detail/46013/ 将 <div class="main_right"> 这一个div的位置移动到 <div class="main_main 后面。这样实现网页主要内容优先显示的原则。使用读屏软件等辅助工具的用户可以更快的找到主要内容。

2. 搜索区域的搜索按钮没有键盘焦点

html代码： <span class="i-icon icon_search inlineblock" onclick = "this.parentNode.submit()">4</span>

建议可改成： <span role="button" aria-label="搜索" tabindex="0" class="i-icon icon_search inlineblock" onclick = "this.parentNode.submit()">4</span>

解释：

增加**role="button"**这一aria属性可将该span的辅助角色设置成按钮。

增加**aria-label="搜索"**这一aria属性可以给这个按钮增加读屏软件可获取的提示文本。

tabindex="0"可使得span具有键盘焦点，将tabindex的值设置成0可以让该元素加入到tab序列中并且不改变该元素在tab序列中的原有顺序。

3. 页面内的图片没有文字描述

实例网址http://www.2meiwei.com/recipe/detail/28630/

html代码片段：

网站logo <a href="/" title="美味"><img src="http://static.2meiwei.com/m1/images/logo.png" alt="" height="60"/></a>

用户头像 <img src="http://i3.2meiwei.com/attachment/user/avatar/2014/007/02/06/60_small.jpg" width="60" height="60">

菜谱制作步骤 <img class="shbox-l mh10" src="http://i3.2meiwei.com/attachment/recipe/201106/p240_201106291209346.jpg" width="240">

图片增加文字描述只要加入alt属性即可。

需要特别注意的是，alt属性必须给有意义的内容，万不可随意填写。

4. 添加菜谱页面的问题

文本输入框没有使用label标签进行关联

在表单元素中，使用label元素将输入框、复选框单选按钮等的提示关联起来，不仅有利于读屏软件等辅助工具更好的给用户提示信息，而且还可以增加这些表单元素的可操作范围，也就是鼠标直接点击被label包裹的提示文本也可以激活这些元素。 html代码片段：

    <h4 class="ctitle mv20">*菜谱名称</h4>
    <div class="bg_wrap  p10">
        <input id="recipetitle" type="text" class="inputarea" name="title" placeholder="请输入菜谱名称" value="">

可改为：

    <h4 class="ctitle mv20"><label for="recipetitle">*菜谱名称</label></h4>
    <div class="bg_wrap  p10">
        <input id="recipetitle" type="text" class="inputarea" name="title" placeholder="请输入菜谱名称" value="">

“添加一行”按钮没有键盘焦点

使用span来模拟按钮是非常习惯的做法，但是这会给键盘操作带来很多困扰，最主要的就是没有键盘焦点，那么使用读屏软件等辅助工具的用户将无法操作到这些按钮。

改进的方法可参看前面关于搜索区域的搜索按钮的处理方法。

同时这里的代码片段还可以看出，文本输入框没有使用label标签进行提示文本的关联。

html代码片段：

        <div class="mv10"><span class="f16 mh_r20">食材</span> <span class="hand pink" onclick="addshicaili('shicai')">添加一行</span></div>
        <ul id="shicai">
                            <li class="clearfix mv_b10">
                <input type="text" name="shicainame[]" placeholder="如:土豆" class="shicaiinput">
                <input type="text" name="shicaival[]" placeholder="如:500g" class="shicaiinput">
                <span class="delshicaili"></span>
            </li>
        </ul>

5. h系列标签有些混乱

通常情况下，h系列标签按页面内容的重要程度使用，序号从1到6。一般不要跨越使用。

观察发现，网站的logo使用了h2，而右侧蓝的小标题则使用了h6，这里直接从2到了6，中间隔了3 4 5。 文章内容页面里的文章标题使用了h1，而菜谱内容页面的菜谱标题却没有使用h1。

6. placeholder属性雨DOCTYPE声明不匹配

placeholder属性是html5新增的，但是查看网页源码发现，DOCTYPE声明却不是html5的。或许这里是疏忽。

7. 没有使用landmark

Landmark是WAI-ARIA规范里的一个功能，将这个属性添加到网页内相应的html元素上，就意味着给网页增加了路标功能，辅助工具（如读屏软件）就可以根据这些Landmark来找到相应的区域，从而提高网页的操作效率。

这一功能添加非常简单，而对盲人等依靠辅助工具操作网页的用户来说，会大大改善网页的操作体验，缩短他们寻找信息的时间，提高他们的操作效率。

添加方法很简单，只要在页面中相应的html代码中增加role属性，并将他们的值设置成Landmark对应的值即可。

Landmark只有八个值，分别是：

  • banner：横幅区
  • navigation：导航区
  • search：搜索区
  • main：主要内容区
  • complementary：补充内容区（侧边栏）
  • contentinfo：版权与隐私区
  • form：表单区
  • application：应用程序区

使用js动态添加：

$(".searchform").attr("role","search");
$(".main_main").attr("role","main");
$(".main_right").attr("role","complementary");
$("#footer").attr("role","contentinfo");

相关文章：