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.
Bug
The current way the plugin is designed allows to render an
imgtag without analtattribute. This is contradictory to the claim that the plugin is «standards compliant» as thealttag 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%2FBroader 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/imagecurrently fails to do so.Solution
Add
altTextas 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 byeleventy/imgalready).Further, the documentation should be updated to include meaningful alt text, so that copy & pasting does not lead to broken code.