背景资料

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>

标签:landmark

1 条评论

  1. 直接微博给月光博客看看呗。。

你的评论