Add note and rule about redundant alt text

Screenreaders already announce `img` elements as images, so there is no
need to include this information in the alt text. This will give people
using assistive technologies a smoother experience.

packages/eslint-config-airbnb/rules/react.js

@@ -13,6 +13,10 @@ module.exports = {
     // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md
     'jsx-a11y/img-uses-alt': 2,
 
+    // Prevent img alt text from containing redundant words like "image", "picture", or "photo"
+    // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/redundant-alt.md
+    'jsx-a11y/redundant-alt': 2,
+
     // Prevent missing displayName in a React component definition
     // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
     'react/display-name': [0, { 'ignoreTranspilerName': false }],

react/README.md

@@ -233,6 +233,18 @@
     <img src="hello.jpg" alt="" role="presentation" />
     ```
 
+  - Do not use words like "image", "photo", or "picture" in `<img>` `alt` props. eslint: [`jsx-a11y/redundant-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md)
+
+  > Why? Screenreaders already announce `img` elements as images, so there is no need to include this information in the alt text.
+
+    ```javascript
+    // bad
+    <img src="hello.jpg" alt="Picture of me waving hello" />
+
+    // good
+    <img src="hello.jpg" alt="Me waving hello" />
+    ```
+
 ## Parentheses
 
   - Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md)