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

* Update spaCy badge `alt` text

* Add `next/image` component to Universe

* Add missing `alt`texts
This commit is contained in:
Marcus Blättermann 2023-01-24 13:56:14 +01:00 committed by GitHub
parent c9beb47ab7
commit 031f6c7b60
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 23 additions and 14 deletions

View File

@ -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

View File

@ -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>

View File

@ -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

View File

@ -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)
```

View File

@ -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>

View File

@ -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
a huge ecosystem. Choose from a variety of plugins, integrate with your machine
Since its release in 2015, spaCy has become an industry standard with a huge
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 />

View File

@ -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 */}
<img src={image} width={35} alt="" />
<ImageNext src={image} height={35} width={35} alt={`${title} Logo`} />
</div>
)}
{title && (

View File

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

View File

@ -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
<img
<Image
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)',