improve a11y score

Blazity · Oct 17, 2021 · 0529ab4 · 0529ab4
1 parent 1a882ba
commit 0529ab4
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 49 deletions.
diff --git a/components/ArticleCard.tsx b/components/ArticleCard.tsx
@@ -16,7 +16,7 @@ export default function ArticleCard({ title, slug, imageUrl, description }: Arti
       <ArticleCardWrapper className="article-card-wrapper">
         <HoverEffectContainer>
           <ImageContainer>
-            <NextImage src={imageUrl} layout="fill" objectFit="cover" />
+            <NextImage src={imageUrl} layout="fill" objectFit="cover" alt={title} />
           </ImageContainer>
           <Content>
             <Title>{title}</Title>

diff --git a/components/ArticleImage.tsx b/components/ArticleImage.tsx
@@ -13,6 +13,7 @@ export default function ArticleImage({ src, caption, ...rest }: ArticleImageProp
       <ImageWrapper>
         <NextImage
           src={src}
+          alt={caption || 'Article Image'}
           placeholder="blur"
           blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPkj6+vBwAC4AFuNSmtGAAAAABJRU5ErkJggg=="
           layout="fill"

diff --git a/components/BasicCard.tsx b/components/BasicCard.tsx
@@ -10,7 +10,7 @@ interface BasicCardProps {
 export default function BasicCard({ title, description, imageUrl }: BasicCardProps) {
   return (
     <Card>
-      <NextImage src={imageUrl} width={128} height={128} />
+      <NextImage src={imageUrl} width={128} height={128} alt={title} />
       <Title>{title}</Title>
       <Description>{description}</Description>
     </Card>

diff --git a/components/BasicSection.tsx b/components/BasicSection.tsx
@@ -17,7 +17,7 @@ export default function BasicSection({ imageUrl, title, overTitle, reversed, chi
   return (
     <BasicSectionWrapper reversed={reversed}>
       <ImageContainer>
-        <NextImage src={imageUrl} layout="fill" objectFit="cover" />
+        <NextImage src={imageUrl} alt={title} layout="fill" objectFit="cover" />
       </ImageContainer>
       <ContentContainer>
         <CustomOverTitle>{overTitle}</CustomOverTitle>

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -75,7 +75,7 @@ export default function Navbar({ items }: NavbarProps) {
           ))}
         </NavItemList>
         <HamburgerMenuWrapper>
-          <HamburgerIcon onClick={toggle} />
+          <HamburgerIcon aria-label="Toggle menu" onClick={toggle} />
         </HamburgerMenuWrapper>
       </Content>
     </NavbarContainer>

diff --git a/components/NewsletterModal.tsx b/components/NewsletterModal.tsx
@@ -1,6 +1,7 @@
-import { FormEventHandler, useState } from 'react';
+import React, { useState } from 'react';
 import MailchimpSubscribe, { DefaultFormFields } from 'react-mailchimp-subscribe';
 import styled from 'styled-components';
+import { EnvVars } from 'env';
 import useEscClose from 'hooks/useEscKey';
 import { media } from 'utils/media';
 import Button from './Button';
@@ -19,7 +20,7 @@ export default function NewsletterModal({ onClose }: NewsletterModalProps) {
 
   useEscClose({ onClose });
 
-  function onSubmit(event: HTMLFormElement, enrollNewsletter: (props: DefaultFormFields) => void) {
+  function onSubmit(event: React.FormEvent<HTMLFormElement>, enrollNewsletter: (props: DefaultFormFields) => void) {
     event.preventDefault();
     console.log({ email });
     if (email) {
@@ -29,13 +30,13 @@ export default function NewsletterModal({ onClose }: NewsletterModalProps) {
 
   return (
     <MailchimpSubscribe
-      url="https://bstefanski.us5.list-manage.com/subscribe/post?u=66b4c22d5c726ae22da1dcb2e&id=679fb0eec9"
+      url={EnvVars.MAILCHIMP_SUBSCRIBE_URL}
       render={({ subscribe, status, message }) => {
         const hasSignedUp = status === 'success';
         return (
           <Overlay>
             <Container>
-              <Card onSubmit={(event: HTMLFormElement) => onSubmit(event, subscribe)}>
+              <Card onSubmit={(event: React.FormEvent<HTMLFormElement>) => onSubmit(event, subscribe)}>
                 <CloseIconContainer>
                   <CloseIcon onClick={onClose} />
                 </CloseIconContainer>
@@ -54,7 +55,7 @@ export default function NewsletterModal({ onClose }: NewsletterModalProps) {
                         Submit
                       </CustomButton>
                     </Row>
-                    {message && <ErrorMessage dangerouslySetInnerHTML={{ __html: message }} />}
+                    {message && <ErrorMessage dangerouslySetInnerHTML={{ __html: message as string }} />}
                   </>
                 )}
               </Card>

diff --git a/env.ts b/env.ts
@@ -2,4 +2,5 @@ export const EnvVars = {
   SITE_NAME: 'My SaaS Startup',
   OG_IMAGES_URL: 'https://next-saas-starter-ashy.vercel.app/og-images/',
   URL: 'https://next-saas-starter-ashy.vercel.app/',
+  MAILCHIMP_SUBSCRIBE_URL: 'https://bstefanski.us5.list-manage.com/subscribe/post?u=66b4c22d5c726ae22da1dcb2e&id=679fb0eec9',
 };
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -30,7 +30,7 @@ export default class MyDocument extends Document {
 
   render() {
     return (
-      <Html>
+      <Html lang="en">
         <Head>
           <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet" />
         </Head>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,7 +1,9 @@
 import { InferGetStaticPropsType } from 'next';
+import Head from 'next/head';
 import styled from 'styled-components';
 import BasicSection from 'components/BasicSection';
 import Link from 'components/Link';
+import { EnvVars } from 'env';
 import { getAllPosts } from 'utils/postsFetcher';
 import Cta from 'views/HomePage/Cta';
 import Features from 'views/HomePage/Features';
@@ -13,39 +15,48 @@ import Testimonials from 'views/HomePage/Testimonials';
 
 export default function Homepage({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
-    <HomepageWrapper>
-      <WhiteBackgroundContainer>
-        <Hero />
-        <Partners />
-        <BasicSection imageUrl="/demo-illustration-1.svg" title="Lorem ipsum dolor sit amet consectetur." overTitle="sit amet gogo">
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quidem error incidunt a doloremque voluptatem porro inventore
-            voluptate quo deleniti animi laboriosam.{' '}
-            <Link href="/help-center">Possimus ullam velit rem itaque consectetur, in distinctio?</Link> Lorem ipsum, dolor sit amet
-            consectetur adipisicing elit. Soluta repellendus quia quos obcaecati nihil. Laudantium non accusantium, voluptate eum nesciunt
-            at suscipit quis est soluta?
-          </p>
-        </BasicSection>
-        <BasicSection imageUrl="/demo-illustration-2.svg" title="Lorem ipsum dolor sit." overTitle="gugu gaga" reversed>
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quidem error incidunt a doloremque voluptatem porro inventore{' '}
-            <strong>voluptate quo deleniti animi laboriosam</strong>. Possimus ullam velit rem itaque consectetur, in distinctio?
-          </p>
-          <ul>
-            <li>Professional point 1</li>
-            <li>Professional remark 2</li>
-            <li>Professional feature 3</li>
-          </ul>
-        </BasicSection>
-      </WhiteBackgroundContainer>
-      <DarkerBackgroundContainer>
-        <Cta />
-        <FeaturesGallery />
-        <Features />
-        <Testimonials />
-        <ScrollableBlogPosts posts={posts} />
-      </DarkerBackgroundContainer>
-    </HomepageWrapper>
+    <>
+      <Head>
+        <title>{EnvVars.SITE_NAME}</title>
+        <meta
+          name="description"
+          content="Tempor nostrud velit fugiat nostrud duis incididunt Lorem deserunt est tempor aute dolor ad elit."
+        />
+      </Head>
+      <HomepageWrapper>
+        <WhiteBackgroundContainer>
+          <Hero />
+          <Partners />
+          <BasicSection imageUrl="/demo-illustration-1.svg" title="Lorem ipsum dolor sit amet consectetur." overTitle="sit amet gogo">
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quidem error incidunt a doloremque voluptatem porro inventore
+              voluptate quo deleniti animi laboriosam.{' '}
+              <Link href="/help-center">Possimus ullam velit rem itaque consectetur, in distinctio?</Link> Lorem ipsum, dolor sit amet
+              consectetur adipisicing elit. Soluta repellendus quia quos obcaecati nihil. Laudantium non accusantium, voluptate eum nesciunt
+              at suscipit quis est soluta?
+            </p>
+          </BasicSection>
+          <BasicSection imageUrl="/demo-illustration-2.svg" title="Lorem ipsum dolor sit." overTitle="gugu gaga" reversed>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quidem error incidunt a doloremque voluptatem porro inventore{' '}
+              <strong>voluptate quo deleniti animi laboriosam</strong>. Possimus ullam velit rem itaque consectetur, in distinctio?
+            </p>
+            <ul>
+              <li>Professional point 1</li>
+              <li>Professional remark 2</li>
+              <li>Professional feature 3</li>
+            </ul>
+          </BasicSection>
+        </WhiteBackgroundContainer>
+        <DarkerBackgroundContainer>
+          <Cta />
+          <FeaturesGallery />
+          <Features />
+          <Testimonials />
+          <ScrollableBlogPosts posts={posts} />
+        </DarkerBackgroundContainer>
+      </HomepageWrapper>
+    </>
   );
 }
 

diff --git a/views/HomePage/FeaturesGallery.tsx b/views/HomePage/FeaturesGallery.tsx
@@ -44,7 +44,7 @@ export default function FeaturesGallery() {
 
     return (
       <ImageContainer key={singleTab.title} isActive={isActive}>
-        <NextImage src={singleTab.imageUrl} layout="fill" objectFit="contain" priority={isFirst} />
+        <NextImage src={singleTab.imageUrl} alt={singleTab.title} layout="fill" objectFit="contain" priority={isFirst} />
       </ImageContainer>
     );
   });
@@ -58,7 +58,7 @@ export default function FeaturesGallery() {
           <CircleContainer>
             <ThreeLayersCircle baseColor={isActive ? 'transparent' : singleTab.baseColor} secondColor={singleTab.secondColor} />
           </CircleContainer>
-          <h3>{singleTab.title}</h3>
+          <h4>{singleTab.title}</h4>
         </TabTitleContainer>
         <Collapse isOpen={isActive} duration={300}>
           <TabContent>
@@ -176,7 +176,7 @@ const TabTitleContainer = styled.div`
   display: flex;
   align-items: center;
 
-  h3 {
+  h4 {
     flex: 1;
   }
 `;

diff --git a/views/HomePage/Partners.tsx b/views/HomePage/Partners.tsx
@@ -36,14 +36,18 @@ export default function Partners() {
       >
         {PARTNER_LOGOS.map((logo) => (
           <SwiperSlide key={logo}>
-            <NextImage src={'/partners/' + logo} width={128} height={128} />
+            <NextImage src={'/partners/' + logo} alt={normalizePartnerLogoName(logo)} width={128} height={128} />
           </SwiperSlide>
         ))}
       </Swiper>
     </PartnersWrapper>
   );
 }
 
+function normalizePartnerLogoName(logo: string) {
+  return logo.replace('.svg', '');
+}
+
 const Title = styled.h3`
   font-size: 1.3rem;
   letter-spacing: 0.02em;

diff --git a/views/HomePage/Testimonials.tsx b/views/HomePage/Testimonials.tsx
@@ -47,11 +47,16 @@ export default function Testimonials() {
           {TESTIMONIALS.map((singleTestimonial, idx) => (
             <SwiperSlide key={idx}>
               <TestimonialCard>
-                <NextImage src={singleTestimonial.companyLogoUrl} width={200} height={40} />
+                <NextImage
+                  src={singleTestimonial.companyLogoUrl}
+                  alt={`${singleTestimonial.author.name}'s company logo`}
+                  width={200}
+                  height={40}
+                />
                 <Content>“{singleTestimonial.content}”</Content>
                 <AuthorContainer>
                   <AuthorImageContainer>
-                    <NextImage src={singleTestimonial.author.avatarUrl} width={48} height={48} />
+                    <NextImage src={singleTestimonial.author.avatarUrl} alt={singleTestimonial.author.name} width={48} height={48} />
                   </AuthorImageContainer>
                   <AuthorContent>
                     <AuthorName>{singleTestimonial.author.name}</AuthorName>