Fix: aria-labels for static and dynamic links plus aria-labelledby, titles and descriptions for svg images

README.md

@@ -1,6 +1,6 @@
 <!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
 <p align="center">
-  <a href="https://www.gatsbyjs.org">
+  <a alt="Link to page Gatsby JS" href="https://www.gatsbyjs.org">
     <img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" />
   </a>
 </p>

src/components/Button/index.js

@@ -9,7 +9,7 @@ const Button = React.memo(({ children, className, to, onClick }) => {
   if (to) {
     if (to.startsWith('http')) {
       return (
-        <a href={to} className={css}>{children}</a>
+        <a aria-label={children} href={to} className={css}>{children}</a>
       );
     }
 

src/components/MainNav/index.js

@@ -46,7 +46,7 @@ const MenuLink = React.memo(({ children, to }) => {
   if (to && to.startsWith('http')) {
     return (
       <li className={liCss}>
-        <a href={to} className={linkCss}>{children}</a>
+        <a aria-label={children} href={to} className={linkCss}>{children}</a>
       </li>
     );
   }

src/components/Sidebar/index.js

@@ -49,11 +49,11 @@ function FeaturedMentor({ mentor, isAuthor }) {
       <SidebarTitle>
         { isAuthor ? 'Author' : 'Featured Mentor' }
       </SidebarTitle>
-      <a href={`https://mentors.codingcoach.io/u/${mentor._id}`} className="block mb-4 w-full">
+      <a title href={`https://mentors.codingcoach.io/u/${mentor._id}`} className="block mb-4 w-full">
         <img src={mentor.avatar} className="w-full" alt={mentor.name} />
       </a>
       <h3 className="font-body mb-1 text-lg truncate" title={mentor.name}>
-        <a href={`https://mentors.codingcoach.io/u/${mentor._id}`} className="hover:underline">{mentor.name}</a>
+        <a aria-label={mentor.name} href={`https://mentors.codingcoach.io/u/${mentor._id}`} className="hover:underline">{mentor.name}</a>
       </h3>
       {mentor.tags &&
         <p className="font-body mb-1 text-xs uppercase truncate text-secondary-dark">
@@ -75,7 +75,7 @@ function LatestMentors({ mentors }) {
         {mentors.map(mentor =>
           <li key={mentor.name} className="mb-2">
             <h4 className="font-body">
-              <a href={`https://mentors.codingcoach.io/u/${mentor._id}`} className="hover:underline">{mentor.name}</a>
+              <a aria-label={mentor.name} href={`https://mentors.codingcoach.io/u/${mentor._id}`} className="hover:underline">{mentor.name}</a>
             </h4>
             <p className="uppercase text-xs text-secondary-dark truncate">{mentor.tags.join(', ')}</p>
           </li>
@@ -109,7 +109,7 @@ function TwitchAd() {
   return (
     <div className="mb-12 pt-4 md:mr-4 md:flex-1 lg:flex-none">
       <SidebarTitle>Follow us in Twitch</SidebarTitle>
-      <a href="https://www.twitch.tv/codingcoach/">
+      <a aria-label="Access our page on Twitch" href="https://www.twitch.tv/codingcoach/">
         <img src={twitchImage} alt="Twitch Logo" />
       </a>
     </div>
@@ -120,7 +120,7 @@ function StoreAd() {
   return (
     <div className="mb-12 pt-4 md:mr-4 md:flex-1 lg:flex-none">
       <SidebarTitle>Get the T-Shirt</SidebarTitle>
-      <a href="https://shop.spreadshirt.com/coding-coach" target="_blank" rel="noopener noreferrer">
+      <a aria-label="Buy coding-coach merchandise" href="https://shop.spreadshirt.com/coding-coach" target="_blank" rel="noopener noreferrer">
         <img src={tshirtImage} alt="Coding Coach T-Shirt" />
       </a>
     </div>

src/pages/404.js

@@ -23,13 +23,13 @@ const NotFoundPage = () => (
           <Link to="/">home page</Link> would be a good idea. You might want to{' '}
           <Link to="/blog">read the blog</Link>, we have very interesting
           articles and tutorials! Maybe looking for{' '}
-          <a href="https://mentors.codingcoach.io">a mentor</a> to improve your
+          <a aria-label="Link to page with all the mentors" href="https://mentors.codingcoach.io">a mentor</a> to improve your
           career?
         </p>
         <p>
           How did you get here? Is this a broken link within the blog? Or maybe
           a link from a third party website? Please{' '}
-          <a href="mailto:[email protected]">let us know</a> and we will fix it
+          <a aria-label="Send email to the page admin" href="mailto:[email protected]">let us know</a> and we will fix it
           ASAP!
         </p>
       </div>

src/pages/about.js

@@ -80,11 +80,11 @@ function Profile({ className, highlight, image, name, title, to }) {
 
   return (
     <div className={css}>
-      <a href={to}>
-        <img src={image} alt={name} title={name} />
+      <a aria-label={name} href={to}>
+        <img aria-label={name} src={image} alt={name} title={name} />
       </a>
       <h3 className={titleCss}>
-        <a href={to} className="hover:underline" title={name}>
+        <a aria-label={name} href={to} className="hover:underline" title={name}>
           {name}
         </a>
       </h3>

src/pages/blog.js

@@ -68,7 +68,7 @@ function PostExcerpt({ author, data, excerpt, fields }) {
           </Link>
         </h2>
         <p className="mb-1 font-body text-sm uppercase text-secondary-dark">
-          <a href={author.frontmatter.link} className="hover:underline">{author.frontmatter.name}</a> <span className="inline-block mx-2">&middot;</span>{' '}
+          <a aria-label={author.frontmatter.name} href={author.frontmatter.link} className="hover:underline">{author.frontmatter.name}</a> <span className="inline-block mx-2">&middot;</span>{' '}
           {data.date} <span className="inline-block mx-2">&middot;</span>{' '}
           {fields.readingTime.text}
         </p>

src/templates/post.js

@@ -51,7 +51,7 @@ export default function PostTemplate({ data }) {
             {frontmatter.title}
           </h1>
           <p className="mb-4 font-body uppercase  text-xs md:text-sm">
-            <a href={author.frontmatter.link} className="hover:underline">{author.frontmatter.name}</a>{' '}
+            <a aria-label={author.frontmatter.name} href={author.frontmatter.link} className="hover:underline">{author.frontmatter.name}</a>{' '}
             <span className="inline-block mx-2">&middot;</span>{' '}
             {frontmatter.date}{' '}
             <span className="inline-block mx-2">&middot;</span>{' '}