mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 16:41:34 -05:00
adds alt-text descriptions to the Ideas page
Also mutes decorative icons in various buttons throughout the page.
This commit is contained in:
Chris Cuellar
parent
db523537a4
commit
363a9a4db2
5 changed files with 66 additions and 9 deletions
|
|
@ -20,7 +20,8 @@ const TTTModal = props => (
|
|||
'cardsUrl',
|
||||
'guideUrl',
|
||||
'thumbImage',
|
||||
'modalImage'
|
||||
'modalImage',
|
||||
'modalImageDescription'
|
||||
]
|
||||
)}
|
||||
>
|
||||
|
|
@ -29,7 +30,7 @@ const TTTModal = props => (
|
|||
<a href={props.tutorialUrl}>
|
||||
<div className="ttt-img-container">
|
||||
<img
|
||||
alt=""
|
||||
alt={props.modalImageDescription}
|
||||
className="mod-ttt-img"
|
||||
src={props.modalImage}
|
||||
/>
|
||||
|
|
@ -91,6 +92,7 @@ TTTModal.propTypes = {
|
|||
description: PropTypes.string.isRequired,
|
||||
guideUrl: PropTypes.string.isRequired,
|
||||
modalImage: PropTypes.string.isRequired,
|
||||
modalImageDescription: PropTypes.string,
|
||||
thumbImage: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
tutorialUrl: PropTypes.string.isRequired
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const TTTTile = props => (
|
|||
<div className="ttt-tile-tutorial">
|
||||
<div className="ttt-tile-image">
|
||||
<img
|
||||
alt=""
|
||||
alt={props.thumbImageDescription}
|
||||
className="ttt-tile-image-img"
|
||||
src={props.thumbImage}
|
||||
/>
|
||||
|
|
@ -33,6 +33,7 @@ TTTTile.propTypes = {
|
|||
description: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
thumbImage: PropTypes.string.isRequired,
|
||||
thumbImageDescription: PropTypes.string,
|
||||
title: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -49,9 +49,11 @@ class Ideas extends React.Component {
|
|||
const translatedTile = {
|
||||
tutorialUrl: `/projects/editor/?tutorial=${tile.tutorialUrl}`,
|
||||
modalImage: tile.modalImage,
|
||||
modalImageDescription: this.props.intl.formatMessage({id: tile.modalImageDescription}),
|
||||
description: this.props.intl.formatMessage({id: tile.description}),
|
||||
guideUrl: this.props.intl.formatMessage({id: tile.guideUrl}),
|
||||
thumbImage: tile.thumbImage,
|
||||
thumbImageDescription: this.props.intl.formatMessage({id: tile.thumbImageDescription}),
|
||||
title: this.props.intl.formatMessage({id: tile.title}),
|
||||
cardsUrl: this.props.intl.formatMessage({id: tile.cardsUrl})
|
||||
};
|
||||
|
|
@ -72,13 +74,19 @@ class Ideas extends React.Component {
|
|||
<div className="banner-wrapper">
|
||||
<TitleBanner className="masthead ideas-banner">
|
||||
<div className="title-banner-p">
|
||||
<img src="/images/ideas/masthead-illustration.svg" />
|
||||
<img
|
||||
alt={this.props.intl.formatMessage({id: 'ideas.headerImageDescription'})}
|
||||
src="/images/ideas/masthead-illustration.svg"
|
||||
/>
|
||||
<h1 className="title-banner-h1">
|
||||
<FormattedMessage id="ideas.headerMessage" />
|
||||
</h1>
|
||||
<a href="/projects/editor/?tutorial=all">
|
||||
<Button className="ideas-button">
|
||||
<img src="/images/ideas/bulb-icon.svg" />
|
||||
<img
|
||||
alt=""
|
||||
src="/images/ideas/bulb-icon.svg"
|
||||
/>
|
||||
<FormattedMessage id="ideas.headerButtonMessage" />
|
||||
</Button>
|
||||
</a>
|
||||
|
|
@ -92,7 +100,10 @@ class Ideas extends React.Component {
|
|||
className="tips-info-section tips-left"
|
||||
>
|
||||
<div className="ideas-image">
|
||||
<img src="/images/ideas/getting-started-illustration.svg" />
|
||||
<img
|
||||
alt={this.props.intl.formatMessage({id: 'ideas.gettingStartedImageDescription'})}
|
||||
src="/images/ideas/getting-started-illustration.svg"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h2>
|
||||
|
|
@ -103,7 +114,10 @@ class Ideas extends React.Component {
|
|||
</p>
|
||||
<a href="/projects/editor/?tutorial=getStarted">
|
||||
<Button className="ideas-button">
|
||||
<img src="/images/ideas/try-it-icon.svg" />
|
||||
<img
|
||||
alt=""
|
||||
src="/images/ideas/try-it-icon.svg"
|
||||
/>
|
||||
<FormattedMessage id="ideas.tryIt" />
|
||||
</Button>
|
||||
</a>
|
||||
|
|
@ -162,13 +176,19 @@ class Ideas extends React.Component {
|
|||
target="_blank"
|
||||
>
|
||||
<Button className="ideas-button">
|
||||
<img src="/images/ideas/download-icon.svg" />
|
||||
<img
|
||||
alt=""
|
||||
src="/images/ideas/download-icon.svg"
|
||||
/>
|
||||
<FormattedMessage id="general.downloadPDF" />
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
<div className="tips-info-body tips-illustration">
|
||||
<img src="/images/ideas/cards-illustration.svg" />
|
||||
<img
|
||||
alt={this.props.intl.formatMessage({id: 'ideas.cardsIllustrationDescription'})}
|
||||
src="/images/ideas/cards-illustration.svg"
|
||||
/>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</div>
|
||||
|
|
@ -184,6 +204,7 @@ class Ideas extends React.Component {
|
|||
>
|
||||
<div className="ideas-image">
|
||||
<img
|
||||
alt={this.props.intl.formatMessage({id: 'ideas.starterProjectsImageDescription'})}
|
||||
src="/images/ideas/starter-projects-illustration.svg"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -214,6 +235,7 @@ class Ideas extends React.Component {
|
|||
<div className="tips-info-body mod-narrow">
|
||||
<img
|
||||
className="tips-icon"
|
||||
alt=""
|
||||
src="/images/tips/download-icon.svg"
|
||||
/>
|
||||
<h3>
|
||||
|
|
@ -226,6 +248,7 @@ class Ideas extends React.Component {
|
|||
<div className="tips-info-body mod-narrow">
|
||||
<img
|
||||
className="tips-icon"
|
||||
alt=""
|
||||
src="/images/tips/question-icon.svg"
|
||||
/>
|
||||
<h3>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,38 @@
|
|||
{
|
||||
"ideas.headerMessage": "What will you create?",
|
||||
"ideas.headerImageDescription": "Outlandish creations from pixelated unicorns to drumbeat waveforms to levitating tacos to buckets of rainbows.",
|
||||
"ideas.headerButtonMessage": "Choose a tutorial",
|
||||
"ideas.gettingStartedTitle": "Getting Started",
|
||||
"ideas.gettingStartedText": "New to Scratch? Try the Getting Started tutorial.",
|
||||
"ideas.gettingStartedImageDescription": "An illustrated boy plants his flag on top of a freshly painted mountaintop.",
|
||||
"ideas.tryIt": "Try it!",
|
||||
"ideas.activityGuidesTitle": "Activity Guides",
|
||||
"ideas.activityGuidesText": "What do you want to make with Scratch? For each activity, you can try the Tutorial, download a set of Coding Cards, or view the Educator Guide.",
|
||||
"ideas.animateANameTitle": "Animate a Name",
|
||||
"ideas.animateANameDescription": "Animate the letters of your name, initials, or favorite word.",
|
||||
"ideas.animateANameImageDescription": "The name ANYA in all caps and blocked letters is poised to wiggle",
|
||||
"ideas.animateACharacterTitle": "Animate a Character",
|
||||
"ideas.animateACharacterDescription": "Bring characters to life with animation.",
|
||||
"ideas.animateACharacterImageDescription": "An taco with a wand, wizard cap and flowing white beard floats enchantingly in low-Earth orbit.",
|
||||
"ideas.makeMusicTitle": "Make Music",
|
||||
"ideas.makeMusicDescription": "Choose instruments, add sounds, and press keys to play music.",
|
||||
"ideas.makeMusicImageDescription": "Strings vibrate on an illustrated Gibson explorer.",
|
||||
"ideas.createAStoryTitle": "Create a Story",
|
||||
"ideas.createAStoryDescription": "Choose characters, add conversation, and bring your story to life.",
|
||||
"ideas.createAStoryImageDescription": "A wizard beckons a traveling witch towards a distant castle.",
|
||||
"ideas.chaseGameTitle": "Make a Chase Game",
|
||||
"ideas.chaseGameDescription": "Make a game where you chase a character to score points.",
|
||||
"ideas.chaseGameImageDescription": "A happy interactive octopus passes over a star.",
|
||||
"ideas.videoSensingTitle": "Video Sensing",
|
||||
"ideas.videoSensingDescription": "Interact with a project using the Video Sensing extension.",
|
||||
"ideas.videoSensingImageDescription": "A virtual hand dodges a spurt of flame in an attempt to pet a dragon.",
|
||||
"ideas.seeAllTutorials": "See All Tutorials",
|
||||
"ideas.cardsTitle": "Get the Entire Collection of Coding Cards",
|
||||
"ideas.cardsText": "With the Scratch Coding Cards, you can learn to create interactive games, stories, music, animations, and more!",
|
||||
"ideas.cardsIllustrationDescription": "An assortment of fun, animated characters and objects leap out of a stack of cards.",
|
||||
"ideas.starterProjectsTitle": "Starter Projects",
|
||||
"ideas.starterProjectsText": "You can play with Starter Projects and remix them to make your own creations.",
|
||||
"ideas.starterProjectsImageDescription": "An illustration of the Scratch Code Editor.",
|
||||
"ideas.starterProjectsButton": "Explore Starter Projects",
|
||||
"ideas.tryTheTutorial": "Try the tutorial",
|
||||
"ideas.codingCards": "Coding Cards",
|
||||
|
|
@ -35,6 +45,7 @@
|
|||
"ideas.cardsPurchase": "Purchase Printed Set",
|
||||
"ideas.MakeItFlyTitle": "Make It Fly",
|
||||
"ideas.MakeItFlyDescription": "Choose any character and make it fly!",
|
||||
"ideas.MakeItFlyImageDescription": "The scratch cat flies over the skyline. Alongside a flying taco.",
|
||||
"ideas.RaceTitle": "Race to the Finish",
|
||||
"ideas.RaceDescription": "Make a game where two characters race each other.",
|
||||
"ideas.HideAndSeekTitle": "Hide and Seek",
|
||||
|
|
@ -43,8 +54,10 @@
|
|||
"ideas.FashionDescription": "Make a game where you dress a character with different clothes and styles.",
|
||||
"ideas.PongTitle": "Pong Game",
|
||||
"ideas.PongDescription": "Make a bouncing ball game with sounds, points, and other effects.",
|
||||
"ideas.PongImageDescription": "A ball bounces off a digital paddle.",
|
||||
"ideas.ImagineTitle": "Imagine a World",
|
||||
"ideas.ImagineDescription": "Imagine a world where anything is possible.",
|
||||
"ideas.ImagineImageDescription": "A girl stands proudly in front of a thought bubble as big as the Earth and as intricate as butterfly wings.",
|
||||
"ideas.DanceTitle": "Let's Dance",
|
||||
"ideas.DanceDescription": "Design an animated dance scene with music and dance moves.",
|
||||
"ideas.CatchTitle": "Catch Game",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@
|
|||
"title": "ideas.animateANameTitle",
|
||||
"description": "ideas.animateANameDescription",
|
||||
"thumbImage": "/images/ideas/activities/animate-a-name-thumb.jpg",
|
||||
"thumbImageDescription": "ideas.animateANameImageDescription",
|
||||
"modalImage": "/images/ideas/activities/animate-a-name-modal.jpg",
|
||||
"modalImageDescription": "ideas.animateANameImageDescription",
|
||||
"tutorialUrl": "name",
|
||||
"cardsUrl": "cards.name-cardsLink",
|
||||
"guideUrl": "guides.NameGuideLink"
|
||||
|
|
@ -12,7 +14,9 @@
|
|||
"title": "ideas.ImagineTitle",
|
||||
"description": "ideas.ImagineDescription",
|
||||
"thumbImage": "/images/ideas/activities/imagine-thumb.jpg",
|
||||
"thumbImageDescription": "ideas.ImagineImageDescription",
|
||||
"modalImage": "/images/ideas/activities/imagine-modal.jpg",
|
||||
"modalImageDescription": "ideas.ImagineImageDescription",
|
||||
"tutorialUrl": "imagine",
|
||||
"cardsUrl": "cards.imagine-cardsLink",
|
||||
"guideUrl": "guides.ImagineGuideLink"
|
||||
|
|
@ -21,7 +25,9 @@
|
|||
"title": "ideas.chaseGameTitle",
|
||||
"description": "ideas.chaseGameDescription",
|
||||
"thumbImage": "/images/ideas/activities/chase-game-thumb.jpg",
|
||||
"thumbImageDescription": "ideas.chaseGameImageDescription",
|
||||
"modalImage": "/images/ideas/activities/chase-game-modal.jpg",
|
||||
"modalImageDescription": "ideas.chaseGameImageDescription",
|
||||
"tutorialUrl": "chase-game",
|
||||
"cardsUrl": "cards.chase-cardsLink",
|
||||
"guideUrl": "guides.ChaseGuideLink"
|
||||
|
|
@ -30,7 +36,9 @@
|
|||
"title": "ideas.makeMusicTitle",
|
||||
"description": "ideas.makeMusicDescription",
|
||||
"thumbImage": "/images/ideas/activities/make-music-thumb.jpg",
|
||||
"thumbImageDescription": "ideas.makeMusicImageDescription",
|
||||
"modalImage": "/images/ideas/activities/make-music-modal.jpg",
|
||||
"modalImageDescription": "ideas.makeMusicImageDescription",
|
||||
"tutorialUrl": "music",
|
||||
"cardsUrl": "cards.music-cardsLink",
|
||||
"guideUrl": "guides.MusicGuideLink"
|
||||
|
|
@ -39,7 +47,9 @@
|
|||
"title": "ideas.createAStoryTitle",
|
||||
"description": "ideas.createAStoryDescription",
|
||||
"thumbImage": "/images/ideas/activities/create-a-story-thumb.jpg",
|
||||
"thumbImageDescription": "ideas.createAStoryImageDescription",
|
||||
"modalImage": "/images/ideas/activities/create-a-story-modal.jpg",
|
||||
"modalImageDescription": "ideas.createAStoryImageDescription",
|
||||
"tutorialUrl": "tell-a-story",
|
||||
"cardsUrl": "cards.story-cardsLink",
|
||||
"guideUrl": "guides.StoryGuideLink"
|
||||
|
|
@ -48,7 +58,9 @@
|
|||
"title": "ideas.MakeItFlyTitle",
|
||||
"description": "ideas.MakeItFlyDescription",
|
||||
"thumbImage": "/images/ideas/activities/fly-thumb.jpg",
|
||||
"thumbImageDescription": "ideas.MakeItFlyImageDescription",
|
||||
"modalImage": "/images/ideas/activities/fly-modal.jpg",
|
||||
"modalImageDescription": "ideas.MakeItFlyImageDescription",
|
||||
"tutorialUrl": "make-it-fly",
|
||||
"cardsUrl": "cards.fly-cardsLink",
|
||||
"guideUrl": "guides.FlyGuideLink"
|
||||
|
|
@ -57,7 +69,9 @@
|
|||
"title": "ideas.PongTitle",
|
||||
"description": "ideas.PongDescription",
|
||||
"thumbImage": "/images/ideas/activities/pong-thumb.jpg",
|
||||
"thumbImageDescription": "ideas.PongImageDescription",
|
||||
"modalImage": "/images/ideas/activities/pong-modal.jpg",
|
||||
"modalImageDescription": "ideas.PongImageDescription",
|
||||
"tutorialUrl": "pong",
|
||||
"cardsUrl": "cards.pong-cardsLink",
|
||||
"guideUrl": "guides.PongGuideLink"
|
||||
|
|
@ -66,7 +80,9 @@
|
|||
"title": "ideas.animateACharacterTitle",
|
||||
"description": "ideas.animateACharacterDescription",
|
||||
"thumbImage": "/images/ideas/activities/animate-a-character-thumb.jpg",
|
||||
"thumbImageDescription": "ideas.animateACharacterDescription",
|
||||
"modalImage": "/images/ideas/activities/animate-a-character-modal.jpg",
|
||||
"modalImageDescription": "ideas.animateACharacterDescription",
|
||||
"tutorialUrl": "animate-a-character",
|
||||
"cardsUrl": "cards.animation-cardsLink",
|
||||
"guideUrl": "guides.AnimateGuideLink"
|
||||
|
|
@ -75,7 +91,9 @@
|
|||
"title": "ideas.videoSensingTitle",
|
||||
"description": "ideas.videoSensingDescription",
|
||||
"thumbImage": "/images/ideas/activities/video-sensing-thumb.jpg",
|
||||
"thumbImageDescription": "ideas.videoSensingImageDescription",
|
||||
"modalImage": "/images/ideas/activities/video-sensing-modal.jpg",
|
||||
"modalImageDescription": "ideas.videoSensingImageDescription",
|
||||
"tutorialUrl": "video-sensing",
|
||||
"cardsUrl": "cards.video-cardsLink",
|
||||
"guideUrl": "guides.VideoGuideLink"
|
||||
|
|
|
|||
Loading…
Reference in a new issue