Question

我正在尝试使用Google的Amp制作我的网站的新移动版本。在官方网站上，他们列出了其使用示例。我已复制并粘贴here和here的代码来创建：

<!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>

在控制台中，我收到验证错误＆＃34;属性＆＃39;角色＆＃39;在标签＆＃39; li＆＃39;缺失或不正确，但属性要求＆＃39; on＆＃39;。＆＃34;和＆＃34;属性＆＃39; tabindex＆＃39;在标签＆＃39; li＆＃39;缺失或不正确，但属性＆＃39; on＆＃39;。＆＃34;

需要

这是直接从示例中获得的，未经修改。如果我注释掉或删除切换按钮并不重要。我有一个更详细的例子，也有验证错误。错误行指向最后一个关闭侧边栏的li元素。

有什么想法吗？

Answer 1

如果您将on属性放在通常无法点击的元素上（例如a或button元素），则需要role=button Video.seek() }出于可访问性原因，在该元素上。

Answer 2

AMP会强制您应用最少的Web辅助功能。在不可点击的元素上使用aria role属性时，AMP会强制您添加tabindex和on。

什么是ARIA？

Web可访问性倡议的可访问富互联网应用程序规范（WAI-ARIA或仅ARIA）适用于桥接无法解决的可访问性问题的区域本机HTML。通过允许您指定可以修改元素转换为可访问性树的方式。

More detail about ARIA.

大多数时候您必须添加tabindex="0"和role="button"（尤其是使用on="tap:action"时）：

<div on="tap:AMP.setState({ visible: false})" tabindex="0" role="button">...

从示例中直接粘贴时获得放大器验证错误

2 个答案: