Accessibility improvements

src/client/components/main_layout/TopBarSearchField.js

@@ -106,6 +106,7 @@ class TopBarSearchField extends React.Component {
             root: classes.inputRoot,
             input: classes.inputInput
           }}
+          inputProps={{ 'aria-label': 'search' }}
           onChange={this.handleChange}
           onKeyDown={this.handleOnKeyDown}
         />

src/client/components/perspectives/sampo/Footer.js

@@ -90,17 +90,17 @@ const Footer = props => {
         <Grid className={classes.gridContainer} container spacing={3}>
           <Grid item xs className={classes.gridItem}>
             <a className={classes.link} href='https://www.aalto.fi/en/school-of-science' target='_blank' rel='noopener noreferrer'>
-              <img className={classes.aaltoLogo} src={aaltoLogo} alt='logo' />
+              <img className={classes.aaltoLogo} src={aaltoLogo} alt='Aalto University logo' />
             </a>
           </Grid>
           <Grid item xs className={classes.gridItem}>
             <a className={classes.link} href='https://www.helsinki.fi/en' target='_blank' rel='noopener noreferrer'>
-              <img className={classes.hyLogo} src={hyLogo} alt='logo' />
+              <img className={classes.hyLogo} src={hyLogo} alt='University of Helsinki logo' />
             </a>
           </Grid>
           <Grid item xs className={classes.gridItem}>
             <a className={classes.link} href='https://www.helsinki.fi/en/helsinki-centre-for-digital-humanities' target='_blank' rel='noopener noreferrer'>
-              <img className={classes.heldigLogo} src={heldigLogo} alt='logo' />
+              <img className={classes.heldigLogo} src={heldigLogo} alt='Helsinki Centre for Digital Humanities logo' />
             </a>
           </Grid>
         </Grid>

src/client/components/perspectives/sampo/Main.js

@@ -122,13 +122,13 @@ const Main = props => {
       <div className={classes.banner}>
         <div className={classes.bannerContent}>
           <div className={classes.bannerHeading}>
-            <Typography component='span' variant={headingVariant} align='center'>
+            <Typography component='h1' variant={headingVariant} align='center'>
               {intl.getHTML('appTitle.long')}
             </Typography>
           </div>
           <div className={classes.bannerSubheading}>
             <div>
-              <Typography component='h2' variant={subheadingVariant} align='center'>
+              <Typography component='p' variant={subheadingVariant} align='center'>
                 {intl.getHTML('appTitle.subheading')}
               </Typography>
             </div>