增加网页可读性的技能get~
1.可以利用Microdata添加语义信息,使计算机更易理解,从而效率更高。这里有五个属性:
itemid,itemprop(属性名,取自http://data-vocabulary.org),itemref,itemscope(标识Microdata项),itemtype(表示项目类型,取自http://data-vocabulary.org/某类型).
2.在HTML5中使用WAI-ARIA,详见
http://w3.org/TR/wai-aria
http://html5accessibility.com
http://paciellogroup.com/blog
常用角色有:
role="article"
role="banner"
role="contentinfo"
role="conplementary"
role="form"
role="heading"
role="main"
role="navigation"
role="search"
利用这些role,我们可在文档顶部使用跳转链接(通常用css隐藏这些链接),能让如使用屏幕阅读器或其他辅助技术的用户快速找到重要区域,除此之外还能方便的使用css选择器来调整样式。即
1.可以利用Microdata添加语义信息,使计算机更易理解,从而效率更高。这里有五个属性:
itemid,itemprop(属性名,取自http://data-vocabulary.org),itemref,itemscope(标识Microdata项),itemtype(表示项目类型,取自http://data-vocabulary.org/某类型).
2.在HTML5中使用WAI-ARIA,详见
http://w3.org/TR/wai-aria
http://html5accessibility.com
http://paciellogroup.com/blog
常用角色有:
role="article"
role="banner"
role="contentinfo"
role="conplementary"
role="form"
role="heading"
role="main"
role="navigation"
role="search"
利用这些role,我们可在文档顶部使用跳转链接(通常用css隐藏这些链接),能让如使用屏幕阅读器或其他辅助技术的用户快速找到重要区域,除此之外还能方便的使用css选择器来调整样式。即
<span style="font-family:SimSun;font-size:18px;"><head>
<style>
header[role="banner"] {
background-color: #333;
}
</style>
</head>
<body>
<header role="banner">
<h1>xxxxxx</h1>
</header>
<article>
<header>
<h1>xxxxxx</h1>
<h3>xxxxx</h3>
</header>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</article>
</body></span>