scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-12-11 16:21:04 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

lots of alt text for images in the main page

Browse source
This commit is contained in:
caseymm 2021-10-19 14:27:34 -07:00
parent dbd5005cee
commit e12ff6a67a
2 changed files with 154 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

156
src/views/annual-report/2020/annual-report.jsx
View file

@ -338,19 +338,26 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2020.mastheadTitle" /> <FormattedMessage id="annualReport.2020.mastheadTitle" />
</h1> </h1>
</div> </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> </FlexRow>
<MediaQuery minWidth={frameless.desktop}> <MediaQuery minWidth={frameless.desktop}>
<img <img
className="wave-icon-desktop" 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> </MediaQuery>
<FlexRow className="message-content"> <FlexRow className="message-content">
<MediaQuery maxWidth={frameless.desktop - 1}> <MediaQuery maxWidth={frameless.desktop - 1}>
{/* Show the wave icon inside this div in smaller screens */} {/* Show the wave icon inside this div in smaller screens */}
<div className="wave-icon-and-title"> <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> <h2>
<FormattedMessage id="annualReport.2020.foundersMessageTitle" /> <FormattedMessage id="annualReport.2020.foundersMessageTitle" />
</h2> </h2>
@ -381,6 +388,7 @@ class AnnualReport extends React.Component {
<img <img
className="mitch-photo" className="mitch-photo"
src="/images/annual-report/2020/founders-message/mitch_headshot.jpg" src="/images/annual-report/2020/founders-message/mitch_headshot.jpg"
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altMitchHeadshot'})}
/> />
<div className="signature-container"> <div className="signature-container">
<p className="message-signature"> <p className="message-signature">
@ -398,8 +406,14 @@ class AnnualReport extends React.Component {
</FlexRow> </FlexRow>
</div> </div>
<div className="transition-images"> <div className="transition-images">
<img src="/images/annual-report/message/blocks.svg" /> <img
<img src="/images/annual-report/message/banana.svg" /> 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> </div>
<div <div
@ -442,7 +456,10 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2020.missionProjectsDescription" /> <FormattedMessage id="annualReport.2020.missionProjectsDescription" />
</p> </p>
</div> </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> </div>
</MediaQuery> </MediaQuery>
<MediaQuery <MediaQuery
@ -454,7 +471,10 @@ class AnnualReport extends React.Component {
<p><FormattedMessage id="annualReport.2020.missionProjectsDescription" /></p> <p><FormattedMessage id="annualReport.2020.missionProjectsDescription" /></p>
</div> </div>
<div className="small-p four-ps-projects"> <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> </div>
</MediaQuery> </MediaQuery>
<MediaQuery minWidth={frameless.tabletPortrait}> <MediaQuery minWidth={frameless.tabletPortrait}>
@ -463,7 +483,10 @@ class AnnualReport extends React.Component {
<h3><FormattedMessage id="annualReport.2020.missionPassionTitle" /></h3> <h3><FormattedMessage id="annualReport.2020.missionPassionTitle" /></h3>
<p><FormattedMessage id="annualReport.2020.missionPassionDescription" /></p> <p><FormattedMessage id="annualReport.2020.missionPassionDescription" /></p>
</div> </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> </div>
</MediaQuery> </MediaQuery>
<MediaQuery <MediaQuery
@ -477,7 +500,10 @@ class AnnualReport extends React.Component {
</p> </p>
</div> </div>
<div className="small-p four-ps-passion"> <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> </div>
</MediaQuery> </MediaQuery>
<MediaQuery minWidth={frameless.tabletPortrait}> <MediaQuery minWidth={frameless.tabletPortrait}>
@ -486,7 +512,10 @@ class AnnualReport extends React.Component {
<h3><FormattedMessage id="annualReport.2020.missionPeersTitle" /></h3> <h3><FormattedMessage id="annualReport.2020.missionPeersTitle" /></h3>
<p><FormattedMessage id="annualReport.2020.missionPeersDescription" /></p> <p><FormattedMessage id="annualReport.2020.missionPeersDescription" /></p>
</div> </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> </div>
</MediaQuery> </MediaQuery>
<MediaQuery <MediaQuery
@ -498,7 +527,10 @@ class AnnualReport extends React.Component {
<p><FormattedMessage id="annualReport.2020.missionPeersDescription" /></p> <p><FormattedMessage id="annualReport.2020.missionPeersDescription" /></p>
</div> </div>
<div className="small-p four-ps-peers"> <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> </div>
</MediaQuery> </MediaQuery>
<MediaQuery minWidth={frameless.tabletPortrait}> <MediaQuery minWidth={frameless.tabletPortrait}>
@ -507,7 +539,10 @@ class AnnualReport extends React.Component {
<h3><FormattedMessage id="annualReport.2020.missionPlayTitle" /></h3> <h3><FormattedMessage id="annualReport.2020.missionPlayTitle" /></h3>
<p><FormattedMessage id="annualReport.2020.missionPlayDescription" /></p> <p><FormattedMessage id="annualReport.2020.missionPlayDescription" /></p>
</div> </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> </div>
</MediaQuery> </MediaQuery>
<MediaQuery <MediaQuery
@ -519,7 +554,10 @@ class AnnualReport extends React.Component {
<p><FormattedMessage id="annualReport.2020.missionPlayDescription" /></p> <p><FormattedMessage id="annualReport.2020.missionPlayDescription" /></p>
</div> </div>
<div className="small-p four-ps-play"> <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> </div>
</MediaQuery> </MediaQuery>
</div> </div>
@ -538,7 +576,10 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2020.reachSubtitle" /> <FormattedMessage id="annualReport.2020.reachSubtitle" />
</p> </p>
</div> </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-numbers">
<div className="reach-datapoint"> <div className="reach-datapoint">
<FormattedMessage <FormattedMessage
@ -597,6 +638,7 @@ class AnnualReport extends React.Component {
<img <img
className="comment-viz" className="comment-viz"
src="/images/annual-report/2020/data/Comments-visualization.svg" src="/images/annual-report/2020/data/Comments-visualization.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altCommentsVisualization'})}
/> />
<div className="reach-datapoint increase"> <div className="reach-datapoint increase">
<FormattedMessage <FormattedMessage
@ -705,26 +747,38 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2020.reachTranslationTitle" /> <FormattedMessage id="annualReport.2020.reachTranslationTitle" />
</h3> </h3>
<div className="inline"> <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" /> <FormattedMessage id="annualReport.2020.reachTranslationIncrease" />
</div> </div>
<p> <p>
<FormattedMessage id="annualReport.2020.reachTranslationBlurb" /> <FormattedMessage id="annualReport.2020.reachTranslationBlurb" />
</p> </p>
</div> </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>
</div> </div>
<MediaQuery minWidth={frameless.mobile}> <MediaQuery minWidth={frameless.mobile}>
<div className="scratch-jr-transition-img"> <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> </div>
</MediaQuery> </MediaQuery>
</div> </div>
<div className="reach-scratch-jr"> <div className="reach-scratch-jr">
<div className="inner"> <div className="inner">
<div className="scratch-jr-intro"> <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> <p>
<FormattedMessage id="annualReport.2020.reachScratchJrBlurb" /> <FormattedMessage id="annualReport.2020.reachScratchJrBlurb" />
</p> </p>
@ -759,7 +813,10 @@ class AnnualReport extends React.Component {
</div> </div>
<MediaQuery minWidth={frameless.mobile}> <MediaQuery minWidth={frameless.mobile}>
<div className="scratch-jr-transition-img"> <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> </div>
</MediaQuery> </MediaQuery>
</div> </div>
@ -843,7 +900,10 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2020.connectivityIndiaParagraph" /> <FormattedMessage id="annualReport.2020.connectivityIndiaParagraph" />
</p> </p>
<div className="content around"> <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"> <div className="india-numbers">
<h2> <h2>
<FormattedMessage <FormattedMessage
@ -874,7 +934,10 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2020.connectivityRegistedUsersNumbers" /> <FormattedMessage id="annualReport.2020.connectivityRegistedUsersNumbers" />
</p> </p>
</div> </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>
<div className="content around users"> <div className="content around users">
<div className="stats"> <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 <FormattedMessage
id="annualReport.2020.connectivityIndiaUsersNew" id="annualReport.2020.connectivityIndiaUsersNew"
values={{ values={{
@ -921,7 +987,10 @@ class AnnualReport extends React.Component {
<FormattedMessage <FormattedMessage
id="annualReport.2020.connectivityIndiaProjectsOld" 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 <FormattedMessage
id="annualReport.2020.connectivityIndiaProjectsNew" id="annualReport.2020.connectivityIndiaProjectsNew"
values={{ values={{
@ -1114,7 +1183,7 @@ class AnnualReport extends React.Component {
<div className="community-quote"> <div className="community-quote">
<div className="quote-person"> <div className="quote-person">
<Avatar <Avatar
alt="" alt={this.props.intl.formatMessage({id: 'annualReport.2020.altBenedict'})}
src="/images/annual-report/2020/adaptation/quote_benedikthochwartner.svg" src="/images/annual-report/2020/adaptation/quote_benedikthochwartner.svg"
/> />
<div> <div>
@ -1152,7 +1221,10 @@ class AnnualReport extends React.Component {
</p> </p>
</div> </div>
<div className="images"> <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> </div>
<div className="flex-content"> <div className="flex-content">
@ -1324,8 +1396,14 @@ class AnnualReport extends React.Component {
</p> </p>
</div> </div>
<div className="bg-image-container"> <div className="bg-image-container">
<img src="/images/annual-report/2020/community/Creative Computing Sprinkles left.svg" /> <img
<img src="/images/annual-report/2020/community/Creative Computing Sprinkles right.svg" /> 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>
<div className="iframe-holder"> <div className="iframe-holder">
<iframe <iframe
@ -1344,7 +1422,10 @@ class AnnualReport extends React.Component {
href="https://drive.google.com/file/d/1Kpwf4vN5I6SYY3l941v0IsP_tHVasuXW/view" href="https://drive.google.com/file/d/1Kpwf4vN5I6SYY3l941v0IsP_tHVasuXW/view"
> >
<span>Virtual Family Coding Nights Guide</span> <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> </a>
<div className="community-quotes"> <div className="community-quotes">
@ -1380,8 +1461,14 @@ class AnnualReport extends React.Component {
</h2> </h2>
</div> </div>
<div className="background-community-images"> <div className="background-community-images">
<img src="/images/annual-report/2020/community/Online Community Illustration Wave.svg" /> <img
<img src="/images/annual-report/2020/community/Online Community Illustration.svg" /> 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>
<div className="inner center"> <div className="inner center">
<p> <p>
@ -1431,7 +1518,7 @@ class AnnualReport extends React.Component {
<div className="community-quote"> <div className="community-quote">
<div className="quote-person"> <div className="quote-person">
<Avatar <Avatar
alt="qood" alt="qood avatar"
src="/images/annual-report/2020/community/avatar_qood.jpg" src="/images/annual-report/2020/community/avatar_qood.jpg"
/> />
<div> <div>
@ -1474,6 +1561,7 @@ class AnnualReport extends React.Component {
<img <img
className="upper-wave" className="upper-wave"
src="/images/annual-report/2020/community/Timeline/Wave (upper).svg" src="/images/annual-report/2020/community/Timeline/Wave (upper).svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altWaveBottom'})}
/> />
<div className="inner center yr"> <div className="inner center yr">
<h2> <h2>
@ -1503,6 +1591,7 @@ class AnnualReport extends React.Component {
<img <img
className="connector left" className="connector left"
src="/images/annual-report/2020/community/Timeline/lines/jan_apr_line.svg" src="/images/annual-report/2020/community/Timeline/lines/jan_apr_line.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altConnectingLine'})}
/> />
<TimelineCard <TimelineCard
className="left" className="left"
@ -1538,6 +1627,7 @@ class AnnualReport extends React.Component {
<img <img
className="connector" className="connector"
src="/images/annual-report/2020/community/Timeline/lines/apr_may_line.svg" src="/images/annual-report/2020/community/Timeline/lines/apr_may_line.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altConnectingLine'})}
/> />
<TimelineCard <TimelineCard
className="right" className="right"
@ -1574,6 +1664,7 @@ class AnnualReport extends React.Component {
<img <img
className="connector" className="connector"
src="/images/annual-report/2020/community/Timeline/lines/may_jun_line.svg" src="/images/annual-report/2020/community/Timeline/lines/may_jun_line.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altConnectingLine'})}
/> />
<TimelineCard <TimelineCard
className="left" className="left"
@ -1610,6 +1701,7 @@ class AnnualReport extends React.Component {
<img <img
className="connector" className="connector"
src="/images/annual-report/2020/community/Timeline/lines/jun_jul_line.svg" src="/images/annual-report/2020/community/Timeline/lines/jun_jul_line.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altConnectingLine'})}
/> />
<TimelineCard <TimelineCard
className="right" className="right"
@ -1631,6 +1723,7 @@ class AnnualReport extends React.Component {
<img <img
className="connector right" className="connector right"
src="/images/annual-report/2020/community/Timeline/lines/jul_oct_line.svg" src="/images/annual-report/2020/community/Timeline/lines/jul_oct_line.svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altConnectingLine'})}
/> />
<TimelineCard <TimelineCard
className="center" className="center"
@ -1670,6 +1763,7 @@ class AnnualReport extends React.Component {
<img <img
className="lower-wave" className="lower-wave"
src="/images/annual-report/2020/community/Timeline/Wave (lower).svg" src="/images/annual-report/2020/community/Timeline/Wave (lower).svg"
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altWaveBottom'})}
/> />
</div> </div>
<div className="initiatives-subsection-content"> <div className="initiatives-subsection-content">

30
src/views/annual-report/2020/l10n.json
View file

@ -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.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.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.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."
} }