Improved accessibility according to WCAG

app/src/components/amazonurl.js

@@ -8,7 +8,7 @@ const getTaggetURL = (book) => {
 export default ({ book }) => {
     return (
         <OutboundLink href={getTaggetURL(book)} target="_blank">
-            <img style={{ "width": "30px" }} src="https://img.icons8.com/color/48/000000/amazon.png"/>
+            <img alt="Amazon link" style={{ "width": "30px" }} src="https://img.icons8.com/color/48/000000/amazon.png"/>
         </OutboundLink>
     )
-} 
+}

app/src/components/bookcard.js

@@ -14,11 +14,12 @@ const truncateContent = (content) => {
 
 const BookCard = ({ book }) => (
   <Card style={{ width: "44rem", height: "21rem", marginBottom: "15px" }}>
-    <Row>
+    <Row aria-label={book.title}>
       <Col xs={3}>
         <Card.Img
           style={{ height: "12rem", width: "8rem", paddingLeft: "25px", paddingRight: "-15px", paddingTop: "30px" }}
           src={book.image_url}
+          alt={book.title}
         />
       </Col>
       <Col>

app/src/components/categorydescription.js

@@ -3,8 +3,8 @@ import React from "react";
 
 export default ({categoryName}) => {
     return (
-        <div>
-            <h2>
+        <div aria-labelledby="category-description">
+            <h2 id="category-description">
                 Mind expanding books on {categoryName}
             </h2>
         </div>

app/src/components/header.js

@@ -3,8 +3,8 @@ import PropTypes from "prop-types"
 import React from "react"
 
 const Header = ({ siteTitle }) => (
-  <header className="my-1 bg-red">
-    <h1 style={{ margin: 0 }}>
+  <header className="my-1 bg-red" aria-labelledby='main-title'>
+    <h1 id="main-title" style={{ margin: 0 }}>
       <Link
         to="/"
         style={{

app/src/components/sidebar.js

@@ -25,11 +25,11 @@ export default () => {
           className="col-md-12 d-none d-md-block bg-light sidebar"
           activeKey="/home"
         >
-          <div className="sidebar-sticky">
+          <div className="sidebar-sticky" role="navigation" aria-label="Sidebar">
             {data.allCategoriesJson.edges.map(function(x, index) {
               return (
-                <Nav.Item>
-                  <Nav.Link href={slugify(x.node.name)}>
+                <Nav.Item key={x.node.name}>
+                  <Nav.Link href={slugify(x.node.name)} role="button">
                     {x.node.emoji} {x.node.name}
                   </Nav.Link>
                 </Nav.Item>

app/src/pages/404.js

@@ -6,7 +6,7 @@ import SEO from "../components/seo"
 const NotFoundPage = () => (
   <Layout>
     <SEO title="404: Not found" />
-    <h1>NOT FOUND</h1>
+    <h1 id="title">NOT FOUND</h1>
     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
   </Layout>
 )