From 01975b7e4dcb5770bea1be31494071fd801b304d Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Tue, 12 Jan 2016 13:26:49 -0500
Subject: [PATCH 1/2] Add `alt` attribute to image tags

See https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_text_02
---
 src/components/activity/activity.jsx     |  2 +-
 src/components/navigation/navigation.jsx |  2 +-
 src/components/news/news.jsx             |  2 +-
 src/components/thumbnail/thumbnail.jsx   |  5 +--
 src/components/welcome/welcome.jsx       |  6 ++--
 src/views/hoc/hoc.jsx                    | 40 ++++++++++++------------
 6 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/components/activity/activity.jsx b/src/components/activity/activity.jsx
index a42bcb5eb..9126e641b 100644
--- a/src/components/activity/activity.jsx
+++ b/src/components/activity/activity.jsx
@@ -46,7 +46,7 @@ var Activity = React.createClass({
                                 return (
                                     <li key={item.pk}>
                                         <a href={actorProfileUrl}>
-                                            <img src={item.actor.thumbnail_url} width="34" height="34" />
+                                            <img src={item.actor.thumbnail_url} width="34" height="34" alt="" />
                                             <p dangerouslySetInnerHTML={{__html: activityMessageHTML}}></p>
                                             <p>
                                                 <span className="stamp">
diff --git a/src/components/navigation/navigation.jsx b/src/components/navigation/navigation.jsx
index 7286e6cbb..5df79e72d 100644
--- a/src/components/navigation/navigation.jsx
+++ b/src/components/navigation/navigation.jsx
@@ -262,7 +262,7 @@ var Navigation = React.createClass({
                         </li>,
                         <li className="link right account-nav" key="account-nav">
                             <a className="userInfo" href="#" onClick={this.handleAccountNavClick}>
-                                <Avatar src={this.state.session.user.thumbnailUrl} />
+                                <Avatar src={this.state.session.user.thumbnailUrl} alt="" />
                                 {this.state.session.user.username}
                             </a>
                             <Dropdown
diff --git a/src/components/news/news.jsx b/src/components/news/news.jsx
index e5dc54643..4fa27f2c2 100644
--- a/src/components/news/news.jsx
+++ b/src/components/news/news.jsx
@@ -42,7 +42,7 @@ var News = React.createClass({
                         return (
                             <li key={item.id}>
                                 <a href={item.url}>
-                                    <img src={item.image} width="53" height="53" />
+                                    <img src={item.image} width="53" height="53" alt="" />
                                     <h4>{item.headline}</h4>
                                     <p>{item.copy}</p>
                                 </a>
diff --git a/src/components/thumbnail/thumbnail.jsx b/src/components/thumbnail/thumbnail.jsx
index 502e1182d..e1e483136 100644
--- a/src/components/thumbnail/thumbnail.jsx
+++ b/src/components/thumbnail/thumbnail.jsx
@@ -15,7 +15,8 @@ var Thumbnail = React.createClass({
             src: '',
             type: 'project',
             showLoves: false,
-            showRemixes: false
+            showRemixes: false,
+            alt: ''
         };
     },
     render: function () {
@@ -57,7 +58,7 @@ var Thumbnail = React.createClass({
         return (
             <div className={classes} >
                 <a className="thumbnail-image" href={this.props.href}>
-                    <img src={this.props.src} />
+                    <img src={this.props.src} alt={this.props.alt} />
                 </a>
                 <div className="thumbnail-title">
                     <a href={this.props.href}>{this.props.title}</a>
diff --git a/src/components/welcome/welcome.jsx b/src/components/welcome/welcome.jsx
index 15fa61ce4..74ba01a59 100644
--- a/src/components/welcome/welcome.jsx
+++ b/src/components/welcome/welcome.jsx
@@ -35,7 +35,7 @@ var Welcome = React.createClass({
                         </a>
                     </h4>
                     <a href="/projects/editor/?tip_bar=getStarted">
-                        <img src="/images/welcome-learn.png" />
+                        <img src="/images/welcome-learn.png" alt="Get Started" />
                     </a>
                 </div>
                 <div className="welcome-col green">
@@ -47,7 +47,7 @@ var Welcome = React.createClass({
                         </a>
                     </h4>
                     <a href="/starter_projects/">
-                        <img src="/images/welcome-try.png" />
+                        <img src="/images/welcome-try.png" alt="Starter Projects" />
                     </a>
                 </div>
                 <div className="welcome-col pink">
@@ -59,7 +59,7 @@ var Welcome = React.createClass({
                         </a>
                     </h4>
                     <a href="/studios/146521/">
-                        <img src="/images/welcome-connect.png" />
+                        <img src="/images/welcome-connect.png" alt="Connect" />
                     </a>
                 </div>
             </Box>
diff --git a/src/views/hoc/hoc.jsx b/src/views/hoc/hoc.jsx
index b8319f56a..3d14cc13d 100644
--- a/src/views/hoc/hoc.jsx
+++ b/src/views/hoc/hoc.jsx
@@ -50,7 +50,7 @@ var Hoc = React.createClass({
                             <div className="card">
                                 <a href="/projects/editor/?tip_bar=name">
                                     <div className="card-info" onMouseEnter={this.onCardEnter.bind(this, 'name-bg')}>
-                                        <img src="/images/hoc2015/name-tutorial.jpg" />
+                                        <img src="/images/hoc2015/name-tutorial.jpg" alt="" />
                                         <Button>
                                             <FormattedMessage
                                                 id='general.tipsAnimateYourNameTitle'
@@ -63,7 +63,7 @@ var Hoc = React.createClass({
                             <div className="card" onMouseEnter={this.onCardEnter.bind(this, 'wbb-bg')}>
                                 <a href="/hide/">
                                     <div className="card-info">
-                                        <img src="/images/hoc2015/hide-seek-tutorial.jpg" />
+                                        <img src="/images/hoc2015/hide-seek-tutorial.jpg" alt="" />
                                         <Button>
                                             <FormattedMessage
                                                 id='general.tipsHideAndSeekTitle'
@@ -76,7 +76,7 @@ var Hoc = React.createClass({
                             <div className="card" onMouseEnter={this.onCardEnter.bind(this, 'dance-bg')}>
                                 <a href="/projects/editor/?tip_bar=dance">
                                     <div className="card-info">
-                                        <img src="/images/hoc2015/dance-tutorial.jpg" />
+                                        <img src="/images/hoc2015/dance-tutorial.jpg" alt="" />
                                         <Button>
                                             <FormattedMessage
                                                 id='general.tipsDanceTitle'
@@ -142,7 +142,7 @@ var Hoc = React.createClass({
                             </div>
 
                             <div className="resource">
-                                <img src="/svgs/tips-card.svg" />
+                                <img src="/svgs/tips-card.svg" alt="" />
                                 <div className="resource-info">
                                     <h5>
                                         <FormattedMessage
@@ -163,7 +163,7 @@ var Hoc = React.createClass({
                             </div>
 
                             <div className="resource">
-                                <img src="/svgs/tips-card.svg" />
+                                <img src="/svgs/tips-card.svg" alt="" />
                                 <div className="resource-info">
                                     <h5>
                                         <FormattedMessage
@@ -184,7 +184,7 @@ var Hoc = React.createClass({
                             </div>
                             
                             <div className="resource">
-                                <img src="/svgs/tips-card.svg" />
+                                <img src="/svgs/tips-card.svg" alt="" />
                                 <div className="resource-info">
                                     <h5>
                                         <FormattedMessage
@@ -223,7 +223,7 @@ var Hoc = React.createClass({
                                 </p>
                             </div>
                             <div className="column">
-                                <img src="/images/hoc2015/tips-test-animation.gif" />
+                                <img src="/images/hoc2015/tips-test-animation.gif" alt="Tips Window Animation" />
                             </div>
                         </section>
 
@@ -248,7 +248,7 @@ var Hoc = React.createClass({
                                 <div className="card">
                                     <a href="/projects/editor/?tip_bar=getStarted">
                                         <div className="card-info">
-                                            <img src="/images/hoc2015/getting-started-tutorial.jpg" />
+                                            <img src="/images/hoc2015/getting-started-tutorial.jpg" alt="" />
                                             <Button>
                                                 <FormattedMessage
                                                     id='general.tipsGetStarted'
@@ -261,7 +261,7 @@ var Hoc = React.createClass({
                                 <div className="card">
                                     <a href="/bearstack/">
                                         <div className="card-info">
-                                            <img src="/images/hoc2015/bearstack-tutorial.jpg" />
+                                            <img src="/images/hoc2015/bearstack-tutorial.jpg" alt="" />
                                             <Button>
                                                 <FormattedMessage
                                                     id='general.tipsBearstack'
@@ -274,7 +274,7 @@ var Hoc = React.createClass({
                                 <div className="card">
                                     <a href="/hoops">
                                         <div className="card-info">
-                                            <img src="/images/hoc2015/bball-tutorial.jpg" />
+                                            <img src="/images/hoc2015/bball-tutorial.jpg" alt="" />
                                             <Button>
                                                 <FormattedMessage
                                                     id='general.tipsBBallHoops'
@@ -305,7 +305,7 @@ var Hoc = React.createClass({
                             </div>
 
                             <div className="studio">
-                                <img src="/svgs/studio.svg" />
+                                <img src="/svgs/studio.svg" alt="" />
                                 <div className="studio-info">
                                     <a href="/studios/432299/">
                                         <h5>
@@ -318,7 +318,7 @@ var Hoc = React.createClass({
                             </div>
 
                             <div className="studio">
-                                <img src="/svgs/studio.svg" />
+                                <img src="/svgs/studio.svg" alt="" />
                                 <div className="studio-info">
                                     <a href="/studios/1672166/">
                                         <h5>
@@ -331,7 +331,7 @@ var Hoc = React.createClass({
                             </div>
 
                             <div className="studio">
-                                <img src="/svgs/studio.svg" />
+                                <img src="/svgs/studio.svg" alt="" />
                                 <div className="studio-info">
                                     <a href="/studios/1065372/">
                                         <h5>
@@ -344,7 +344,7 @@ var Hoc = React.createClass({
                             </div>
 
                             <div className="studio">
-                                <img src="/svgs/studio.svg" />
+                                <img src="/svgs/studio.svg" alt="" />
                                 <div className="studio-info">
                                     <a href="/studios/1672164/">
                                         <h5>
@@ -366,22 +366,22 @@ var Hoc = React.createClass({
                         </h3>
                         <div className="logos">
                             <a href="http://scratched.gse.harvard.edu/">
-                                <img src="/images/hoc2015/scratchEd-logo.png" />
+                                <img src="/images/hoc2015/scratchEd-logo.png" alt="ScratchEd" />
                             </a>
                             <a href="https://code.org/">
-                                <img src="/images/hoc2015/code-org-logo.png" />
+                                <img src="/images/hoc2015/code-org-logo.png" alt="code.org" />
                             </a>
                             <a href="http://www.cartoonnetwork.com/">
-                                <img src="/images/hoc2015/cn-logo.png" />
+                                <img src="/images/hoc2015/cn-logo.png" alt="Cartoon Network" />
                             </a>
                             <a href="http://www.madewithcode.com/">
-                                <img src="/images/hoc2015/made-with-code-logo.png" />
+                                <img src="/images/hoc2015/made-with-code-logo.png" alt="Made with Code" />
                             </a>
                             <a href="http://www.paalive.org/">
-                                <img src="/images/hoc2015/paa-logo.png" />
+                                <img src="/images/hoc2015/paa-logo.png" alt="Progressive Arts Alliance" />
                             </a>
                             <a href="http://www.catrobat.org/">
-                                <img src="/images/hoc2015/pocketcode-logo.png" />
+                                <img src="/images/hoc2015/pocketcode-logo.png" alt="Pocket Code" />
                             </a>
                         </div>
 

From 2ac3e5337f32ccc451782220a618bf16f1714b98 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Tue, 12 Jan 2016 13:27:36 -0500
Subject: [PATCH 2/2] Add alternative labels for input and links

See https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_text_01
---
 src/components/navigation/navigation.jsx | 7 +++++--
 src/views/about/about.jsx                | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/navigation/navigation.jsx b/src/components/navigation/navigation.jsx
index 5df79e72d..e616c52e7 100644
--- a/src/components/navigation/navigation.jsx
+++ b/src/components/navigation/navigation.jsx
@@ -196,7 +196,7 @@ var Navigation = React.createClass({
         return (
             <div className={classes}>
                 <ul>
-                    <li className="logo"><a href="/"></a></li>
+                    <li className="logo"><a href="/" aria-label="Scratch"></a></li>
 
                     <li className="link create">
                         <a href="/projects/editor">
@@ -237,7 +237,10 @@ var Navigation = React.createClass({
                     <li className="search">
                         <form action="/search/google_results" method="get">
                             <Input type="submit" value="" />
-                            <Input type="text" placeholder={formatMessage(defaultMessages.search)} name="q" />
+                            <Input type="text"
+                                   aria-label={formatMessage(defaultMessages.search)}
+                                   placeholder={formatMessage(defaultMessages.search)}
+                                   name="q" />
                             <Input type="hidden" name="date" value="anytime" />
                             <Input type="hidden" name="sort_by" value="datetime_shared" />
                         </form>
diff --git a/src/views/about/about.jsx b/src/views/about/about.jsx
index 840a30085..6f7d2f392 100644
--- a/src/views/about/about.jsx
+++ b/src/views/about/about.jsx
@@ -26,6 +26,7 @@ var About = React.createClass({
 
                     <div>
                         <iframe
+                            title="Scratch Overview Video"
                             src="https://player.vimeo.com/video/65583694?title=0&byline=0&portrait=0"
                             frameBorder="0"
                             webkitAllowFullScreen