Feature/longdesc feature

checka11y-errors.css

@@ -302,6 +302,26 @@ img:not([alt]) {
   padding-bottom: 80px;
 }
 
+img[longdesc$=".jpg" i], img[longdesc$=".jpeg" i], img[longdesc$=".png" i], img[longdesc$=".gif" i], img[longdesc$=".svg" i], img[longdesc$=".bmp" i], img[longdesc$=".tif" i], img[longdesc$=".tiff" i], img[longdesc$=".eps" i], img[longdesc$=".avif" i], img[longdesc$=".webp" i] {
+  border: 0.4rem solid;
+  border-color: var(--checka11y-border-error);
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="450px" height="80px" viewBox="0 0 450 80"><rect class="box" x="4" y="4" width="442" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0015): longdesc attribute cannot</text> <text x="15" y="60">point to an image.</text></g></svg>');
+  background-position: bottom center;
+  background-repeat: no-repeat;
+  min-width: 450px;
+  padding-bottom: 80px;
+}
+
+img[longdesc*=" "], img[longdesc=""] {
+  border: 0.4rem solid;
+  border-color: var(--checka11y-border-error);
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="450px" height="80px" viewBox="0 0 450 80"><rect class="box" x="4" y="4" width="442" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0016): longdesc attribute should be</text> <text x="15" y="60">a valid URL instead of plain text.</text></g></svg>');
+  background-position: bottom center;
+  background-repeat: no-repeat;
+  min-width: 450px;
+  padding-bottom: 80px;
+}
+
 a audio[controls] {
   border: 0.4rem solid;
   border-color: var(--checka11y-border-error);

checka11y-warnings.css

@@ -114,6 +114,16 @@ img[alt^="logo for" i], img[alt^="logo of" i], img[alt^="image of" i], img[alt^=
   padding-bottom: 80px;
 }
 
+img[longdesc] {
+  border: 0.4rem solid;
+  border-color: var(--checka11y-border-warning);
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="450px" height="80px" viewBox="0 0 450 80"><rect class="box" x="4" y="4" width="442" height="72" rx="12" ry="12" fill="rgba(255, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">WARNING (W0015): longdesc attribute is</text> <text x="15" y="60">deprecated and should be avoided.</text></g></svg>');
+  background-position: bottom center;
+  background-repeat: no-repeat;
+  min-width: 450px;
+  padding-bottom: 80px;
+}
+
 [style*="!important"]::after {
   display: block;
   font-size: 1rem;

codes.md

@@ -87,6 +87,12 @@ A list of every Checka11y.css error & warning code with details on what the issu
   - `<iframe>`
   - Any HTML element with `contentEditable`
 
+- ### E0015
+  The `longdesc` attribute has been detected in an `<img>` and it has an invalid value. The `longdesc` attribute must be a URL to a web page, but the detected `longdesc` is a link to an image which is an accessibility problem (because there won't be an image description.)
+
+- ### E0016
+  The `longdesc` attribute has been detected in an `<img>` and it has an invalid value. The `longdesc` attribute must be a URL to a web page, but the detected `longdesc` is empty or it contains blank spaces so it's not a valid URL.
+
 ## Warnings <small>(Wxxx)</small>
 
 - ### W0000
@@ -133,3 +139,6 @@ A list of every Checka11y.css error & warning code with details on what the issu
 
 - ### W0014
   The highlighted element `<a>` has been detected to have `href="https://youtube.com|https://youtu.be|https://spotify.com"`. Those anchor elements often have accessibility issues and need to be created with accessibility in mind. This can mean sometimes the element will link to sites non-accessible content because captioning is often missing or not well generated.
+
+- ### W0015
+  The `longdesc` attribute has been detected in an `<img>`. The `longdesc` attribute in images is deprecated and should not be used. It is not fully supported by HTML5, browsers, or screen readers. When present, it is commonly misused (it should point to an URL that is not an image).

cypress/integration/images_spec.js

@@ -48,4 +48,41 @@ describe("<images>", () => {
           .should('have.css', 'border-color', WARNING_BORDER_COLOR)
       });
   });
+
+  it('should show an alert (warning or error) if images have a longdesc', () => {
+    cy.get(`img[longdesc]`)
+      .each(element => {
+        cy.get(element)
+          .should('have.css', 'border-color')
+      });
+  });
+
+  it('should show error if images have a longdesc linking to an image', () => {
+    cy.get(`
+        img[longdesc$=".png"i], img[longdesc$=".jpg"i], img[longdesc$=".jpeg"i],
+        img[longdesc$=".gif"i], img[longdesc$=".svg"i], img[longdesc$=".bmp"i],
+        img[longdesc$=".eps"i], img[longdesc$=".tif"i], img[longdesc$=".tiff"i],
+        img[longdesc$=".webp"i], img[longdesc$=".avif"i]
+      `)
+      .each(element => {
+        cy.get(element)
+          .should('have.css', 'border-color', ERROR_BORDER_COLOR)
+      });
+  });
+
+  it('should show error if images have a longdesc with spaces (invalid URL, possible plain text)', () => {
+    cy.get(`img[longdesc*=" "]`)
+      .each(element => {
+        cy.get(element)
+          .should('have.css', 'border-color', ERROR_BORDER_COLOR)
+      });
+  });
+
+  it('should show error if images have an empty longdesc', () => {
+    cy.get(`img[longdesc=""]`)
+      .each(element => {
+        cy.get(element)
+          .should('have.css', 'border-color', ERROR_BORDER_COLOR)
+      });
+  });
 });

features.md

@@ -19,6 +19,8 @@ A list of every a11y concern Checka11y.css will check for and highlight with lin
 - [E0012](./codes.md#E0012): Checks `<dt>` and `<dd>` are the **only** direct children of `<dl>`.
 - [E0013](./codes.md#E0013): Checks if `<nav>` exists more than once on a page, that each nav is correctly labelled.
 - [E0014](./codes.md#E0014): Checks for a tab index value of -1 on commonly tabbed to elements.
+- [E0015](./codes.md#E0015): Checks for an image with a `longdesc` pointing to an image.
+- [E0016](./codes.md#E0016): Checks for an image with an empty `longdesc`.
 
 ## Warnings
 
@@ -37,3 +39,4 @@ A list of every a11y concern Checka11y.css will check for and highlight with lin
 - [W0012](./codes.md#W0012): Checks for heading element inside `<section>` element.
 - [W0013](./codes.md#W0013): Checks for anchor tags that contain a link to a PDF, Word, Excel, or PowerPoint document.
 - [W0014](./codes.md#W0014): Checks for anchor tags that contain a link to content site.
+- [W0015](./codes.md#W0014): Checks for images with the `longdesc` attribute.

src/checka11y.scss

@@ -1,3 +1,3 @@
 /*! Checka11y.css v2.0.0 | MIT License | github.com/jackdomleo7/Checka11y.css */
-@use "./errors/checka11y-errors.scss";
 @use "./warnings/checka11y-warnings.scss";
+@use "./errors/checka11y-errors.scss";

src/errors/features/_images.scss

@@ -4,3 +4,23 @@
 img:not( [alt] ) {
   @include vectorMessage(error, "E0008", 350, "All <img> must", "have alternative text.");
 }
+
+/* E0015: the longdesc attribute contains an invalid value */
+img[longdesc $= ".jpg" i],
+img[longdesc $= ".jpeg" i],
+img[longdesc $= ".png" i],
+img[longdesc $= ".gif" i],
+img[longdesc $= ".svg" i],
+img[longdesc $= ".bmp" i],
+img[longdesc $= ".tif" i],
+img[longdesc $= ".tiff" i],
+img[longdesc $= ".eps" i],
+img[longdesc $= ".avif" i],
+img[longdesc $= ".webp" i] {
+  @include vectorMessage(error, "E0015", 450, "longdesc attribute cannot", "point to an image.");
+}
+
+img[longdesc *= " "],
+img[longdesc = ""] {
+  @include vectorMessage(error, "E0016", 450, "longdesc attribute should be", "a valid URL instead of plain text.");
+}

src/warnings/features/_images.scss

@@ -25,3 +25,9 @@ $suspiciousAltStart: "graphic of", "bullet", "image of", "logo of", "logo for";
     @extend %imageMeaningfulAlt;
   }
 }
+
+/* W0015: longdesc attribute is deprecated */
+
+img[longdesc] {
+  @include vectorMessage(warning, "W0015", 450, "longdesc attribute is", "deprecated and should be avoided.");
+}

test/index.html

@@ -52,6 +52,17 @@ <h2>Images: All images should have a meaningful and descriptive alt attribute.</
       <img alt="image of an image" src="./assets/a11y.png" />
       <img alt="bullet 1" src="./assets/a11y.png" />
     </section>
+    <section>
+      <h2>Images: Should avoid longdesc attribute and it must be an URL.</h2>
+      <img alt="accessibility icon" src="./assets/a11y.png" longdesc="https://test.test" />
+      <img alt="accessibility icon" src="./assets/a11y.png" longdesc="https://test.jpg" />
+      <img alt="accessibility icon" src="./assets/a11y.png" longdesc="https://test.png" />
+      <img alt="accessibility icon" src="./assets/a11y.png" longdesc="https://test.gif" />
+      <img alt="accessibility icon" src="./assets/a11y.png" longdesc="https://test.avif" />
+      <img alt="accessibility icon" src="./assets/a11y.png" longdesc="https://test.svg" />
+      <img alt="accessibility icon" src="./assets/a11y.png" longdesc="This longdesc is invalid because it should be an URL instead of plain text" />
+      <img alt="accessibility icon" src="./assets/a11y.png" longdesc="" />
+    </section>
     <section>
       <h2>iframe: iframe has title attribute</h2>
       <iframe src="https://checka11y.jackdomleo.dev" height="500" width="500"></iframe>