From e12ff6a67a196da14562bf39d47f84cfccbf901e Mon Sep 17 00:00:00 2001
From: caseymm <casey@bocoup.com>
Date: Tue, 19 Oct 2021 14:27:34 -0700
Subject: [PATCH] lots of alt text for images in the main page

---
 .../annual-report/2020/annual-report.jsx      | 156 ++++++++++++++----
 src/views/annual-report/2020/l10n.json        |  30 +++-
 2 files changed, 154 insertions(+), 32 deletions(-)

diff --git a/src/views/annual-report/2020/annual-report.jsx b/src/views/annual-report/2020/annual-report.jsx
index 41b62c936..cd8082915 100644
--- a/src/views/annual-report/2020/annual-report.jsx
+++ b/src/views/annual-report/2020/annual-report.jsx
@@ -338,19 +338,26 @@ class AnnualReport extends React.Component {
                                         <FormattedMessage id="annualReport.2020.mastheadTitle" />
                                     </h1>
                                 </div>
-                                <img src="/images/annual-report/2020/founders-message/Masthead_Illustration.svg" />
+                                <img
+                                    src="/images/annual-report/2020/founders-message/Masthead_Illustration.svg"
+                                    alt={this.props.intl.formatMessage({id: 'annualReport.2020.altMastheadIllustration'})}
+                                />
                             </FlexRow>
                             <MediaQuery minWidth={frameless.desktop}>
                                 <img
                                     className="wave-icon-desktop"
-                                    src="/images/annual-report/message/wave-icon.svg"
+                                    src="/images/annual-report/2020/founders-message/Wave_Icon.svg"
+                                    alt={this.props.intl.formatMessage({id: 'annualReport.2020.altWave'})}
                                 />
                             </MediaQuery>
                             <FlexRow className="message-content">
                                 <MediaQuery maxWidth={frameless.desktop - 1}>
                                     {/* Show the wave icon inside this div in smaller screens */}
                                     <div className="wave-icon-and-title">
-                                        <img src="/images/annual-report/2020/founders-message/Wave_Icon.svg" />
+                                        <img
+                                            src="/images/annual-report/2020/founders-message/Wave_Icon.svg"
+                                            alt={this.props.intl.formatMessage({id: 'annualReport.2020.altWave'})}
+                                        />
                                         <h2>
                                             <FormattedMessage id="annualReport.2020.foundersMessageTitle" />
                                         </h2>
@@ -381,6 +388,7 @@ class AnnualReport extends React.Component {
                                         <img
                                             className="mitch-photo"
                                             src="/images/annual-report/2020/founders-message/mitch_headshot.jpg"
+                                            alt={this.props.intl.formatMessage({id: 'annualReport.2020.altMitchHeadshot'})}
                                         />
                                         <div className="signature-container">
                                             <p className="message-signature">
@@ -398,8 +406,14 @@ class AnnualReport extends React.Component {
                             </FlexRow>
                         </div>
                         <div className="transition-images">
-                            <img src="/images/annual-report/message/blocks.svg" />
-                            <img src="/images/annual-report/message/banana.svg" />
+                            <img
+                                src="/images/annual-report/message/blocks.svg"
+                                alt={this.props.intl.formatMessage({id: 'annualReport.2020.altBlocks'})}
+                            />
+                            <img
+                                src="/images/annual-report/message/banana.svg"
+                                alt={this.props.intl.formatMessage({id: 'annualReport.2020.altBanana'})}
+                            />
                         </div>
                     </div>
                     <div
@@ -442,7 +456,10 @@ class AnnualReport extends React.Component {
                                             <FormattedMessage id="annualReport.2020.missionProjectsDescription" />
                                         </p>
                                     </div>
-                                    <img src="/images/annual-report/mission/Projects Illustration.svg" />
+                                    <img
+                                        src="/images/annual-report/mission/Projects Illustration.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altProjectsIllustration'})}
+                                    />
                                 </div>
                             </MediaQuery>
                             <MediaQuery
@@ -454,7 +471,10 @@ class AnnualReport extends React.Component {
                                     <p><FormattedMessage id="annualReport.2020.missionProjectsDescription" /></p>
                                 </div>
                                 <div className="small-p four-ps-projects">
-                                    <img src="/images/annual-report/mission/Projects Illustration.svg" />
+                                    <img
+                                        src="/images/annual-report/mission/Projects Illustration.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altProjectsIllustration'})}
+                                    />
                                 </div>
                             </MediaQuery>
                             <MediaQuery minWidth={frameless.tabletPortrait}>
@@ -463,7 +483,10 @@ class AnnualReport extends React.Component {
                                         <h3><FormattedMessage id="annualReport.2020.missionPassionTitle" /></h3>
                                         <p><FormattedMessage id="annualReport.2020.missionPassionDescription" /></p>
                                     </div>
-                                    <img src="/images/annual-report/mission/Passion Illustration.svg" />
+                                    <img
+                                        src="/images/annual-report/mission/Passion Illustration.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altPassionIllustration'})}
+                                    />
                                 </div>
                             </MediaQuery>
                             <MediaQuery
@@ -477,7 +500,10 @@ class AnnualReport extends React.Component {
                                     </p>
                                 </div>
                                 <div className="small-p four-ps-passion">
-                                    <img src="/images/annual-report/mission/Passion Illustration.svg" />
+                                    <img
+                                        src="/images/annual-report/mission/Passion Illustration.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altPassionIllustration'})}
+                                    />
                                 </div>
                             </MediaQuery>
                             <MediaQuery minWidth={frameless.tabletPortrait}>
@@ -486,7 +512,10 @@ class AnnualReport extends React.Component {
                                         <h3><FormattedMessage id="annualReport.2020.missionPeersTitle" /></h3>
                                         <p><FormattedMessage id="annualReport.2020.missionPeersDescription" /></p>
                                     </div>
-                                    <img src="/images/annual-report/mission/Peers Illustration.svg" />
+                                    <img
+                                        src="/images/annual-report/mission/Peers Illustration.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altPeersIllustration'})}
+                                    />
                                 </div>
                             </MediaQuery>
                             <MediaQuery
@@ -498,7 +527,10 @@ class AnnualReport extends React.Component {
                                     <p><FormattedMessage id="annualReport.2020.missionPeersDescription" /></p>
                                 </div>
                                 <div className="small-p four-ps-peers">
-                                    <img src="/images/annual-report/mission/Peers Illustration.svg" />
+                                    <img
+                                        src="/images/annual-report/mission/Peers Illustration.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altPeersIllustration'})}
+                                    />
                                 </div>
                             </MediaQuery>
                             <MediaQuery minWidth={frameless.tabletPortrait}>
@@ -507,7 +539,10 @@ class AnnualReport extends React.Component {
                                         <h3><FormattedMessage id="annualReport.2020.missionPlayTitle" /></h3>
                                         <p><FormattedMessage id="annualReport.2020.missionPlayDescription" /></p>
                                     </div>
-                                    <img src="/images/annual-report/mission/Play Illustration.svg" />
+                                    <img
+                                        src="/images/annual-report/mission/Play Illustration.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altPlayIllustration'})}
+                                    />
                                 </div>
                             </MediaQuery>
                             <MediaQuery
@@ -519,7 +554,10 @@ class AnnualReport extends React.Component {
                                     <p><FormattedMessage id="annualReport.2020.missionPlayDescription" /></p>
                                 </div>
                                 <div className="small-p four-ps-play">
-                                    <img src="/images/annual-report/mission/Play Illustration.svg" />
+                                    <img
+                                        src="/images/annual-report/mission/Play Illustration.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altPlayIllustration'})}
+                                    />
                                 </div>
                             </MediaQuery>
                         </div>
@@ -538,7 +576,10 @@ class AnnualReport extends React.Component {
                                         <FormattedMessage id="annualReport.2020.reachSubtitle" />
                                     </p>
                                 </div>
-                                <img src="/images/annual-report/2020/data/Calendar.svg" />
+                                <img
+                                    src="/images/annual-report/2020/data/Calendar.svg"
+                                    alt={this.props.intl.formatMessage({id: 'annualReport.2020.altCalendar'})}
+                                />
                                 <div className="reach-numbers">
                                     <div className="reach-datapoint">
                                         <FormattedMessage
@@ -597,6 +638,7 @@ class AnnualReport extends React.Component {
                                     <img
                                         className="comment-viz"
                                         src="/images/annual-report/2020/data/Comments-visualization.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altCommentsVisualization'})}
                                     />
                                     <div className="reach-datapoint increase">
                                         <FormattedMessage
@@ -705,26 +747,38 @@ class AnnualReport extends React.Component {
                                         <FormattedMessage id="annualReport.2020.reachTranslationTitle" />
                                     </h3>
                                     <div className="inline">
-                                        <img src="/images/annual-report/2020/Symbols-UI/Arrow_up.svg" />
+                                        <img
+                                            src="/images/annual-report/2020/Symbols-UI/Arrow_up.svg"
+                                            alt={this.props.intl.formatMessage({id: 'annualReport.2020.altArrowUp'})}
+                                        />
                                         <FormattedMessage id="annualReport.2020.reachTranslationIncrease" />
                                     </div>
                                     <p>
                                         <FormattedMessage id="annualReport.2020.reachTranslationBlurb" />
                                     </p>
                                 </div>
-                                <img src="/images/annual-report/2020/data/translated-illustration.svg" />
+                                <img
+                                    src="/images/annual-report/2020/data/translated-illustration.svg"
+                                    alt={this.props.intl.formatMessage({id: 'annualReport.2020.altTranslated'})}
+                                />
                             </div>
                         </div>
                         <MediaQuery minWidth={frameless.mobile}>
                             <div className="scratch-jr-transition-img">
-                                <img src="/images/annual-report/reach/horizontal-command.svg" />
+                                <img
+                                    src="/images/annual-report/reach/horizontal-command.svg"
+                                    alt={this.props.intl.formatMessage({id: 'annualReport.2020.altScratchHorizontalCommand'})}
+                                />
                             </div>
                         </MediaQuery>
                     </div>
                     <div className="reach-scratch-jr">
                         <div className="inner">
                             <div className="scratch-jr-intro">
-                                <img src="/images/annual-report/2020/data/ScratchJr_Logo.svg" />
+                                <img
+                                    src="/images/annual-report/2020/data/ScratchJr_Logo.svg"
+                                    alt={this.props.intl.formatMessage({id: 'annualReport.2020.altScratchJr'})}
+                                />
                                 <p>
                                     <FormattedMessage id="annualReport.2020.reachScratchJrBlurb" />
                                 </p>
@@ -759,7 +813,10 @@ class AnnualReport extends React.Component {
                         </div>
                         <MediaQuery minWidth={frameless.mobile}>
                             <div className="scratch-jr-transition-img">
-                                <img src="/images/annual-report/reach/horizontal-loop.svg" />
+                                <img
+                                    src="/images/annual-report/reach/horizontal-loop.svg"
+                                    alt={this.props.intl.formatMessage({id: 'annualReport.2020.altHorizontalLoop'})}
+                                />
                             </div>
                         </MediaQuery>
                     </div>
@@ -843,7 +900,10 @@ class AnnualReport extends React.Component {
                                         <FormattedMessage id="annualReport.2020.connectivityIndiaParagraph" />
                                     </p>
                                     <div className="content around">
-                                        <img src="/images/annual-report/2020/connectivity/India_Data/data_projectscreatedonline_graphic.svg" />
+                                        <img
+                                            src="/images/annual-report/2020/connectivity/India_Data/data_projectscreatedonline_graphic.svg"
+                                            alt={this.props.intl.formatMessage({id: 'annualReport.2020.altPieChart'})}
+                                        />
                                         <div className="india-numbers">
                                             <h2>
                                                 <FormattedMessage
@@ -874,7 +934,10 @@ class AnnualReport extends React.Component {
                                                 <FormattedMessage id="annualReport.2020.connectivityRegistedUsersNumbers" />
                                             </p>
                                         </div>
-                                        <img src="/images/annual-report/2020/connectivity/India_Data/data_alltimeusers_graphic.svg" />
+                                        <img
+                                            src="/images/annual-report/2020/connectivity/India_Data/data_alltimeusers_graphic.svg"
+                                            alt={this.props.intl.formatMessage({id: 'annualReport.2020.altUsers'})}
+                                        />
                                     </div>
                                     <div className="content around users">
                                         <div className="stats">
@@ -896,7 +959,10 @@ class AnnualReport extends React.Component {
                                                         )
                                                     }}
                                                 />
-                                                <img src="/images/annual-report/2020/Symbols-UI/Arrow_Next_purple.svg" />
+                                                <img
+                                                    src="/images/annual-report/2020/Symbols-UI/Arrow_Next_purple.svg"
+                                                    alt={this.props.intl.formatMessage({id: 'annualReport.2020.altArrowNext'})}
+                                                />
                                                 <FormattedMessage
                                                     id="annualReport.2020.connectivityIndiaUsersNew"
                                                     values={{
@@ -921,7 +987,10 @@ class AnnualReport extends React.Component {
                                                 <FormattedMessage
                                                     id="annualReport.2020.connectivityIndiaProjectsOld"
                                                 />
-                                                <img src="/images/annual-report/2020/Symbols-UI/Arrow_Next_purple.svg" />
+                                                <img
+                                                    src="/images/annual-report/2020/Symbols-UI/Arrow_Next_purple.svg"
+                                                    alt={this.props.intl.formatMessage({id: 'annualReport.2020.altArrowNext'})}
+                                                />
                                                 <FormattedMessage
                                                     id="annualReport.2020.connectivityIndiaProjectsNew"
                                                     values={{
@@ -1114,7 +1183,7 @@ class AnnualReport extends React.Component {
                                 <div className="community-quote">
                                     <div className="quote-person">
                                         <Avatar
-                                            alt=""
+                                            alt={this.props.intl.formatMessage({id: 'annualReport.2020.altBenedict'})}
                                             src="/images/annual-report/2020/adaptation/quote_benedikthochwartner.svg"
                                         />
                                         <div>
@@ -1152,7 +1221,10 @@ class AnnualReport extends React.Component {
                                             </p>
                                         </div>
                                         <div className="images">
-                                            <img src="/images/annual-report/2020/adaptation/Aaron Reuland Illustration_Photo.svg" />
+                                            <img
+                                                src="/images/annual-report/2020/adaptation/Aaron Reuland Illustration_Photo.svg"
+                                                alt={this.props.intl.formatMessage({id: 'annualReport.2020.altAaronReuland'})}
+                                            />
                                         </div>
                                     </div>
                                     <div className="flex-content">
@@ -1324,8 +1396,14 @@ class AnnualReport extends React.Component {
                                         </p>
                                     </div>
                                     <div className="bg-image-container">
-                                        <img src="/images/annual-report/2020/community/Creative Computing Sprinkles left.svg" />
-                                        <img src="/images/annual-report/2020/community/Creative Computing Sprinkles right.svg" />
+                                        <img
+                                            src="/images/annual-report/2020/community/Creative Computing Sprinkles left.svg"
+                                            alt={this.props.intl.formatMessage({id: 'annualReport.2020.altSprinklesLeft'})}
+                                        />
+                                        <img
+                                            src="/images/annual-report/2020/community/Creative Computing Sprinkles right.svg"
+                                            alt={this.props.intl.formatMessage({id: 'annualReport.2020.altSprinklesRight'})}
+                                        />
                                     </div>
                                     <div className="iframe-holder">
                                         <iframe
@@ -1344,7 +1422,10 @@ class AnnualReport extends React.Component {
                                         href="https://drive.google.com/file/d/1Kpwf4vN5I6SYY3l941v0IsP_tHVasuXW/view"
                                     >
                                         <span>Virtual Family Coding Nights Guide</span>
-                                        <img src="/images/annual-report/2020/Symbols-UI/File Download.svg" />
+                                        <img
+                                            src="/images/annual-report/2020/Symbols-UI/File Download.svg"
+                                            alt={this.props.intl.formatMessage({id: 'annualReport.2020.altFileDownload'})}
+                                        />
                                     </a>
 
                                     <div className="community-quotes">
@@ -1380,8 +1461,14 @@ class AnnualReport extends React.Component {
                                     </h2>
                                 </div>
                                 <div className="background-community-images">
-                                    <img src="/images/annual-report/2020/community/Online Community Illustration Wave.svg" />
-                                    <img src="/images/annual-report/2020/community/Online Community Illustration.svg" />
+                                    <img
+                                        src="/images/annual-report/2020/community/Online Community Illustration Wave.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altWaveTop'})}
+                                    />
+                                    <img
+                                        src="/images/annual-report/2020/community/Online Community Illustration.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altWaveBottom'})}
+                                    />
                                 </div>
                                 <div className="inner center">
                                     <p>
@@ -1431,7 +1518,7 @@ class AnnualReport extends React.Component {
                                         <div className="community-quote">
                                             <div className="quote-person">
                                                 <Avatar
-                                                    alt="qood"
+                                                    alt="qood avatar"
                                                     src="/images/annual-report/2020/community/avatar_qood.jpg"
                                                 />
                                                 <div>
@@ -1474,6 +1561,7 @@ class AnnualReport extends React.Component {
                                     <img
                                         className="upper-wave"
                                         src="/images/annual-report/2020/community/Timeline/Wave (upper).svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altWaveBottom'})}
                                     />
                                     <div className="inner center yr">
                                         <h2>
@@ -1503,6 +1591,7 @@ class AnnualReport extends React.Component {
                                     <img
                                         className="connector left"
                                         src="/images/annual-report/2020/community/Timeline/lines/jan_apr_line.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altConnectingLine'})}
                                     />
                                     <TimelineCard
                                         className="left"
@@ -1538,6 +1627,7 @@ class AnnualReport extends React.Component {
                                     <img
                                         className="connector"
                                         src="/images/annual-report/2020/community/Timeline/lines/apr_may_line.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altConnectingLine'})}
                                     />
                                     <TimelineCard
                                         className="right"
@@ -1574,6 +1664,7 @@ class AnnualReport extends React.Component {
                                     <img
                                         className="connector"
                                         src="/images/annual-report/2020/community/Timeline/lines/may_jun_line.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altConnectingLine'})}
                                     />
                                     <TimelineCard
                                         className="left"
@@ -1610,6 +1701,7 @@ class AnnualReport extends React.Component {
                                     <img
                                         className="connector"
                                         src="/images/annual-report/2020/community/Timeline/lines/jun_jul_line.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altConnectingLine'})}
                                     />
                                     <TimelineCard
                                         className="right"
@@ -1631,6 +1723,7 @@ class AnnualReport extends React.Component {
                                     <img
                                         className="connector right"
                                         src="/images/annual-report/2020/community/Timeline/lines/jul_oct_line.svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altConnectingLine'})}
                                     />
                                     <TimelineCard
                                         className="center"
@@ -1670,6 +1763,7 @@ class AnnualReport extends React.Component {
                                     <img
                                         className="lower-wave"
                                         src="/images/annual-report/2020/community/Timeline/Wave (lower).svg"
+                                        alt={this.props.intl.formatMessage({id: 'annualReport.2020.altWaveBottom'})}
                                     />
                                 </div>
                                 <div className="initiatives-subsection-content">
diff --git a/src/views/annual-report/2020/l10n.json b/src/views/annual-report/2020/l10n.json
index 709670886..394d23f50 100644
--- a/src/views/annual-report/2020/l10n.json
+++ b/src/views/annual-report/2020/l10n.json
@@ -312,5 +312,33 @@
     "annualReport.2020.altProjectsIllustration": "Three children, one standing, one sitting in a wheelchair, and one sitting on the ground paint and cut art projects.",
     "annualReport.2020.altPassionIllustration": "Three children, one standing, one kneeling, and one sitting on the ground paint, play music on a piano, and stargaze using a telescope.",
     "annualReport.2020.altPeersIllustration": "Four childeren sit around a campfire playing games and high fiving.",
-    "annualReport.2020.altPlayIllustration": "Three children, one standing, one kneeling, and one sitting crosslegged stack rocks, play with toy boats, and fold origami."
+    "annualReport.2020.altPlayIllustration": "Three children, one standing, one kneeling, and one sitting crosslegged stack rocks, play with toy boats, and fold origami.",
+    "annualReport.2020.altCalendar": "A calendar displaying the year 2020.",
+    "annualReport.2020.altCommentsVisualization": "Two comment bubbles. One smaller and darker representing the share of comments in 2019. One lighter representing the increase in comments made in 2020.",
+    "annualReport.2020.altArrowUp": "An arrow pointing up and to the right.",
+    "annualReport.2020.altTranslated": "A scratch component saying \"Hello\" and listing languages that scratch is available in.",
+    "annualReport.2020.altScratchHorizontalCommand": "A scratch horizontal command component.",
+    "annualReport.2020.altScratchJr": "Scratch Jr logo",
+    "annualReport.2020.altHorizontalLoop": "Scratch horizontal loop component.",
+    "annualReport.2020.altPieChart": "Visualization showing the 602% increase in projects created during 2020 in relation to projects created in 2019.",
+    "annualReport.2020.altUsers": "Two generic user icons, a slightly smaller gray one and a slightly larger purple one.",
+    "annualReport.2020.altArrowNext": "An arrow pointing to the right.",
+    "annualReport.2020.altBenedict": "Avatar for Benedikt Hochwartner",
+    "annualReport.2020.altAaronReuland": "Aaron Reuland imopsed over a paper bag puppet and illustration of a flying turtle.",
+    "annualReport.2020.altSprinklesLeft": "A smiley face, scratch component, and heart displayed on a phone.",
+    "annualReport.2020.altSprinklesRight": "A hand interacting with scratch components.",
+    "annualReport.2020.altFileDownload": "An arrow pointing into a basket indicating that a file can be downloaded.",
+    "annualReport.2020.altWaveTop": "A light blue wave covered with scratch avatars and scratch components.",
+    "annualReport.2020.altWaveBottom": "A light blue wave.",
+    "annualReport.2020.altConnectingLine": "A dotted line connecting the months",
+    "annualReport.2020.altApril": "A pen and pencil drawing on a scratch project depicting a boat and water.",
+    "annualReport.2020.altMay": "A calendar marked with emojis placed on a bubble.",
+    "annualReport.2020.altJune": "The Juneteenth flag and a paper airplane.",
+    "annualReport.2020.altJuly": "A microphone and music notes.",
+    "annualReport.2020.altToolsIllustration": "A hand touching an exclamation point icon above a few text bubbles.",
+    "annualReport.2020.altVirtualTown": "A girl runs along a sidewalk in front of a few houses.",
+    "annualReport.2020.altCatchGame": "An apple floats on the horizon to the right while a basket sits below toward the center of the frame.",
+    "annualReport.2020.altCharacterDesigner": "A dog sits in front of a green and white chevron background.",
+    "annualReport.2020.altVirtualPet": "A hedgehog sits on top of a rock in the middle of some grass.",
+    "annualReport.2020.altLookingForward": "A watering tree waters a sapling that grows into a tall tree."
 }