real world example

Author: tinayuangao

src/demo-app/a11y/grid-list/grid-list-a11y.html

@@ -32,7 +32,7 @@ <h2>Grid list with header and footer</h2>
   <md-grid-list cols="3" rowHeight="200px">
     <md-grid-tile *ngFor="let dog of dogs">
       <md-grid-tile-header>{{dog.name}}</md-grid-tile-header>
-      <img [alt]="dog.name" src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
+      <img alt="Photo of {{dog.name}}" src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
       <md-grid-tile-footer>
         <span md-line>Human: {{dog.human}}</span>
         <md-icon>star_border</md-icon>

src/demo-app/a11y/grid-list/grid-list-a11y.ts

@@ -21,10 +21,10 @@ export class GridListAccessibilityDemo {
   ];
 
   tiles = [
-    {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
-    {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
-    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
-    {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
+    {text: 'Cappuccino', cols: 3, rows: 1, color: 'lightblue'},
+    {text: 'Mocha', cols: 1, rows: 2, color: 'lightgreen'},
+    {text: 'Latte', cols: 1, rows: 1, color: 'lightpink'},
+    {text: 'Iced coffee', cols: 2, rows: 1, color: '#DDBDF1'},
   ];
 
   fixedCols = 4;