[docs] Improve homepage accessibility (#18745)

mui · Dec 9, 2019 · d30e5ae · d30e5ae
1 parent 9c16b55
commit d30e5ae
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -65,7 +65,7 @@ via [Patreon](https://www.patreon.com/oliviertassinari)
 via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group" width="100" loading="lazy"></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="call-em-all" title="The easy way to message your group" width="100" loading="lazy"></a>
 </p>
 
 Gold Sponsors are those who have pledged $500/month and more to Material-UI.

diff --git a/docs/pages/index.js b/docs/pages/index.js
@@ -117,11 +117,7 @@ export default function HomePage() {
         <main id="main-content" tabIndex="-1">
           <div className={classes.hero}>
             <Container maxWidth="md" className={classes.content}>
-              <img
-                src="/static/images/material-ui-logo.svg"
-                alt="Material-UI Logo"
-                className={classes.logo}
-              />
+              <img src="/static/images/material-ui-logo.svg" alt="" className={classes.logo} />
               <div>
                 <Typography
                   variant="h3"

diff --git a/docs/src/modules/components/HomeFooter.js b/docs/src/modules/components/HomeFooter.js
@@ -56,14 +56,14 @@ function HomeFooter(props) {
       <Container maxWidth="md">
         <footer className={classes.footer}>
           <Grid container>
-            <Grid item xs={12} md={3}>
+            <Grid item xs={12} sm={4}>
               <div className={classes.logo}>
-                <img src="/static/images/material-ui-logo.svg" alt="Material-UI Logo" />
+                <img src="/static/images/material-ui-logo.svg" alt="" />
                 <Typography color="primary">Material-UI</Typography>
               </div>
             </Grid>
-            <Grid item xs={6} md={3} className={classes.list}>
-              <Typography component="h3" gutterBottom>
+            <Grid item xs={6} sm={4} className={classes.list}>
+              <Typography component="h2" gutterBottom>
                 {t('footerCommunity')}
               </Typography>
               <ul>
@@ -97,8 +97,8 @@ function HomeFooter(props) {
                 </li>
               </ul>
             </Grid>
-            <Grid item xs={6} md={3} className={classes.list}>
-              <Typography component="h3" gutterBottom>
+            <Grid item xs={6} sm={4} className={classes.list}>
+              <Typography component="h2" gutterBottom>
                 {t('footerResources')}
               </Typography>
               <ul>
@@ -119,15 +119,16 @@ function HomeFooter(props) {
                 </li>
               </ul>
             </Grid>
-            <Grid item xs={6} md={3}>
-              <ul className={classes.list} />
-            </Grid>
           </Grid>
           <Typography className={classes.version} color="textSecondary" variant="body2">
             <Interpolate
               replacement={{
                 versionNumber: (
-                  <Link color="inherit" href="https://material-ui.com/versions/">
+                  <Link
+                    color="inherit"
+                    href="https://material-ui.com/versions/"
+                    aria-label={`v${process.env.LIB_VERSION}. View versions page.`}
+                  >
                     {`v${process.env.LIB_VERSION}`}
                   </Link>
                 ),

diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js
@@ -199,6 +199,8 @@ function HomeSteps(props) {
             data-ga-event-action="click"
             data-ga-event-label="home-image"
             className={classes.link}
+            aria-hidden="true"
+            tabindex="-1"
           >
             <NoSsr>
               <img

diff --git a/docs/src/modules/components/HomeUsers.js b/docs/src/modules/components/HomeUsers.js
@@ -87,7 +87,7 @@ function HomeUsers(props) {
       <Divider />
       <NoSsr>
         <Container maxWidth="md" className={classes.container}>
-          <Typography variant="h4" align="center" gutterBottom>
+          <Typography variant="h4" component="h2" align="center" gutterBottom>
             {t('whosUsing')}
           </Typography>
           <Typography variant="body1" align="center" gutterBottom>

diff --git a/docs/src/modules/components/backers.md b/docs/src/modules/components/backers.md
@@ -21,7 +21,7 @@ via [Patreon](https://www.patreon.com/oliviertassinari)
 via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group" width="100" loading="lazy"></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="call-em-all" title="The easy way to message your group" width="100" loading="lazy"></a>
 </p>
 
 Gold Sponsors are those who have pledged $500/month and more to Material-UI.

diff --git a/docs/src/pages/discover-more/backers/backers.md b/docs/src/pages/discover-more/backers/backers.md
@@ -25,7 +25,7 @@ via [Patreon](https://www.patreon.com/oliviertassinari)
 via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group" width="100" loading="lazy" /></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="call-em-all" title="The easy way to message your group" width="100" loading="lazy" /></a>
 </p>
 
 Gold Sponsors are those who have pledged $500/month and more to Material-UI.