快乐的大象

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

 大杂烩  768  2 分钟

背景资料

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>

相关文章：