Added alt-tags for all images from images.snip and fullpage-hero.snip (…

…ampproject#498)

* Added alt-tags for all images from images.snip and fullpage-hero.snip

* Removed aria-hidden, added better alt descriptions

components/images/fullpage-hero.snip.html

@@ -19,8 +19,8 @@
 {{#fullpage-hero}}
   <!-- Start Fullpage Hero -->
   <figure class="ampstart-image-fullpage-hero m0 relative mb4">
-    <amp-img width="404" height="720" layout="responsive" src="{{{narrow-img}}}" media="(max-width: 415px)"></amp-img>
-    <amp-img height="720" layout="fixed-height" src="{{{wide-img}}}" media="(min-width: 416px)"></amp-img>
+    <amp-img width="404" height="720" alt="{{alt}}" layout="responsive" src="{{{narrow-img}}}" media="(max-width: 415px)"></amp-img>
+    <amp-img height="720" alt="{{alt}}" layout="fixed-height" src="{{{wide-img}}}" media="(min-width: 416px)"></amp-img>
     <figcaption class="absolute top-0 right-0 bottom-0 left-0">
       <header class="p3">
         <h1 class="ampstart-fullpage-hero-heading mb3">

components/images/images.snip.html

@@ -19,7 +19,7 @@
 {{#image-with-heading}}
   <!-- Start Image with heading -->
   <figure class="ampstart-image-with-heading  m0 relative mb4">
-    <amp-img src="{{{url}}}" width="{{width}}" height="{{height}}" layout="responsive"></amp-img>
+    <amp-img src="{{{url}}}" width="{{width}}" height="{{height}}" alt="{{alt}}" layout="responsive"></amp-img>
     <figcaption class="absolute right-0 bottom-0 left-0">
       <header class="ampstart-image-heading px2 py2 line-height-4">{{{heading-html}}}</header>
     </figcaption>
@@ -30,7 +30,7 @@
 {{#image-with-caption}}
   <!-- Start Image with Caption -->
   <figure class="ampstart-image-with-caption m0 relative mb4">
-    <amp-img src="{{{url}}}" width="{{width}}" height="{{height}}" layout="responsive" class=""></amp-img>
+    <amp-img src="{{{url}}}" width="{{width}}" height="{{height}}" alt="{{#alt}}{{.}}{{/alt}}{{^alt}}{{caption}}{{/alt}}" layout="responsive" class=""></amp-img>
     <figcaption class="h5 mt1 px3">
       {{caption}}
       {{#credit}}

data.json

@@ -50,6 +50,7 @@
               "width": "1280",
               "height": "853",
               "url": "../../img/components/nasa-45074.jpg",
+              "alt:": "Image 1",
               "heading-html": "<h3 class=\"h1\">Image 1</h3>"
             }
           },
@@ -59,13 +60,15 @@
               "height": "853",
               "url": "../../img/components/nasa-45068.jpg",
               "caption": "Bright red flower. ",
+              "alt:": "Image 2",
               "heading-html": "<h3 class=\"h1\">Image 2</h3>"
             }
           },
           {
             "image-with-heading": {
               "width": "1280",
               "height": "853",
+              "alt:": "Image 3",
               "url": "../../img/components/nasa-45076.jpg",
               "heading-html": "<h3 class=\"h1\">Image 3</h3>"
             }
@@ -208,6 +211,7 @@
       },
       "fullpage-hero": {
         "heading-html": "Life on a space shuttle",
+        "alt": "Life on a space shuttle",
         "narrow-img": "../../img/components/nasa-53885.jpg",
         "wide-img": "../../img/components/nasa-53885.jpg",
         "credit": {
@@ -238,7 +242,8 @@
         "width": "1280",
         "height": "853",
         "url": "../../img/components/nasa-43564.jpg",
-        "heading-html": "<h1>Views from Space</h1>"
+        "heading-html": "<h1>Views from Space</h1>",
+        "alt": "Views from Space"
       }
     },
     "img-caption": {

templates/article/article.amp.json

@@ -66,6 +66,7 @@
     },
     "fullpage-hero": {
       "heading-html": "The Year's Best Animal Photos",
+      "alt": "The Year's Best Animal Photos",
       "narrow-img": "../../img/article/elephants_narrow.png",
       "wide-img": "../../img/article/elephants_wide.jpg",
       "credit": {

templates/themes_1/template_1_article.amp.json

@@ -72,6 +72,7 @@
     },
     "fullpage-hero": {
       "heading-html": "Est epicuri indoctum ad, oblique conceptam ut vel consequuntur",
+      "alt": "Est epicuri indoctum ad, oblique conceptam ut vel consequuntur",
       "narrow-img": "../../img/themes_1/night.jpg",
       "wide-img": "../../img/themes_1/night.jpg",
       "credit": {

templates/themes_2/home.amp.json

@@ -39,6 +39,7 @@
     },
     "fullpage-hero": {
       "heading-html": "<span class=\"h6 block caps\">Welcome to</span><span class=\"h1 block bold caps my1\">Beck & Galo</span><span class=\"h6 block caps\">Modern American Cuisine</span>",
+      "alt": "Welcome to Beck & Galo Modern American Cuisine",
       "narrow-img": "../../img/themes_2/hero.jpg",
       "wide-img": "../../img/themes_2/hero.jpg",
       "cta": {
@@ -70,7 +71,8 @@
               "width": "600",
               "height": "450",
               "url": "../../img/themes_2/bar.jpg",
-              "heading-html": "<h2 class=\"h1 bold\">Happy Hour</h2><p class=\"h4\">Mon-Fri 5PM</p>"
+              "heading-html": "<h2 class=\"h1 bold\">Happy Hour</h2><p class=\"h4\">Mon-Fri 5PM</p>",
+              "alt": "Happy Hour Monday through Friday 5 PM"
             }
           }
         },

templates/thescenic/thescenic.amp.json

@@ -56,6 +56,7 @@
     },
     "fullpage-hero": {
       "heading-html": "Most Beautiful Hikes in Alaska",
+      "alt": "Most Beautiful Hikes in Alaska",
       "narrow-img": "../../img/thescenic/cropped_hero.jpg",
       "wide-img": "../../img/thescenic/hero.jpg",
       "readmore": {
@@ -80,23 +81,26 @@
             "width": "1280",
             "height": "853",
             "url": "../../img/thescenic/carousel2.jpg",
-            "heading-html": "<h2>Somewhere in Alaska</h2>"
+            "heading-html": "<h2>Somewhere in Alaska</h2>",
+            "alt": "Snowy terrain and mountains"
           }
         },
         {
           "image-with-heading": {
             "width": "1280",
             "height": "853",
             "url": "../../img/thescenic/carousel1.jpg",
-            "heading-html": "<h2>Somewhere in Alaska</h2>"
+            "heading-html": "<h2>Somewhere in Alaska</h2>",
+            "alt": "Canoe drifting inside a sea tunnel"
           }
         },
         {
           "image-with-heading": {
             "width": "1280",
             "height": "853",
             "url": "../../img/thescenic/carousel3.jpg",
-            "heading-html": "<h2>Somewhere in Alaska</h2>"
+            "heading-html": "<h2>Somewhere in Alaska</h2>",
+            "alt": "Highway road with mountains in background."
           }
         }
       ]