Create rule S6851: Images should have a non-redundant alternate descr…

…iption (#3441)

* Create rule S6851

* Update metadata and description

* Update rules/S6851/javascript/metadata.json

Co-authored-by: Ilia Kebets <104737176+ilia-kebets-sonarsource@users.noreply.github.com>

* Update rules/S6851/javascript/rule.adoc

Co-authored-by: Ilia Kebets <104737176+ilia-kebets-sonarsource@users.noreply.github.com>

* Update rules/S6851/javascript/rule.adoc

Co-authored-by: Ilia Kebets <104737176+ilia-kebets-sonarsource@users.noreply.github.com>

---------

Co-authored-by: yassin-kammoun-sonarsource <yassin-kammoun-sonarsource@users.noreply.github.com>
Co-authored-by: yassin-kammoun-sonarsource <yassin.kammoun@sonarsource.com>
Co-authored-by: Yassin Kammoun <52890329+yassin-kammoun-sonarsource@users.noreply.github.com>
Co-authored-by: Ilia Kebets <104737176+ilia-kebets-sonarsource@users.noreply.github.com>

rules/S6851/javascript/metadata.json

@@ -0,0 +1,26 @@
+{
+  "title": "Images should have a non-redundant alternate description",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "accessibility",
+    "react"
+  ],
+  "defaultSeverity": "Minor",
+  "ruleSpecification": "RSPEC-6851",
+  "sqKey": "S6851",
+  "scope": "All",
+  "defaultQualityProfiles": ["Sonar way"],
+  "quickfix": "infeasible",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "LOW",
+      "RELIABILITY": "LOW"
+    },
+    "attribute": "CONVENTIONAL"
+  }
+}

rules/S6851/javascript/rule.adoc

@@ -0,0 +1,38 @@
+== Why is this an issue?
+
+``++alt++`` attributes, also known as "alt tags" or "alt descriptions," are used to specify alternative text that is rendered when an image cannot be displayed. They are crucial for improving web accessibility, as they provide a text description of images for users who rely on screen readers.
+
+Screen readers announce the presence of an ``++<img>++`` element and read its ``++alt++`` attribute aloud to describe the image. If the ``++alt++`` attribute includes words like "image", "picture", or "photo", it leads to redundancy as the screen reader would repeat "image". For instance, an ``++alt++`` attribute like "image of a sunrise" would be read as "Image, image of a sunrise", unnecessarily repeating "image".
+
+Instead, the ``++alt++`` attribute should focus on describing the content of the image, not the fact that it is an image. This makes the browsing experience more efficient and enjoyable for users of screen readers, as they receive a concise and meaningful description of the image without unnecessary repetition.
+
+== How to fix it
+
+To fix this issue, you should revise the ``++alt++`` attribute of your ``++<img>++`` elements to remove any instances of the words "image", "picture", or "photo". Instead, provide a concise and accurate description of the image content that adds value for users who cannot see the image.
+
+=== Code examples
+
+==== Noncompliant code example
+
+[source,javascript,diff-id=1,diff-type=noncompliant]
+----
+function MyImage() {
+    return <img src="sunrise.jpg" alt="image of a sunrise" />; // Noncompliant: "Image, image of a sunrise"
+}
+----
+
+==== Compliant solution
+
+[source,javascript,diff-id=1,diff-type=compliant]
+----
+function MyImage() {
+    return <img src="sunrise.jpg" alt="a sunrise over a mountain range" />;
+}
+----
+
+== Resources
+=== Documentation
+
+* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img[img element]
+* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt[alt property]
+* WebAIM - https://webaim.org/techniques/alttext/[Alternative Text]

rules/S6851/metadata.json

@@ -0,0 +1,2 @@
+{
+}