就我个人体验来说，使用读屏软件可以访问美味网的所有页面和功能。但是还有很大的优化和改善空间。
主要问题：
- 右侧蓝的html代码写到了主要内容区域的前面
- 搜索区域的搜索按钮没有键盘焦点，搜索输入框没有文字提示
- 网页内图片没有文字描述
- 添加菜谱页面输入框没有有效的文字提示，添加选项的按钮没有键盘焦点
- h系列标签使用的有些混乱
- placeholder属性雨DOCTYPE 声明不匹配
- 没有使用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");