背景资料
Landmark是WAI-ARIA规范里的一个功能,将这个属性添加到网页内相应的html元素上,就意味着给网页增加了路标功能,辅助工具(如读屏软件)就可以根据这些Landmark来找到相应的区域,从而提高网页的操作效率。
这一功能添加非常简单,而对盲人等依靠辅助工具操作网页的用户来说,会大大改善网页的操作体验,缩短他们寻找信息的时间,提高他们的操作效率。
添加方法很简单,只要在页面中相应的html代码中增加role属性,并将他们的值设置成Landmark对应的值即可。
Landmark只有八个值,分别是:
- banner:横幅区
- navigation:导航区
- search:搜索区
- main:主要内容区
- complementary:补充内容区(侧边栏)
- contentinfo:版权与隐私区
- form:表单区
- application:应用程序区
建议月光博客增加对landmark的支持
Landmark在国内网站中应用的还不是很多,但随着腾讯网等网站的推动,加之读屏软件的跟进,相信landmark将会很快成为网页无障碍中的重要环节。
基于月光博客在业界的影响力,希望月光博客能推动landmark在国内博客网站中的普及。
就我个人能力所限,给出月光博客添加landmark的建议:
直接修改模板文件:
<div id="BlogTitle">
添加banner(LOGO):
<div id="BlogTitle" role="banner">
注:该区域与导航栏的位置紧挨着,似乎可以省略。
<div id="divNavBar">
添加navigation(导航区):
<div id="divNavBar" role="navigation">
<div id="divMain">
添加main(主要内容区域:
<div id="divMain"role="main">
<div class="post" id="divCommentPost">
添加form(评论输入表单区域):
<div class="post" id="divCommentPost" role="form">
<div id="divSidebar">
添加complementary(侧边栏):
<div id="divSidebar" role="complementary">
<div class="function" id="divSearchPanel">
添加search(搜索区域):
<div class="function" id="divSearchPanel" role="search">
注:这里相同id出现了两次,应该是bug
<div id="divBottom">
添加contentinfo(版权与隐私区域):
<div id="divBottom" role="contentinfo">
js动态添加:
<script type="text/javascript">
addLM("BlogTitle","banner");
addLM("divNavBar","navigation");
addLM("divMain","main");
addLM("divCommentPost","form");
addLM("divSidebar","complementary");
addLM("divSearchPanel","search");
addLM("divBottom","contentinfo");
function addLM(elid,landmark) {
document.getElementById(elid).setAttribute("role",landmark);
}
</script>