Add alt text for all pictures.

HaudinFlorence · Jul 9, 2024 · 9fbadd7 · 9fbadd7
1 parent 0438616
commit 9fbadd7
Show file tree

Hide file tree

Showing 20 changed files with 130 additions and 57 deletions.
diff --git a/src/components/about/Avatar.tsx b/src/components/about/Avatar.tsx
@@ -2,12 +2,21 @@ import styles from "./styles.module.css";
 import Link from "@docusaurus/Link";
 
 export default function Avatar({ person }) {
-    return (
-      <div className="flex-full-centered">
-          <div className={styles.avatar}>
-            <img src={require(person.avatarRoute).default} width={"160px"} height={"160px"}></img>
-          </div>
+  return (
+    <div className="flex-full-centered">
+      <div className={styles.avatar}>
+        <img
+          src={require(person.avatarRoute).default}
+          width={"160px"}
+          height={"160px"}
+          alt={
+            "Avatar of " +
+            person.CompleteName +
+            "working at QuantStack as a " +
+            person.position
+          }
+        ></img>
       </div>
-    );
-  }
-  
+    </div>
+  );
+}
diff --git a/src/components/about/FourValues.tsx b/src/components/about/FourValues.tsx
@@ -4,10 +4,10 @@ import OpennessMD from "@site/src/components/about/Values/openness.md";
 import ScienceMD from "@site/src/components/about/Values/science.md";
 import IntegrityMD from "@site/src/components/about/Values/integrity.md";
 import OptimismMD from "@site/src/components/about/Values/optimism.md";
-//import OpennessPicture from "@site/static/img/values/openness.svg";
-//import SciencePicture from "@site/static/img/values/science.svg";
-//import OptimismPicture from "@site/static/img/values/optimism.svg";
-//import IntegrityPicture from "@site/static/img/values/integrity.svg";
+/*import OpennessPicture from "@site/static/img/values/openness-light.svg";
+import SciencePicture from "@site/static/img/values/science-light.svg";
+import OptimismPicture from "@site/static/img/values/optimism-light.svg";
+import IntegrityPicture from "@site/static/img/values/integrity-light.svg";*/
 import { ValueCardMobile } from "@site/src/components/about/ValueCard";
 import { ValueCardDesktop } from "@site/src/components/about/ValueCard";
 import { useEffect, useState } from "react";
@@ -25,7 +25,7 @@ const valuesPictures = [
 export function SciencePicture() {
   return (
     <ThemedImage
-      alt="Icon representing the science value, representing an atom."
+      alt="Icon representing the science value, displaying an atom."
       sources={{
         light: useBaseUrl("/img/values/science-light.svg"),
         dark: useBaseUrl("/img/values/science-dark.svg"),
@@ -69,6 +69,7 @@ export function OptimismPicture() {
     />
   );
 }
+  */
 
 const valuesNames = ["Openness", "Science", "Optimism", "Integrity"];
 const cardColors = ["white", "yellow", "white", "yellow"];

diff --git a/src/components/about/LargePortraitCard.tsx b/src/components/about/LargePortraitCard.tsx
@@ -44,7 +44,16 @@ export default function LargePortraitCard({ person, avatarUrl, BioComponent }) {
             className={"col col--3 col--offset-1" + " " + "flex-full-centered"}
           >
             <div className="flex-full-centered">
-              <img src={avatarUrl} className={styles.avatar} />
+              <img
+                src={avatarUrl}
+                className={styles.avatar}
+                alt={
+                  "Avatar of " +
+                  person.CompleteName +
+                  "working at QuantStack as a " +
+                  person.position
+                }
+              />
             </div>
           </div>
           <div className="col col--6 col--offset-1">

diff --git a/src/components/about/SmallPortraitCardDesktop.tsx b/src/components/about/SmallPortraitCardDesktop.tsx
@@ -6,8 +6,8 @@ import LargePortraitCard from "./LargePortraitCard";
 
 const contentStyle = {
   background: "var(--ifm-background-color-large-portrait-card)",
-  borderRadius: "10px"
-}
+  borderRadius: "10px",
+};
 
 const overlayStyle = {
   backgroundColor: "var(--ifm-background-color-popup-overlay)",
@@ -50,7 +50,17 @@ export function SmallPortraitCardDesktop({ person, avatarUrl, setOffsets }) {
     >
       <div className="flex-full-centered">
         <div className={styles.avatar}>
-          <img src={avatarUrl} width={"160px"} height={"160px"} />
+          <img
+            src={avatarUrl}
+            width={"160px"}
+            height={"160px"}
+            alt={
+              "Avatar of " +
+              person.CompleteName +
+              "working at QuantStack as a " +
+              person.position
+            }
+          />
         </div>
       </div>
       <div className={styles.small_card_complete_name}>
@@ -74,11 +84,11 @@ export default function PopupPortrait({
       <Popup
         trigger={
           <div>
-          <SmallPortraitCardDesktop
-            person={person}
-            avatarUrl={avatarUrl}
-            setOffsets={setOffsets}
-          />
+            <SmallPortraitCardDesktop
+              person={person}
+              avatarUrl={avatarUrl}
+              setOffsets={setOffsets}
+            />
           </div>
         }
         contentStyle={contentStyle}

diff --git a/src/components/blog/BlogpostCard.tsx b/src/components/blog/BlogpostCard.tsx
@@ -33,6 +33,7 @@ export default function BlogpostCard({ blogpost, timeIndex }) {
                 id={blogpost.imageID}
                 width={blogpost.imageRenderedWidth}
                 height={blogpost.imageRenderedHeight}
+                alt={"Illustration for the blog post"}
               />
             </div>
           </div>

diff --git a/src/components/careers/Header.tsx b/src/components/careers/Header.tsx
@@ -6,7 +6,7 @@ export default function Header() {
       <div className={styles.careers_header}>
         <h1 className="text-centered">Join the QuantStack team!</h1>
         <div className={styles.group_photo_container + " " + "flex-full-centered"}>
-          <img src={GroupPhotoJupyterConUrl} />
+          <img src={GroupPhotoJupyterConUrl} alt={"Picture showing QuantStack people gathered at the Jupytercon in Paris in May 2023."}/>
         </div>
       </div>
     );

diff --git a/src/components/careers/InterviewPicture.tsx b/src/components/careers/InterviewPicture.tsx
@@ -1,12 +1,19 @@
 import styles from "./styles.module.css";
 import PlayCircle from "@site/static/img/icons/PlayCircle.svg";
 
-
 export default function InterviewPicture({ person }) {
   return (
     <div className={styles.picture_container}>
       <div className={styles.interview_picture}>
-        <img src={person.pictureRoute} />
+        <img
+          src={person.pictureRoute}
+          alt={
+            "Picture of" +
+            person.CompleteName +
+            "working at QuantStack as a" +
+            person.position
+          }
+        />
         <PlayCircle className={styles.play_interview} />
       </div>
     </div>

diff --git a/src/components/careers/LinkToWTJ.tsx b/src/components/careers/LinkToWTJ.tsx
@@ -7,6 +7,7 @@ export default function LinkToWTJ({label}) {
       <Link
         className={"link-to-button" + " " + styles.link_to_WTJ}
         href="https://www.welcometothejungle.com/fr/companies/quantstack"
+        aria-label="Learn more by visiting the page dedicated to QuantStack on Welcome to the Jungle platform."
       >
         {label}
       </Link>

diff --git a/src/components/home/AboutQS/index.tsx b/src/components/home/AboutQS/index.tsx
@@ -28,7 +28,7 @@ export default function AboutQS() {
           className={"col" + " " + "padding-none" + " " + "margin-none"}
         >
           <div className="flex-full-centered" style={{marginBottom: "var(--ifm-spacing-2xl)"}}>
-            <img src={GroupPhotoUrl} />
+            <img src={GroupPhotoUrl} alt={"Picture showing a group of Quantstack people in front of Saint-Maur's office, in Paris area."} />
           </div>
         </div>
       </div>

diff --git a/src/components/home/Hero/LogosTableBy8.tsx b/src/components/home/Hero/LogosTableBy8.tsx
@@ -104,35 +104,48 @@ export function LogosTable1Light() {
     <div className={"container" + " " + styles.table_with_8_customers}>
       <div className="row row--no-gutters">
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={BloombergLogoUrl} className={styles.customer_logo_light} />
+          <img
+            src={BloombergLogoUrl}
+            className={styles.customer_logo_light}
+            alt={"Logo of Bloomberg."}
+          />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={SGLogoUrl} className={styles.customer_logo_light} />
+          <img
+            src={SGLogoUrl}
+            className={styles.customer_logo_light}
+            alt={"Logo of Société Générale bank."}
+          />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={RapyutaLogoUrl} className={styles.customer_logo_light} />
+          <img
+            src={RapyutaLogoUrl}
+            className={styles.customer_logo_light}
+            alt={"Logo of Rapyuta company."}
+          />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={CFMLogoUrl} className={styles.customer_logo_light} />
+          <img src={CFMLogoUrl} className={styles.customer_logo_light}  alt={"Logo of CFM) "} />
         </div>
       </div>
       <div className="row row--no-gutters">
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={EngieLogoUrl} className={styles.customer_logo_light} />
+          <img src={EngieLogoUrl} className={styles.customer_logo_light}  alt={"Logo of Engie company."}  />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
           <img
             src={JRCLogoUrl}
             className={styles.customer_logo_light}
+            alt={"Logo of JRC."}
             style={{ width: "100px" }}
           />
         </div>
 
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={ERDCLogoUrl} className={styles.customer_logo_light} />
+          <img src={ERDCLogoUrl} className={styles.customer_logo_light}  alt={"Logo of ERDC."} />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={PandaLogoUrl} className={styles.customer_logo_light} />
+          <img src={PandaLogoUrl} className={styles.customer_logo_light}  alt={"Logo of Panda company."}/>
         </div>
       </div>
     </div>
@@ -186,30 +199,33 @@ export function LogosTable2Light() {
           <img
             src={UniversiteParisCiteLogoUrl}
             className={styles.customer_logo_light}
+            alt={"Logo of Paris Cité Université."}
+
+
           />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={AirbusLogoUrl} className={styles.customer_logo_light} />
+          <img src={AirbusLogoUrl} className={styles.customer_logo_light} alt={"Logo of Airbus company."} />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={INRIALogoUrl} className={styles.customer_logo_light} />
+          <img src={INRIALogoUrl} className={styles.customer_logo_light} alt={"Logo of INRIA."} />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={CNAMLogoUrl} className={styles.customer_logo_light} />
+          <img src={CNAMLogoUrl} className={styles.customer_logo_light} alt={"Logo of CNAM."}/>
         </div>
       </div>
       <div className="row row--no-gutters">
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={NatixisLogoUrl} className={styles.customer_logo_light} />
+          <img src={NatixisLogoUrl} className={styles.customer_logo_light} alt={"Logo of Natixis bank."} />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={NumfocusLogoUrl} className={styles.customer_logo_light} />
+          <img src={NumfocusLogoUrl} className={styles.customer_logo_light} alt={"Logo of Numfocus foundation."} />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={RobocorpLogoUrl} className={styles.customer_logo_light} />
+          <img src={RobocorpLogoUrl} className={styles.customer_logo_light} alt={"Logo of Robocorp company."} />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={CalPolyLogoUrl} className={styles.customer_logo_light} />
+          <img src={CalPolyLogoUrl} className={styles.customer_logo_light} alt={"Logo of CalPoly University."} />
         </div>
       </div>
     </div>
@@ -259,39 +275,41 @@ export function LogosTable3Light() {
     <div className={"container" + " " + styles.table_with_8_customers}>
       <div className="row row--no-gutters">
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={MaxFordhamLogoUrl} className={styles.customer_logo_light} />
+          <img src={MaxFordhamLogoUrl} className={styles.customer_logo_light} alt={"Logo of MaxFordham company."} />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
           <img
             src={GainTheoryUrl}
             className={styles.customer_logo_light}
+            alt={"Logo of Gain Theory company."}
             style={{ width: "60px" }}
           />
         </div>
 
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={EnthoughtLogoUrl} className={styles.customer_logo_light} />
+          <img src={EnthoughtLogoUrl} className={styles.customer_logo_light} alt={"Logo of Enthought company."} />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={CressetLogoUrl} className={styles.customer_logo_light} />
+          <img src={CressetLogoUrl} className={styles.customer_logo_light} alt={"Logo of Cresset company."} />
         </div>
       </div>
       <div className="row row--no-gutters">
         <div className={"col col--3" + " " + "flex-full-centered"}>
           <img
             src={TDKLogoUrl}
             className={styles.customer_logo_light}
+            alt={"Logo of TDK company."}
             style={{ width: "60px" }}
           />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={HarvardLogoUrl} className={styles.customer_logo_light} />
+          <img src={HarvardLogoUrl} className={styles.customer_logo_light} alt={"Logo of Harvard University."} />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={EMBLLogoUrl} className={styles.customer_logo_light} />
+          <img src={EMBLLogoUrl} className={styles.customer_logo_light} alt={"Logo of EMBL."}/>
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={QuantCoUrl} className={styles.customer_logo_light} />
+          <img src={QuantCoUrl} className={styles.customer_logo_light} alt={"Logo of QuantCo company."}/>
         </div>
       </div>
     </div>
@@ -350,19 +368,21 @@ export function LogosTable4Light() {
           <img
             src={VoltronDataLogoUrl}
             className={styles.customer_logo_light}
+            alt={"Logo of Voltron Data company."}
             style={{ width: "140px" }}
           />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={SafranLogoUrl} className={styles.customer_logo_light} />
+          <img src={SafranLogoUrl} className={styles.customer_logo_light} alt={"Logo of Safran company."} />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
-          <img src={DEShawLogoUrl} className={styles.customer_logo_light} />
+          <img src={DEShawLogoUrl} className={styles.customer_logo_light} alt={"Logo of DE Shaw company."} />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
           <img
             src={UniversiteParisSaclayLogoUrl}
             className={styles.customer_logo_light}
+            alt={"Logo of Université Paris Saclay."}
           />
         </div>
       </div>
@@ -371,19 +391,22 @@ export function LogosTable4Light() {
           <img
             src={UnitedRoboticsLogoUrl}
             className={styles.customer_logo_light}
+            alt={"Logo of United Robotics company."}
           />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
           <img
             src={CEALogoUrl}
             className={styles.customer_logo_light}
             style={{ width: "60px" }}
+            alt={"Logo of CEA."}
           />
         </div>
         <div className={"col col--3" + " " + "flex-full-centered"}>
           <img
             src={EcolePolytechniqueLogoUrl}
             className={styles.customer_logo_light}
+            alt={"Logo of Ecole Polytechnique."}
             style={{ width: "80px" }}
           />
         </div>

diff --git a/src/components/home/Hero/index.tsx b/src/components/home/Hero/index.tsx
@@ -3,12 +3,13 @@ import SimpleSlider from "./LogosTableBy8";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import ThemedImage from "@theme/ThemedImage";
 import { useEffect, useState } from "react";
+/*import Astronaut from "/img/quantstack/astronaut-light.svg";*/
 
 
 export function Astronaut() {
   return (
     <ThemedImage
-      alt="Astronaut logo of QuantStack"
+      alt="Astronaut mascot of QuantStack"
       sources={{
         light: useBaseUrl("/img/quantstack/astronaut-light.svg"),
         dark: useBaseUrl("/img/quantstack/astronaut-dark.svg"),
@@ -45,7 +46,7 @@ export function HeroDesktop() {
                 "col col--3 col--offset-1" + " " + styles.astronaut_column
               }
             >
-              <Astronaut />
+              <Astronaut/>
             </div>
           </div>
         </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ export default function LinkToWTJ({label}) { @@
           <Link
             className={"link-to-button" + " " + styles.link_to_WTJ}
             href="https://www.welcometothejungle.com/fr/companies/quantstack"
+            aria-label="Learn more by visiting the page dedicated to QuantStack on Welcome to the Jungle platform."
           >
             {label}
           </Link>
@@ Expand Down @@