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

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

主要问题:

  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

LandmarkWAI-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");