nuxt / nuxt/image

Enforce usage of `alt` text

Open
#315 5 comments 11 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

Bug

The current way the plugin is designed allows to render an img tag without an alt attribute. This is contradictory to the claim that the plugin is «standards compliant» as the alt tag is mandatory. Currently, the output of the plugin in the docs does not pass the HTML validator. I copied the output to a demo page: https://validator.w3.org/nu/?doc=https%3A%2F%2Fplayground.owlish.dev%2Fnuxt-img%2F

Broader Picture

The WebAIM Million report year after year concludes that missing alternative text is one of the most prevalent errors making the internet hard to impossible to use for humans with disabilities.
Unfortunately, it also concludes that pages including Vue correlate with a whopping 31% increase in detected errors.

As the world wide web should be usable by everyone enforcing best practices and educate how to meet them should be part and parcel of every framework and plugin. nuxt/image currently fails to do so.

Solution

Add altText as a required prop, and show a meaningful error in the console if no alternative text is provided. The message could, as an example, link to the Images Concepts tutorial of the Web Accessibility Initiative. The plugin should render no output, unless alternative text (an empty string for decorative images) is provided. While this steps seems drastic, it’s the only way to truly be standards compliant (and a step taken by eleventy/img already).
Further, the documentation should be updated to include meaningful alt text, so that copy & pasting does not lead to broken code.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the image plugin's generated img output and the documentation examples, then compare the behavior with the linked HTML validator result. Implement the requested altText requirement, including an explicit empty string for decorative images, and update examples so they contain meaningful alternative text. Done means missing alternative text produces a clear console error and no image output, while documentation examples validate correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
accessibility, documentation, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.