Menu
I am attempting to make a new mobile version of my website using Google's Amp. On the official website they list examples of its use. I've copied and pasted the code from here and here to create:
<!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>
In the console I get the validation error "The attribute 'role' in tag 'li' is missing or incorrect, but required by attribute 'on'." and "The attribute 'tabindex' in tag 'li' is missing or incorrect, but required by attribute 'on'."
This is taken straight from the example, unmodified. It doesn't matter if i comment out or remove the toggle button. I have a more elaborate example as well that also has validation errors. The line of the error points to the last li element that closes the sidebar on tap.
Any ideas?
668
If you put on attributes on elements that aren't normally clickable (like a or button elements) you need to put an aria role like role=button on that element for accessibility reasons.
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
