Add basic accessibility fixes (#2215)

* Add basic accessibility fixes * Fix ALT text in tutorial part 4
gatsbyjs · Sep 25, 2017 · 3d05848 · 3d05848
1 parent d683ae8
commit 3d05848
Show file tree

Hide file tree

Showing 10 changed files with 17 additions and 9 deletions.
diff --git a/docs/docs/adding-images-fonts-files.md b/docs/docs/adding-images-fonts-files.md
@@ -62,7 +62,7 @@ render() {
   // Note: this is an escape hatch and should be used sparingly!
   // Normally we recommend using `import` for getting asset URLs
   // as described in “Adding Images and Fonts” above this section.
-  return <img src={__PATH_PREFIX__ + '/img/logo.png'} />;
+  return <img src={__PATH_PREFIX__ + '/img/logo.png'} alt="Logo" />;
 }
 ```
 

diff --git a/docs/docs/environment-variables.md b/docs/docs/environment-variables.md
@@ -34,7 +34,7 @@ GATSBY_ASSETS_URL=http://s3.amazonaws.com/bucketname
 render() {
   return (
     <div>
-      <img src={`${process.env.GATSBY_ASSETS_URL}/logo.png`} />
+      <img src={`${process.env.GATSBY_ASSETS_URL}/logo.png`} alt="Logo" />
     </div>
   )
 }

diff --git a/docs/tutorial/part-four/index.md b/docs/tutorial/part-four/index.md
@@ -66,7 +66,10 @@ export default () =>
   <div>
     <h1>Amazing Pandas Eating Things</h1>
     <div>
-      <img src="https://2.bp.blogspot.com/-BMP2l6Hwvp4/TiAxeGx4CTI/AAAAAAAAD_M/XlC_mY3SoEw/s1600/panda-group-eating-bamboo.jpg" />
+      <img 
+        src="https://2.bp.blogspot.com/-BMP2l6Hwvp4/TiAxeGx4CTI/AAAAAAAAD_M/XlC_mY3SoEw/s1600/panda-group-eating-bamboo.jpg"
+        alt="Group of pandas eating bamboo" 
+      />
     </div>
   </div>
 ```

diff --git a/docs/tutorial/part-one/index.md b/docs/tutorial/part-one/index.md
@@ -107,7 +107,7 @@ export default () =>
  <div style={{ color: `tomato` }}>
    <h1>Hello Gatsby!</h1>
    <p>What a world.</p>
-   <img src="http://lorempixel.com/400/200/" />
+   <img src="http://lorempixel.com/400/200/" alt="" />
  </div>
 ```
 
@@ -133,7 +133,7 @@ export default () =>
   <div style={{ color: `tomato` }}>
     <h1>Hello Gatsby!</h1>
     <p>What a world.</p>
-    <img src="http://lorempixel.com/400/200/" />
+    <img src="http://lorempixel.com/400/200/" alt="" />
     <br />
     <Link to="/page-2/">Link</Link>
   </div>

diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md
@@ -380,7 +380,7 @@ import Container from "../components/container"
 
 const User = props =>
   <div className={styles.user}>
-    <img src={props.avatar} className={styles.avatar} />
+    <img src={props.avatar} className={styles.avatar} alt="" />
     <div className={styles.description}>
       <h2 className={styles.username}>
         {props.username}
@@ -475,6 +475,7 @@ const User = props =>
     <img
       src={props.avatar}
       css={{ flex: `0 0 96px`, width: 96, height: 96, margin: 0 }}
+      alt=""
     />
     <div css={{ flex: 1, marginLeft: 18, padding: 12 }}>
       <h2 css={{ margin: `0 0 12px 0`, padding: 0 }}>
@@ -574,7 +575,7 @@ const Excerpt = styled.p`margin: 0;`
 
 const User = props =>
   <UserWrapper>
-    <Avatar src={props.avatar} />
+    <Avatar src={props.avatar} alt="" />
     <Description>
       <Username>
         {props.username}

diff --git a/examples/using-contentful/src/templates/category.js b/examples/using-contentful/src/templates/category.js
@@ -30,6 +30,7 @@ class CategoryTemplate extends React.Component {
             }}
             src={iconImg.src}
             srcSet={iconImg.srcSet}
+            alt=""
           />
           <h4 style={{ marginBottom: 0 }}>{title}</h4>
         </div>

diff --git a/...ples/using-remark/src/pages/2017-01-02---responsive-images-and-iframes/index.md b/...ples/using-remark/src/pages/2017-01-02---responsive-images-and-iframes/index.md
@@ -31,7 +31,7 @@ You aren't just limited to markdown image tags either. You can either use markdo
 Or HTML image tags:
 
 ```
-&lt;img src="image.png"&gt;
+&lt;img src="image.png" alt=""&gt;
 ```
 
 Let's see some more photos by [Max Boettinger](https://unsplash.com/@maxboettinger) ([I](https://unsplash.com/photos/T7Lnl3PFISM), [II](https://unsplash.com/@maxboettinger?photo=SUFS6CPjB5Q)):

diff --git a/www/src/components/blog-post-preview-item.js b/www/src/components/blog-post-preview-item.js
@@ -26,7 +26,7 @@ class BlogPostPreviewItem extends React.Component {
           }}
         >
           <img
-            alt={`Avatar for ${post.frontmatter.author.id}`}
+            alt=""
             src={avatar.src}
             srcSet={avatar.srcSet}
             height={avatar.height}

diff --git a/www/src/components/diagram.js b/www/src/components/diagram.js
@@ -200,6 +200,7 @@ const Gatsby = ({ children }) => (
         margin: 0,
         verticalAlign: `middle`,
       }}
+      alt=""
     />
     <ItemDescription>
       <small

diff --git a/www/src/components/navigation.js b/www/src/components/navigation.js
@@ -85,6 +85,7 @@ export default ({ pathname }) => {
 
   return (
     <div
+      role="navigation"
       css={{
         borderBottom: `1px solid ${presets.veryLightPurple}`,
         backgroundColor: `rgba(255,255,255,0.975)`,
@@ -133,6 +134,7 @@ export default ({ pathname }) => {
               marginRight: rhythm(2 / 4),
               verticalAlign: `middle`,
             }}
+            alt=""
           />
           <h1
             css={{