WEB-27 Add alt tags to images (#12166)

* Update spaCy badge `alt` text

* Add `next/image` component to Universe

* Add missing `alt`texts

website/docs/usage/101/_vectors-similarity.mdx

@@ -134,6 +134,7 @@ useful for your purpose. Here are some important considerations to keep in mind:
 <Image
   src="/images/sense2vec.jpg"
   href="https://github.com/explosion/sense2vec"
+  alt="sense2vec Screenshot"
 />
 
 [`sense2vec`](https://github.com/explosion/sense2vec) is a library developed by

website/docs/usage/layers-architectures.mdx

@@ -113,6 +113,7 @@ code.
 <Image
   src="/images/thinc_mypy.jpg"
   href="https://thinc.ai/docs/usage-type-checking#linting"
+  alt="Screenshot of Thinc type checking in VSCode with mypy"
 />
 
 </Accordion>

website/docs/usage/projects.mdx

@@ -943,7 +943,7 @@ full embedded visualizer, as well as individual components.
 > $ pip install spacy-streamlit --pre
 > ```
 
-![](/images/spacy-streamlit.png)
+![Screenshot of the spacy-streamlit package in Streamlit](/images/spacy-streamlit.png)
 
 Using [`spacy-streamlit`](https://github.com/explosion/spacy-streamlit), your
 projects can easily define their own scripts that spin up an interactive

website/docs/usage/spacy-101.mdx

@@ -567,7 +567,10 @@ If you would like to use the spaCy logo on your site, please get in touch and
 ask us first. However, if you want to show support and tell others that your
 project is using spaCy, you can grab one of our **spaCy badges** here:
 
-<img src={`https://img.shields.io/badge/built%20with-spaCy-09a3d5.svg`} />
+<img
+  src={`https://img.shields.io/badge/built%20with-spaCy-09a3d5.svg`}
+  alt="Built with spaCy"
+/>
 
 ```markdown
 [![Built with spaCy](https://img.shields.io/badge/built%20with-spaCy-09a3d5.svg)](https://spacy.io)
@@ -575,8 +578,9 @@ project is using spaCy, you can grab one of our **spaCy badges** here:
 
 <img
   src={`https://img.shields.io/badge/made%20with%20❤%20and-spaCy-09a3d5.svg`}
+  alt="Made with love and spaCy"
 />
 
 ```markdown
-[![Built with spaCy](https://img.shields.io/badge/made%20with%20❤%20and-spaCy-09a3d5.svg)](https://spacy.io)
+[![Made with love and spaCy](https://img.shields.io/badge/made%20with%20❤%20and-spaCy-09a3d5.svg)](https://spacy.io)
 ```

website/docs/usage/visualizers.mdx

@@ -437,6 +437,6 @@ Alternatively, if you're using [Streamlit](https://streamlit.io), check out the
 helps you integrate spaCy visualizations into your apps. It includes a full
 embedded visualizer, as well as individual components.
 
-![](/images/spacy-streamlit.png)
+![Screenshot of the spacy-streamlit package in Streamlit](/images/spacy-streamlit.png)
 
 </Grid>

website/pages/index.tsx

@@ -89,8 +89,8 @@ const Landing = () => {
                 </LandingCard>
 
                 <LandingCard title="Awesome ecosystem" url="/usage/projects" button="Read more">
-                    Since its release in 2015, spaCy has become an industry standard with
+                    Since its release in 2015, spaCy has become an industry standard with a huge
-                    a huge ecosystem. Choose from a variety of plugins, integrate with your machine
+                    ecosystem. Choose from a variety of plugins, integrate with your machine
                     learning stack and build custom components and workflows.
                 </LandingCard>
             </LandingGrid>
@@ -206,7 +206,10 @@ const Landing = () => {
             <LandingGrid cols={2}>
                 <LandingCol>
                     <Link to="/usage/projects" hidden>
-                        <ImageFill image={projectsImage} />
+                        <ImageFill
+                            image={projectsImage}
+                            alt="Illustration of project workflow and commands"
+                        />
                     </Link>
                     <br />
                     <br />

website/src/components/card.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import ImageNext from 'next/image'
 
 import Link from './link'
 import { H5 } from './typography'
@@ -18,8 +19,7 @@ export default function Card({ title, to, image, header, small, onClick, childre
                 <H5 className={classes.title}>
                     {image && (
                         <div className={classes.image}>
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <ImageNext src={image} height={35} width={35} alt={`${title} Logo`} />
-                            <img src={image} width={35} alt="" />
                         </div>
                     )}
                     {title && (

website/src/components/title.js

@@ -51,8 +51,7 @@ export default function Title({
 
                     {image && (
                         <div className={classes.image}>
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <Image src={image} width={100} height={100} alt={`${title} Logo`} />
-                            <img src={image} width={100} height={100} alt="" />
                         </div>
                     )}
                 </div>

website/src/templates/universe.js

@@ -81,10 +81,11 @@ const UniverseContent = ({ content = [], categories, theme, pageContext, mdxComp
                                     }
                                     const url = `/universe/project/${id}`
                                     const header = youtube && (
-                                        // eslint-disable-next-line @next/next/no-img-element
+                                        <Image
-                                        <img
                                             src={`https://img.youtube.com/vi/${youtube}/0.jpg`}
-                                            alt=""
+                                            alt={title}
+                                            width="480"
+                                            height="360"
                                             style={{
                                                 clipPath: 'inset(12.9% 0)',
                                                 marginBottom: 'calc(-12.9% + 1rem)',