Some improvements for assistive technology users

src/components/article-lists/title-preview-author-media-flipped.html

@@ -14,7 +14,7 @@ <h1 class="f3 athelas mt0 lh-title">Tech Giant Invests Huge Money to Build a Com
         </p>
       </div>
       <div class="pl3-ns order-1 order-2-ns mb4 mb0-ns w-100 w-40-ns">
-        <img src="http://mrmrs.io/photos/cpu.jpg" class="db">
+        <img src="http://mrmrs.io/photos/cpu.jpg" class="db" alt="Photo of a dimly lit room with a computer interface terminal.">
       </div>
     </div>
     <p class="f6 lh-copy gray mv0">By <span class="ttu">Robin Darnell</span></p>
@@ -31,7 +31,7 @@ <h1 class="f3 athelas mt0 lh-title">A whale takes up residence in a large body o
         </p>
       </div>
       <div class="pl3-ns order-1 order-2-ns mb4 mb0-ns w-100 w-40-ns">
-        <img src="http://mrmrs.io/photos/whale.jpg" class="db">
+        <img src="http://mrmrs.io/photos/whale.jpg" class="db" alt="Photo of a whale's tale coming crashing out of the water.">
       </div>
     </div>
     <p class="f6 lh-copy gray mv0">By <span class="ttu">Katherine Grant</span></p>
@@ -50,7 +50,7 @@ <h1 class="f3 athelas mt0 lh-title">
         </p>
       </div>
       <div class="pl3-ns order-1 order-2-ns mb4 mb0-ns w-100 w-40-ns">
-        <img src="http://mrmrs.io/photos/warehouse.jpg" class="db">
+        <img src="http://mrmrs.io/photos/warehouse.jpg" class="db" alt="Photo of a warehouse with stacked shelves.">
       </div>
     </div>
     <p class="f6 lh-copy gray mv0">By <span class="ttu">Imelda Clancy</span></p>

src/components/article-lists/title-preview-author-media.html

@@ -7,7 +7,7 @@ <h2 class="baskerville fw1 ph3 ph0-l">News</h2>
     <a class="db pv4 ph3 ph0-l no-underline black dim" href="#0">
       <div class="flex flex-column flex-row-ns">
         <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
-          <img src="http://mrmrs.io/photos/cpu.jpg" class="db">
+          <img src="http://mrmrs.io/photos/cpu.jpg" class="db" alt="Photo of a dimly lit room with a computer interface terminal.">
         </div>
         <div class="w-100 w-60-ns pl3-ns">
           <h1 class="f3 fw1 baskerville mt0 lh-title">Tech Giant Invests Huge Money to Build a Computer Out of Science Fiction</h1>
@@ -25,7 +25,7 @@ <h1 class="f3 fw1 baskerville mt0 lh-title">Tech Giant Invests Huge Money to Bui
     <a class="db pv4 ph3 ph0-l no-underline black dim" href="#0">
       <div class="flex flex-column flex-row-ns">
         <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
-          <img src="http://mrmrs.io/photos/warehouse.jpg" class="db">
+          <img src="http://mrmrs.io/photos/warehouse.jpg" class="db" alt="Photo of a warehouse with stacked shelves.">
         </div>
         <div class="w-100 w-60-ns pl3-ns">
           <h1 class="f3 fw1 baskerville mt0 lh-title">Warehouse Prices Are Fast on the Rise</h1>
@@ -45,7 +45,7 @@ <h1 class="f3 fw1 baskerville mt0 lh-title">Warehouse Prices Are Fast on the Ris
     <a class="db pv4 ph3 ph0-l no-underline black dim" href="#0">
       <div class="flex flex-column flex-row-ns">
         <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
-          <img src="http://mrmrs.io/photos/whale.jpg" class="db">
+          <img src="http://mrmrs.io/photos/whale.jpg" class="db" alt="Photo of a whale's tale coming crashing out of the water.">
         </div>
         <div class="w-100 w-60-ns pl3-ns">
           <h1 class="f3 fw1 baskerville mt0 lh-title">Giant Whale Invests Huge Money to Build a Computer Out of Plankton</h1>

src/components/articles/photo-essay.html

@@ -43,23 +43,23 @@ <h2 class="f6 fw6 black">A story by Nancy Drew</h2>
           <p class="f5">
             During low tides, a powerful turbine water pump,
             built inside a cave at sea level, could be switched on from a control
-            room and could fill the tanks at a rate of 6,000 US gallons a minute, 
+            room and could fill the tanks at a rate of 6,000 US gallons a minute,
             recycling all the water in five hours.
           </p>
         </div>
       </div>
       <div class="cf">
-        <div class="fl w-100 w-50-l pr2-l pb3"> 
-          <img class="db w-100" src="http://mrmrs.io/photos/010.jpg">
+        <div class="fl w-100 w-50-l pr2-l pb3">
+          <img class="db w-100" src="http://mrmrs.io/photos/010.jpg" alt="Photo of a dusk skyline above a grassy rockface covered in trees.">
         </div>
-        <div class="fl w-50 w-50-l pr1 pr0-l pl2-l pb3"> 
-          <img class="db w-100" src="http://mrmrs.io/photos/011.jpg">
+        <div class="fl w-50 w-50-l pr1 pr0-l pl2-l pb3">
+          <img class="db w-100" src="http://mrmrs.io/photos/011.jpg" alt="Photo of the sea and sky on the horizon with the foundations of a demolished house.">
         </div>
-        <div class="fl w-50 w-50-l pl2 pl0-l pr2-l pb3"> 
-          <img class="db w-100" src="http://mrmrs.io/photos/012.jpg">
+        <div class="fl w-50 w-50-l pl2 pl0-l pr2-l pb3">
+          <img class="db w-100" src="http://mrmrs.io/photos/012.jpg" alt="Photo of the sea with mist covering the rocky formations near the shore.">
         </div>
-        <div class="fl w-100 w-50-l pl2-l"> 
-          <img class="db w-100" src="http://mrmrs.io/photos/013.jpg">
+        <div class="fl w-100 w-50-l pl2-l">
+          <img class="db w-100" src="http://mrmrs.io/photos/013.jpg" alt="Photo of the foundations of a building on a cliff overlooking a lighthouse.">
         </div>
       </div>
     </div>

src/components/articles/single-column-large-title.html

@@ -14,27 +14,27 @@ <h1 class="f3 f2-m f-subheadline-l measure lh-title fw1 mt0">A Night of Taking P
     <p class="f4 mb4 center measure lh-copy">
       On <time>March 14, 1896</time>, the Sutro Baths were opened to the public as the world's largest indoor swimming pool establishment. </p>
     <div class="measure db center f5 f4-ns lh-copy">
-      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/013.jpg">
+      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/013.jpg" alt="Photo of the foundations of a building on a cliff overlooking a lighthouse.">
       <p>
         Before it burned to the ground, the structure filled a small beach
         inlet below the Cliff House, also owned by Adolph Sutro at the time.
         Shortly after closing, a fire in 1966 destroyed the building
         while it was in the process of being demolished.
       </p>
-      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/012.jpg">
+      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/012.jpg" alt="Photo of the sea with mist covering the rocky formations near the shore.">
       <p>
         During high tides, water would flow directly into the pools from the
         nearby ocean, recycling the two million US gallons of water in about an hour.
       </p>
-      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/010.jpg">
+      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/010.jpg" alt="Photo of a dusk skyline above a grassy rockface covered in trees.">
       <p>
         All that remains
         of the site are concrete walls, blocked off stairs and
         passageways, and a tunnel with a deep crevice in the middle. The
         cause of the fire was arson. Shortly afterwards, the developer
         left San Francisco and claimed insurance money.
       </p>
-      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/011.jpg">
+      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/011.jpg" alt="Photo of the sea and sky on the horizon with the foundations of a demolished house.">
       <p>
         During low tides, a powerful turbine water pump,
         built inside a cave at sea level, could be switched on from a control

src/components/articles/title-text-image.html

@@ -6,7 +6,7 @@
 }}}
 <article class="pa3 pa5-ns">
   <h1 class="f2">Title Text with Image</h1>
-  <img src="http://tachyons.io/img/space.jpg" class="w-100 f5 measure" alt="outer space">
+  <img src="http://tachyons.io/img/space.jpg" class="w-100 f5 measure" alt="Photo of outer space">
   <p class="measure lh-copy">
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
     tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At

src/components/cards/news-card.html

@@ -8,7 +8,7 @@
   <div class="pv2 ph3">
      <h1 class="f6 ttu tracked">Daily News Co.</h1>
   </div>
-  <img src="http://tachyons.io/img/cat-720.jpg" class="w-100 db" alt="Cat yawning">
+  <img src="http://tachyons.io/img/cat-720.jpg" class="w-100 db" alt="Closeup photo of a tabby cat yawning.">
   <div class="pa3">
     <a href="#" class="link dim lh-title">15 things every cat owner should know</a>
     <small class="gray db pv2">AMP - <time>6 hours ago</time></small>

src/components/cards/product-card.html

@@ -5,7 +5,7 @@
   }
 }}}
 <article class="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center">
-  <img src="http://placekitten.com/g/600/300" class="db w-100 br2 br--top" alt="kitty">
+  <img src="http://placekitten.com/g/600/300" class="db w-100 br2 br--top" alt="Photo of a kitten looking menacing.">
   <div class="pa2 ph3-ns pb3-ns">
     <div class="dt w-100 mt1">
       <div class="dtc">

src/components/cards/profile-card-title-subtitle.html

@@ -6,7 +6,7 @@
 }}}
 <article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
   <div class="tc">
-    <img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Kitty staring at you">
+    <img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Photo of a kitty staring at you">
     <h1 class="f3 mb2">Mimi W.</h1>
     <h2 class="f5 fw4 gray mt0">CCO (Chief Cat Officer)</h2>
   </div>

src/components/cards/profile-card.html

@@ -6,7 +6,7 @@
 }}}
 <article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
   <div class="tc">
-    <img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h3 w3 dib" title="Kitty staring at you">
+    <img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h3 w3 dib" title="Photo of a kitty staring at you">
     <h1 class="f4">Mimi Whitehouse</h1>
     <hr class="mw3 bb bw1 b--black-10">
   </div>

src/components/cards/suggested-profile.html

@@ -6,7 +6,7 @@
 }}}
 <section class="tc pa3 pa5-ns">
   <article class="hide-child relative ba b--black-20 mw5 center">
-    <img src="https://scontent.flhr3-1.fna.fbcdn.net/v/t1.0-1/p320x320/10419949_10105372167674736_5929675618317299881_n.jpg?oh=fa3bbf4311e61e4637b67ef3be89479f&oe=58C28705" class="db" />
+    <img src="https://scontent.flhr3-1.fna.fbcdn.net/v/t1.0-1/p320x320/10419949_10105372167674736_5929675618317299881_n.jpg?oh=fa3bbf4311e61e4637b67ef3be89479f&oe=58C28705" class="db" alt="Photo of Jesse Grant" />
     <div class="pa2 bt b--black-20">
       <a class="f6 db link dark-blue hover-blue" href="#">Jesse Grant</a>
       <p class="f6 gray mv1">5 mutual friends</p>

src/components/collections/albums.html

@@ -17,7 +17,7 @@ <h2 class="f3 fw4 pa3 mv0">Albums</h2>
     </div>
     <div class="fl w-50 w-25-m w-20-l pa2">
       <a href="https://geo.itunes.apple.com/us/album/jeffery/id1146718343?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
-        <img src="http://is1.mzstatic.com/image/thumb/Music71/v4/c8/2d/b1/c82db1cd-9dc5-d7cb-2a34-735cf47bb809/source/400x40000bb.png" alt="Young Thug - Jeffery" class="w-100 db outline black-10"/>
+        <img src="http://is1.mzstatic.com/image/thumb/Music71/v4/c8/2d/b1/c82db1cd-9dc5-d7cb-2a34-735cf47bb809/source/400x40000bb.png" alt="Young Thug - Jeffery Album Cover" class="w-100 db outline black-10"/>
         <dl class="mt2 f6 lh-copy">
           <dt class="clip">Title</dt>
           <dd class="ml0 black truncate w-100 ttu">Jeffery</dd>