Add alt tags to images for a11y (#529)

- Add imageAlt to GridBlock - Set alt equal to `user.caption` for mapped users - Set alt equal to `post.author` for blog posts - Update documentation
facebook · Apr 8, 2018 · c2cd169 · c2cd169
1 parent fc6e3b7
commit c2cd169
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 18 deletions.
diff --git a/docs/api-pages.md b/docs/api-pages.md
@@ -64,6 +64,7 @@ The `contents` attribute is an array containing the contents of each section of
 - `imageAlign` field for image alignment relative to the text, which defaults to `top` and can be set to `bottom`, `left`, or `right`
 - `title` for the title to display for this section, which is parsed from markdown
 - `imageLink` for a link destination from clicking the image
+- `imageAlt` for the description of what text will be shown in case the image is not available
 
 Example:
 
@@ -75,7 +76,8 @@ Example:
       content: "Learn how to use this project",
       image: siteConfig.baseUrl + "img/learn.png",
       title: `[Learn](${siteConfig.baseUrl}docs/tutorial.html)`,
-      imageLink: siteConfig.baseUrl + "docs/tutorial.html"
+      imageLink: siteConfig.baseUrl + "docs/tutorial.html",
+      imageAlt: "Learn how to use this project"
     },
     {
       content: "Questions gathered from the community",

diff --git a/examples/basics/pages/en/index.js b/examples/basics/pages/en/index.js
@@ -177,7 +177,7 @@ const Showcase = props => {
     .map((user, i) => {
       return (
         <a href={user.infoLink} key={i}>
-          <img src={user.image} title={user.caption} />
+          <img src={user.image} alt={user.caption} title={user.caption} />
         </a>
       );
     });

diff --git a/examples/basics/pages/en/users.js b/examples/basics/pages/en/users.js
@@ -21,7 +21,7 @@ class Users extends React.Component {
     const showcase = siteConfig.users.map((user, i) => {
       return (
         <a href={user.infoLink} key={i}>
-          <img src={user.image} title={user.caption} />
+          <img src={user.image} alt={user.caption} title={user.caption} />
         </a>
       );
     });

diff --git a/lib/core/BlogPost.js b/lib/core/BlogPost.js
@@ -51,6 +51,7 @@ class BlogPost extends React.Component {
                 post.authorFBID +
                 '/picture/?height=200&width=200'
               }
+              alt={post.author}
             />
           </a>
         </div>

diff --git a/lib/core/GridBlock.js b/lib/core/GridBlock.js
@@ -29,11 +29,11 @@ class GridBlock extends React.Component {
 
     const topLeftImage =
       (block.imageAlign === 'top' || block.imageAlign === 'left') &&
-      this.renderBlockImage(block.image, block.imageLink);
+      this.renderBlockImage(block.image, block.imageLink, block.imageAlt);
 
     const bottomRightImage =
       (block.imageAlign === 'bottom' || block.imageAlign === 'right') &&
-      this.renderBlockImage(block.image, block.imageLink);
+      this.renderBlockImage(block.image, block.imageLink, block.imageAlt);
 
     return (
       <div className={blockClasses} key={block.title}>
@@ -47,20 +47,20 @@ class GridBlock extends React.Component {
     );
   }
 
-  renderBlockImage(image, imageLink) {
+  renderBlockImage(image, imageLink, imageAlt) {
     if (image) {
       if (imageLink) {
         return (
           <div className="blockImage">
             <a href={imageLink}>
-              <img src={image} />
+              <img src={image} alt={imageAlt} />
             </a>
           </div>
         );
       } else {
         return (
           <div className="blockImage">
-            <img src={image} />
+            <img src={image} alt={imageAlt} />
           </div>
         );
       }

diff --git a/lib/core/nav/HeaderNav.js b/lib/core/nav/HeaderNav.js
@@ -217,6 +217,7 @@ class HeaderNav extends React.Component {
                 <img
                   className="logo"
                   src={this.props.baseUrl + siteConfig.headerIcon}
+                  alt={siteConfig.title}
                 />
               )}
               {!this.props.config.disableHeaderTitle && (

diff --git a/website/blog/2017-12-14-introducing-docusaurus.md b/website/blog/2017-12-14-introducing-docusaurus.md
@@ -5,7 +5,7 @@ authorURL: http://twitter.com/JoelMarcey
 authorFBID: 611217057
 ---
 
-![](/img/slash-introducing.png)
+![Introducing Slash](/img/slash-introducing.png)
 
 We are very happy to introduce [Docusaurus](https://github.com/facebook/Docusaurus) to help you manage one or many open source websites.
 
@@ -24,7 +24,7 @@ Docusaurus also provides core website and documentation features out-of-the-box
 
 ## The Birth of docusaurus
 
-![](/img/slash-birth.png)
+![Birth of Slash](/img/slash-birth.png)
 
 When Facebook first started their open source program, many teams implemented a custom website for each of their open source projects. This approach presented challenges when the open source program team was asked to help the project teams improve their documentation. Since each site was unique, adding basic infrastructure such as a blog, consistent navigation, search, etc. became challenging undertakings.
 
@@ -40,7 +40,7 @@ At Facebook, Docusaurus allows us to quickly get different projects up and runni
 
 ## Getting Up and Running
 
-![](/img/slash-upandrunning.png)
+![Slash Up and Running](/img/slash-upandrunning.png)
 
 At its core, we wanted sites running Docusaurus to be simple to use. With one [installation](https://docusaurus.io/docs/en/installation.html) command and some simple [configuration](https://docusaurus.io/docs/en/site-preparation.html), you can actually have a default running website.
 
@@ -129,7 +129,7 @@ build
 
 ## Community
 
-![](/img/docusaurus.svg)
+![Docusaurus](/img/docusaurus.svg)
 
 We welcome your [contributions](https://github.com/facebook/Docusaurus/blob/master/CONTRIBUTING.md) to Docusaurus, whether you want to use it for your own site, you want to [contribute](https://github.com/facebook/Docusaurus/blob/master/CONTRIBUTING.md) to the Docusaurus core or just have questions. Follow us on [GitHub](https://github.com/facebook/Docusaurus) and [Twitter](https://twitter.com/docusaurus).
 

diff --git a/website/pages/en/about-slash.js b/website/pages/en/about-slash.js
@@ -19,14 +19,14 @@ class AboutSlash extends React.Component {
       <div className="pageContainer">
         <Container className="mainContainer documentContainer postContainer">
           <h1>About Slash</h1>
-          <img src={`${siteConfig.baseUrl}img/docusaurus.svg`} />
+          <img src={`${siteConfig.baseUrl}img/docusaurus.svg`} alt="Docusaurus"/>
           <p>
             Slash is the official mascot of Docusaurus. You will find different variations of her throughout the <a href="https://docusaurus.io">website</a>, whether she is moving fast on her scooter or writing documentation at her standing desk. At Facebook, we have actual Slash plushies -- and you never know, you may see these plushies at various events and conferences in the future.
           </p>
         </Container>
         <Container className="mainContainer">
           <h2>Birth of Slash</h2>
-          <img src={`${siteConfig.baseUrl}img/slash-birth.png`} />
+          <img src={`${siteConfig.baseUrl}img/slash-birth.png`} alt="Birth of Slash"/>
           <p>
             The team sat in a conference room trying to come up with a name for the project. Dinosaurs became a theme, finally landing on Docusaurus, combining documentation with those many dinosaurs that end in "saurus". Of course, we needed a logo for our new project. Eric sat down and designed a logo that was quite beyond the norm of our normal open source project logos, but yet was just so awesome, we had to use it. We needed a name for this cute Docusaur. "Marky" for markdown? "Docky" for documentation? No, "Slash" for the normal way someone starts code documentation in many programming languages <code>//</code> or <code>/*</code> or <code>///</code>. And Slash was born.
           </p>

diff --git a/website/pages/en/index.js b/website/pages/en/index.js
@@ -39,7 +39,7 @@ class HomeSplash extends React.Component {
         <div className="homeSplashFade">
           <div className="wrapper homeWrapper">
             <div className="projectLogo">
-              <img src={`${siteConfig.baseUrl}img/docusaurus_keytar.svg`} />
+              <img src={`${siteConfig.baseUrl}img/docusaurus_keytar.svg`} alt="Docusaurus with Keytar"/>
             </div>
             <div className="inner">
               <h2 className="projectTitle">
@@ -79,7 +79,7 @@ class Index extends React.Component {
       .map((user, i) => {
         return (
           <a href={user.infoLink} key={i}>
-            <img src={user.image} title={user.caption} />
+            <img src={user.image} alt={user.caption} title={user.caption} />
           </a>
         );
       });
@@ -100,6 +100,7 @@ class Index extends React.Component {
                     to serve.`,
                   image: `${siteConfig.baseUrl}img/markdown.png`,
                   imageAlign: "top",
+                  imageAlt: "Markdown",
                   title: "Powered by Markdown"
                 },
                 {
@@ -109,6 +110,7 @@ class Index extends React.Component {
                     extended while reusing the same header and footer.`,
                   image: `${siteConfig.baseUrl}img/react.svg`,
                   imageAlign: "top",
+                  imageAlt: "React",
                   title: "Built Using React"
                 },
                 {
@@ -118,6 +120,7 @@ class Index extends React.Component {
                     into over 70 languages.`,
                   image: `${siteConfig.baseUrl}img/translation.svg`,
                   imageAlign: "top",
+                  imageAlt: "Translation",
                   title: "Ready for Translations"
                 }
               ]}
@@ -135,6 +138,7 @@ class Index extends React.Component {
                     helps you keep documentation in sync with project releases.`,
                   image: `${siteConfig.baseUrl}img/versioning.svg`,
                   imageAlign: "top",
+                  imageAlt: "Document Versioning",
                   title: "Document Versioning"
                 },
                 {
@@ -143,6 +147,7 @@ class Index extends React.Component {
                     We proudly support [Algolia documentation search](https://www.algolia.com/).`,
                   image: `${siteConfig.baseUrl}img/search.svg`,
                   imageAlign: "top",
+                  imageAlt: "Document Search",
                   title: "Document Search"
                 }
               ]}
@@ -158,6 +163,7 @@ class Index extends React.Component {
                     quickly without having to worry about site design.`,
                   imageAlign: "right",
                   image: `${siteConfig.baseUrl}img/docusaurus_speed.svg`,
+                  imageAlt: "Docusaurus on a Scooter",
                   title: "Quick Setup"
                 }
               ]}
@@ -177,6 +183,7 @@ class Index extends React.Component {
                     like CircleCI.`,
                   imageAlign: "left",
                   image: `${siteConfig.baseUrl}img/docusaurus_live.gif`,
+                  imageAlt: "Docusaurus Demo",
                   title: "Develop and Deploy"
                 }
               ]}
@@ -197,6 +204,7 @@ class Index extends React.Component {
                     contribute on [GitHub](https://github.com/facebook/docusaurus)!`,
                   imageAlign: "right",
                   image: `${siteConfig.baseUrl}img/docusaurus_monochrome.svg`,
+                  imageAlt: "Monochromatic Docusaurus",
                   title: "Website Features"
                 }
               ]}
@@ -225,20 +233,23 @@ class Index extends React.Component {
                       "<i>I’ve helped open source many projects at Facebook and every one needed a website. They all had very similar constraints: the documentation should be written in markdown and be deployed via GitHub pages. None of the existing solutions were great, so I hacked my own and then forked it whenever we needed a new website. I’m so glad that Docusaurus now exists so that I don’t have to spend a week each time spinning up a new one.</i>",
                     image: `${siteConfig.baseUrl}img/christopher-chedeau.jpg`,
                     imageAlign: "top",
+                    imageAlt: 'Christopher "vjeux" Chedeau',
                     title: 'Christopher "vjeux" Chedeau <br/><font size="2">Lead Prettier Developer</font>'
                   },
                   {
                     content:
                       "<i>Open source contributions to the React Native docs have skyrocketed after our move to Docusaurus. The docs are now hosted on a small repo in plain markdown, with none of the clutter that a typical static site generator would require. Thanks Slash!</i>",
                     image: `${siteConfig.baseUrl}img/hector-ramos.png`,
                     imageAlign: "top",
+                    imageAlt: "Hector Ramos",
                     title: 'Hector Ramos <br/><font size="2">Lead React Native Advocate</font>'
                   },
                   {
                     content:
                       "<i>Docusaurus has been a great choice for the ReasonML family of projects. It makes our documentation consistent, i18n-friendly, easy to maintain, and friendly for new contributors.</i>",
                     image: `${siteConfig.baseUrl}img/ricky-vetter.jpg`,
                     imageAlign: "top",
+                    imageAlt: "Ricky Vetter",
                     title: 'Ricky Vetter <br/><font size="2">ReasonReact Developer</font>'
                   }
                 ]}

diff --git a/website/pages/en/users.js b/website/pages/en/users.js
@@ -21,7 +21,7 @@ class Users extends React.Component {
       .map((user, i) => {
         return (
           <a href={user.infoLink} key={i}>
-            <img src={user.image} title={user.caption} />
+            <img src={user.image} alt={user.caption} title={user.caption} />
           </a>
         );
       });
@@ -33,7 +33,7 @@ class Users extends React.Component {
       .map((user, i) => {
         return (
           <a href={user.infoLink} key={i}>
-            <img src={user.image} title={user.caption} />
+            <img src={user.image} alt={user.caption} title={user.caption} />
           </a>
         );
       });