A11y shrine: missing alts attributes

templates/shrine/data/featured.json

@@ -4,8 +4,10 @@
     "title": "Green comfort chair",
     "quote": "Leave the tunnel and the rain is fallin amazing things happen when you wait",
     "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/chair.png",
+    "imageAlt": "foobar",
     "storeName": "Ali’s shop",
     "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/ali-connors.png",
+    "storeAvatarAlt": "foobar",
     "price": "$300",
     "category": "Feature"
   },
@@ -14,8 +16,10 @@
     "title": "Beautiful little teapot",
     "quote": "Leave the tunnel and the rain is fallin amazing things happen when you wait",
     "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/beachball.png",
+    "imageAlt": "foobar",
     "storeName": "Trevor’s shop",
     "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/zach.jpg",
+    "storeAvatarAlt": "foobar",
     "price": "$300",
     "category": "Latest"
   },
@@ -24,8 +28,10 @@
     "title": "Original Sunnies For U",
     "quote": "Leave the tunnel and the rain is fallin amazing things happen when you wait",
     "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/chucks.png",
+    "imageAlt": "foobar",
     "storeName": "Sandra’s shop",
     "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/sandra-adams.jpg",
+    "storeAvatarAlt": "foobar",
     "price": "$300",
     "category": "Fashion"
   },
@@ -34,8 +40,10 @@
     "title": "Folding Chair",
     "quote": "Leave the tunnel and the rain is fallin amazing things happen when you wait",
     "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/lawn_chair.png",
+    "imageAlt": "foobar",
     "storeName": "Stella’s shop",
     "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/16c477b.jpg",
+    "storeAvatarAlt": "foobar",
     "price": "$300",
     "category": "Furniture"
   },
@@ -44,8 +52,10 @@
     "title": "Better wearing heels",
     "quote": "Leave the tunnel and the rain is fallin amazing things happen when you wait",
     "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/heels.png",
+    "imageAlt": "foobar",
     "storeName": "Peter’s shop",
     "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/peter-carlsson.png",
+    "storeAvatarAlt": "foobar",
     "price": "$300",
     "category": "Beauty"
   },
@@ -54,8 +64,10 @@
     "title": "Red Popsicle",
     "quote": "Leave the tunnel and the rain is fallin amazing things happen when you wait",
     "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/popsicle.png",
+    "imageAlt": "foobar",
     "storeName": "Trevor’s shop",
     "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/zach.jpg",
+    "storeAvatarAlt": "foobar",
     "price": "$300",
     "category": "Food"
   },
@@ -64,8 +76,10 @@
     "title": "Best gift for the traveler",
     "quote": "Leave the tunnel and the rain is fallin amazing things happen when you wait",
     "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/backpack.png",
+    "imageAlt": "foobar",
     "storeName": "Sandra’s shop",
     "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/sandra-adams.jpg",
+    "storeAvatarAlt": "foobar",
     "price": "$300",
     "category": "Travel"
   }

templates/shrine/data/items.json

@@ -3,9 +3,11 @@
   "title": "Vintage Bluetooth Radio",
   "description": "Isn’t it cool when things look old, but their not. Looks Old But Not makes awesome vintage goods that are super smart. This ol’ radio just got an upgrade. Connect to it with an app and jam out to some top forty.",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/radio.png",
+  "imageAlt": "foobar",
   "price": "$300",
   "storeName": "Sandra’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/sandra-adams.jpg",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Sandra specializes in furniture, beauty and travel products with a classic vibe. Custom orders are available if you’re looking for a certain color or material.",
   "featured": false
 },
@@ -15,9 +17,11 @@
   "title": "Sunglasses",
   "description": "Be an optimist. Carry Sunglasses with you at all times. All Tints and Shades products come with polarized lenses and super duper UV protection so you can look at the sun for however long you want. Sunglasses make you look cool, wear them.",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/sunnies.png",
+  "imageAlt": "foobar",
   "price": "$70",
   "storeName": "Trevor’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/zach.jpg",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Trevor Hanson sources housewares and styles from just about everywhere. Super cool and extra awesome all of his shop’s goods are handmade with love.",
   "featured": false
 },
@@ -27,9 +31,11 @@
   "title": "Clock",
   "description": "Timekeeper Co makes clocks that tell time precisely. Clock is very simple to use, set the time using your phone, hang it, and viola! You’ll never be late again.",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/clock.png",
+  "imageAlt": "foobar",
   "price": "$120",
   "storeName": "Trevor’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/zach.jpg",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Trevor Hanson sources housewares and styles from just about everywhere. Super cool and extra awesome all of his shop’s goods are handmade with love.",
   "featured": false
 },
@@ -39,9 +45,11 @@
   "title": "Red Popsicle",
   "description": "Looks can be deceiving. This Red Popsicle comes in a wide variety of flavors, including strawberry, that burst as soon as it hits the mouth. Red Popsicles melt slow, so savor the flavor.",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/popsicle.png",
+  "imageAlt": "foobar",
   "price": "$300",
   "storeName": "Stella’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/16c477b.jpg",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Stella sells awesome stuff at lovely prices. made by hand and sometimes by machine, but always with love and care. Custom orders are available upon request if you need something extra special.",
   "featured": false
 },
@@ -51,9 +59,11 @@
   "title": "Green Slip-ons",
   "description": "Feetsy has been making extraordinary slip-ons for decades. With each pair of shoes purchased Feetsy donates a pair to those in need. Buy yourself a pair, buy someone else a pair. Very Comfortable.",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/green-shoes.png",
+  "imageAlt": "foobar",
   "price": "$75",
   "storeName": "Sandra’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/sandra-adams.jpg",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Sandra specializes in furniture, beauty and travel products with a classic vibe. Custom orders are available if you’re looking for a certain color or material.",
   "featured": false
 },
@@ -63,9 +73,11 @@
   "title": "Teapot",
   "description": "Impress your guests with Teapot by Kitchen Stuff. Teapot holds extremely hot liquids and pours them from the spout. Use the handle, shown on the left, so your fingers don’t get burnt while pouring.",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/teapot.png",
+  "imageAlt": "foobar",
   "price": "$210",
   "storeName": "Ali’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/ali-connors.png",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Ali Connor’s makes custom goods for folks of all shapes and sizes made by hand and sometimes by machine, but always with love and care. Custom orders are available upon request if you need something extra special.",
   "featured": false
 },
@@ -75,9 +87,11 @@
   "title": "Blue suede shoes",
   "description": "Who needs pants when you have shoes! Blue suede shoes were meant to go dancing in, so you may want to pick up a few of these. These things are stylish.",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/chucks.png",
+  "imageAlt": "foobar",
   "price": "$89",
   "storeName": "Trevor’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/zach.jpg",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Trevor Hanson sources housewares and styles from just about everywhere. Super cool and extra awesome all of his shop’s goods are handmade with love.",
   "featured": true
 },
@@ -87,9 +101,11 @@
   "title": "Dipped Brush",
   "description": "WeDipIt does it again. This handle dipped 4 inch brush is a perfect for painting 4 inch lines, or coloring in big areas with paint. Just be sure you don’t drop it in a bucket of red paint, then it won’t look dipped anymore.",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/brush.png",
+  "imageAlt": "foobar",
   "price": "$25",
   "storeName": "Stella’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/16c477b.jpg",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Stella sells awesome stuff at lovely prices. made by hand and sometimes by machine, but always with love and care. Custom orders are available upon request if you need something extra special.",
   "featured": true
 },
@@ -99,9 +115,11 @@
   "title": "Perfect Goldfish Bowl",
   "description": "The Perfect Bowl Co makes the best bowls for just about anything you can think of. This Perfect Goldfish Bowl holds water and fish perfectly. Looks great in living rooms. Keep out of reach from cats.",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/fish_bowl.png",
+  "imageAlt": "foobar",
   "price": "$25",
   "storeName": "Ali’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/ali-connors.png",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Ali Connor’s makes custom goods for folks of all shapes and sizes made by hand and sometimes by machine, but always with love and care. Custom orders are available upon request if you need something extra special.",
   "featured": false
 },
@@ -111,9 +129,11 @@
   "title": "Red Lipstick Set",
   "description": "Trying to find the perfect shade to match your mood? Try no longer. Red Lipstick Set by StickLips has you covered for those nights when you need to get out, or even if you’re just headed to work.",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/lipstick.png",
+  "imageAlt": "foobar",
   "price": "$25",
   "storeName": "Sandra’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/sandra-adams.jpg",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Sandra specializes in furniture, beauty and travel products with a classic vibe. Custom orders are available if you’re looking for a certain color or material.",
   "featured": false
 },
@@ -123,9 +143,11 @@
   "title": "Backpack",
   "description": "This backpack by Bags ‘n’ stuff can hold just about anything: a laptop, a pen, a protractor, notebooks, small animals, plugs for your devices, sunglasses, gym clothes, shoes, gloves, two kittens, and even lunch!",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/backpack.png",
+  "imageAlt": "foobar",
   "price": "$25",
   "storeName": "Peter’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/peter-carlsson.png",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Peter makes great stuff for awesome people like you.  Super cool and extra awesome all of his shop’s goods are handmade with love. Custom orders are available upon request if you need something extra special.",
   "featured": false
 },
@@ -135,9 +157,11 @@
   "title": "Half Shield Helmet",
   "description": "Half Shield is the right helmet for those warm summer days on the road. Dot approved, these helmets have been rigorously tested. Keep that noggin protected.",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/helmet.png",
+  "imageAlt": "foobar",
   "price": "$25",
   "storeName": "Ali’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/ali-connors.png",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Ali Connor’s makes custom goods for folks of all shapes and sizes made by hand and sometimes by machine, but always with love and care. Custom orders are available upon request if you need something extra special.",
   "featured": false
 },
@@ -147,9 +171,11 @@
   "title": "Beachball",
   "description": "Are you at a baseball game and feeling bored? At a pool party and looking for a laugh? Do you need something to take your anger out on? Beachball, by inflatable fun, is the perfect outlet.",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/beachball.png",
+  "imageAlt": "foobar",
   "price": "$25",
   "storeName": "Peter’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/peter-carlsson.png",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Peter makes great stuff for awesome people like you.  Super cool and extra awesome all of his shop’s goods are handmade with love. Custom orders are available upon request if you need something extra special.",
   "featured": false
 },
@@ -159,9 +185,11 @@
   "title": "Old Binoculars",
   "description": "These Binoculars by See Through are amazing and can make things that are really far away seem like they’re right in front of you. Bring them to the beach. Now you can buy the cheap seats at the big game and feel like you’re right in the action.",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/binoculars.png",
+  "imageAlt": "foobar",
   "price": "$25",
   "storeName": "Stella’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/16c477b.jpg",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Stella sells awesome stuff at lovely prices. made by hand and sometimes by machine, but always with love and care. Custom orders are available upon request if you need something extra special.",
   "featured": false
 },
@@ -171,9 +199,11 @@
   "title": "Lime Flippers",
   "description": "Flippers are a nice tool to have when you’re being chased by an oversized sea turtle. Never get caught again with these fast water shoes. You’re like a fish, but more graceful.",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/flippers.png",
+  "imageAlt": "foobar",
   "price": "$25",
   "storeName": "Peter’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/peter-carlsson.png",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Peter makes great stuff for awesome people like you.  Super cool and extra awesome all of his shop’s goods are handmade with love. Custom orders are available upon request if you need something extra special.",
   "featured": true
 },
@@ -183,9 +213,11 @@
   "title": "Surfboard",
   "description": "Who says you can’t walk on water? With Surfboard, by Surfboard Supply, you can fly on water. This beast is fast and handles like a porsche. Hang Ten Bro!",
   "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/surfboard.png",
+  "imageAlt": "foobar",
   "price": "$25",
   "storeName": "Stella’s shop",
   "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/16c477b.jpg",
+  "storeAvatarAlt": "foobar",
   "storeDescription": "Stella sells awesome stuff at lovely prices. made by hand and sometimes by machine, but always with love and care. Custom orders are available upon request if you need something extra special.",
   "featured": true
 }

templates/shrine/src/shrine-app.html

@@ -221,7 +221,7 @@
       <app-drawer id="drawer" swipe-open>
         <template is="dom-if" if="[[smallScreen]]">
           <app-toolbar class="profileBar">
-            <img class="profilePic" src="//app-layout-assets.appspot.com/assets/shrine/profile_pic.jpg"  width="30" height="30">
+            <img class="profilePic" src="//app-layout-assets.appspot.com/assets/shrine/profile_pic.jpg"  width="30" height="30" alt="">
             <div class="profileName">Stella</div>
             <paper-icon-button icon="settings"></paper-icon-button>
           </app-toolbar>

templates/shrine/src/shrine-detail.html

@@ -288,6 +288,7 @@ <h3>[[item.storeName]]</h3>
     _itemChanged: function(item) {
       this.$.img.src = '';
       this.$.img.src = item.imageUrl;
+      this.$.img.alt = item.imageAlt;
     }
 
   });

templates/shrine/src/shrine-featured-item.html

@@ -174,7 +174,7 @@
       <div class="desc">
         <p>[[item.quote]]</p>
         <div class="author">
-          <img src="[[item.storeAvatarUrl]]">
+          <img src="[[item.storeAvatarUrl]]" alt$="[[item.storeAvatarAlt]]">
           [[item.storeName]]
         </div>
       </div>
@@ -201,6 +201,7 @@
       this.style.visibility = item && item.title ? 'visible' : 'hidden';
       this.$.img.src = '';
       this.$.img.src = item ? item.imageUrl : '';
+      this.$.img.alt = item ? item.imageAlt : '';
     }
 
   });

templates/shrine/src/shrine-item.html

@@ -104,12 +104,12 @@
 
     </style>
 
-    <div class="pic" style$="background-image: url([[item.imageUrl]]);"></div>
+    <img class="pic" src="[[item.imageUrl]]" alt$="[[item.imageAlt]]">
     <div class="link">[[item.title]]</div>
     <span class="price">[[item.price]]</span>
 
     <div class="author">
-      <img src="[[item.storeAvatarUrl]]">
+      <img src="[[item.storeAvatarUrl]]" alt$="[[item.storeAvatarAlt]]">
       [[item.storeName]]
     </div>
 

templates/shrine/src/shrine-simple-item.html

@@ -57,7 +57,7 @@
 
     </style>
 
-    <div class="pic" style$="background-image: url([[item.imageUrl]]);"></div>
+    <img class="pic" src="[[item.imageUrl]]" alt$="[[item.imageAlt]]">
 
   </template>