JS-0737 · Prefer meaningful alternative text

Prefer meaningful alternative text JS-0737

Anti-pattern

Minor

19 days ago — a year old

img elements must have an alt prop, either with meaningful text, or an empty string for decorative images

44                                    <span className="absolute -top-2.5 text-center w-full "><a className="dark:bg-zinc-700 px-2 py-1 rounded-lg">OR</a></span>
45                                </div>
46                                <div className="transition ease-in-out dark:bg-zinc-100 dark:hover:bg-zinc-400 mx-2 text-black py-1.5 rounded-lg text-xl flex grid-cols-2 gap-4 my-4 justify-center cursor-pointer" onClick={ ()=>setGoogleSignin(!googleSignin)}>
47                                    <img src="/images/GoogleLogo.webp" className="w-7"/>48                                    <p>Sign in with Google</p>
49                                </div>
50                                <p className="m-auto my-2 lg:m-2">Don't have an account? Sign up <a class="transition ease-in-out underline hover:text-sky-300" href="/sign-up">here</a></p>

img elements must have an alt prop, either with meaningful text, or an empty string for decorative images

pages/index.js

19				</Head>
20				<NavBar forceRerender={props.forceRerender}/>
21				<header className={`h-fit w-full overflow-hidden dark:bg-zinc-700 dark:text-neutral-200 ${styles.pagewdbg}`}>	
22					<img className="max-h-72 mx-auto mt-16 mb-10 w-auto h-auto aspect-auto" src="/images/CavernsLogo.webp"/>23				</header>
24				<main className="flex-grow w-full mx-auto mb-0 dark:bg-zinc-700 dark:text-neutral-200">
25				<p className="text-center text-3xl pt-2 pb-2 mx-auto max-w-9/12">A top down indie action-adventure RPG.</p>

img elements must have an alt prop, either with meaningful text, or an empty string for decorative images

pages/game-info/enemy-stats/index.js

61      <Link href={`/game-info/enemy-stats/${jdata.enemies[i].toLowerCase()}`} className="">
62        <div className="transition ease-in-out rounded-lg border-4 border-zinc-600 bg-zinc-300 dark:border-zinc-500 dark:bg-zinc-800 dark:hover:bg-zinc-700 hover:scale-105 hover:bg-zinc-400 p-2 grid grid-cols-3 gap-5 cursor-pointer">
63          <a className="text-4xl col-span-2 my-auto ml-6">{capitalizeFirstLetter(jdata.enemies[i])}</a>
64          <img src={`/api/game-info/images/enemies/${jdata.enemies[i].toLowerCase()}`} className="" />65        </div>
66      </Link>
67    ))

img elements must have an alt prop, either with meaningful text, or an empty string for decorative images

pages/gallery.js

24              <img src="/images/snap3.png" className="w-auto h-auto max-h-m max-w-md m-auto" />
25            </div>
26            <div>
27              <img src="/images/snap2.png" className="w-auto h-auto max-h-m max-w-md m-auto" />28            </div>
29          </div>
30        </main>

img elements must have an alt prop, either with meaningful text, or an empty string for decorative images

pages/gallery.js

21              <img src="/images/snap1.png" className="w-auto h-auto max-h-m max-w-md m-auto" />
22            </div>
23            <div>
24              <img src="/images/snap3.png" className="w-auto h-auto max-h-m max-w-md m-auto" />25            </div>
26            <div>
27              <img src="/images/snap2.png" className="w-auto h-auto max-h-m max-w-md m-auto" />

Description

The alternative text attached to any content is a critical component of accessibility for screen reader users as it helps them understand the content's purpose on the page. By default, this rule checks for alternative text on the following elements: <img>, <area>, <input type="image">, and <object>.

<img>: An <img> element must have the alt property set with meaningful text or as an empty string to indicate that it is an image for decoration. For images that are being used as icons for a button or control, the alt property should be set to an empty string (alt="").
```
<button>
  <img src="icon.png" alt="" />
  Save
</button>
```
The content of an alt attribute is used to determine accessibility of an element. Whereas the content of the label is use to show a text content of an element. For this reason, adding a label to an icon can create confusion with the already present appropriate text content.
<object>: Add alternative text to all embedded <object> elements using either inner text, setting the title prop, or using the aria-label or aria-labelledby props.
<input type="image">: All <input type="image"> elements must have a non-empty alt prop set with a meaningful description of the image or have the aria-label or aria-labelledby props set.
<area>: All clickable <area> elements within an image map have an alt, aria-label or aria-labelledby prop that describes the purpose of the link.

Bad Practice

function Foo(props) {
  return <img {...props} />
}

Spelunking-Studios / The-Caverns-Website

Bad Practice

Recommended