我正在尝试使用Google的Amp制作网站的新移动版本。他们在官方网站上列出了其用法示例。我复制并粘贴从代码这里，并在这里创造：
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s
1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-
ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-
start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-
start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-
start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-
start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-
start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-
start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style
amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-
animation:none;animation:none}</style></noscript>
</head>
<body>
<h1>Welcome to the mobile web</h1>
<!-- <button class="hamburger" on='tap:sidebar1.toggle'></button> -->
<amp-sidebar id='sidebar1' layout='nodisplay'>
<ul>
<li> Nav item 1</li>
<li> Nav item 2</li>
<li> Nav item 3</li>
<li> Nav item 4</li>
<li> Nav item 5</li>
<li> Nav item 6</li>
<li> Nav item 7</li>
<li> Nav item 8</li>
<li> Nav item 9</li>
<li on="tap:sidebar1.close"> Close</li>
</ul>
</amp-sidebar>
</body>
</html>
在控制台中，我收到验证错误“标签'li'中的属性'role'丢失或不正确，但属性'on'必需。” 和“标签'li'中的属性'tabindex'丢失或不正确，但是属性'on'必需。”
这直接取自示例，未经修改。我注释掉还是删除切换按钮都没关系。我还有一个更详细的示例，也有验证错误。错误行指向最后一个在点击时关闭边栏的li元素。
有任何想法吗？
AMP 强制您应用最低限度的网络可访问性。AMP 强制您在不可点击的元素上添加aria role和tabindex使用属性。on
什么是 ARIA？
Web Accessibility Initiative 的可访问富互联网应用程序规范（WAI-ARIA，或简称 ARIA）非常适合弥补无法使用本机 HTML 管理的可访问性问题。它的工作原理是允许您指定修改元素转换为可访问性树的方式的属性。
大多数时候你必须添加tabindex="0"and role="button"（尤其是使用时on="tap:action"）：
<div on="tap:AMP.setState({ visible: false})" tabindex="0" role="button">...
| 归档时间： |
|
| 查看次数： |
1229 次 |
| 最近记录： |