建议月光博客增加对landmark的支持

背景资料

LandmarkWAI-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>
updatedupdated2013-12-082013-12-08