image
image copied to clipboard
nuxt
Enforce usage of `alt` text
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.
Thank you very much for this detailed issue @ovlb, Nuxt Image is not in version 1 and is open to improvements :blush:
I would actually not create a altText prop or even forcing it to be required, but we can display a warning instead if the alt is not present in <nuxt-img> or <nuxt-picture>, what do you think?
@Atinux If the warning is helpful enough that might be an option. Helpful, because as stated in the OP I think some developers might not know that the alt is required even if it might be empty so providing enough context is crucial.
@pi0 I guess you mean the config in nuxt.config?
Sorry for the radio silence, was feeling sick over the last days and didn’t check GitHub.
Update since 2021:
The image component for NextJS and astro requires the alt text. Quotes from their docs:
The new Image component:
- Ships less client-side JavaScript
- Easier to style and configure
- More accessible requiring alt tags by default
https://nextjs.org/blog/next-13#nextimage
For accessibility, the required alt prop helps improve your site for screen-readers and other tooling.
https://astro.build/blog/images/
