[docs] Improve homepage accessibility

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"

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>
                 ),

docs/src/modules/components/HomeSteps.js

@@ -199,11 +199,12 @@ function HomeSteps(props) {
             data-ga-event-action="click"
             data-ga-event-label="home-image"
             className={classes.link}
+            aria-label={t('themesButton')}
           >
             <NoSsr>
               <img
                 className={classes.img}
-                alt="themes"
+                alt=""
                 src={`/static/images/themes-${theme.palette.type}.jpg`}
                 loading="eager"
                 width={500}

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>

docs/src/modules/components/backers.md

@@ -4,9 +4,9 @@ The core of Material-UI is a [crowd-funded](/discover-more/backers/) open-source
 
 ### Diamond 💎
 
-*3/3 slots available*
+_3/3 slots available_
 
-Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI.
+Diamond Sponsors are those who have pledged \$2,000/month and more to Material-UI.
 Please contact us at [email protected] to subscribe to this tier.
 
 ### Gold 🏆
@@ -21,10 +21,10 @@ 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.
+Gold Sponsors are those who have pledged \$500/month and more to Material-UI.
 
 ### There are more!