-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Extend rule S1077 for JavaScript (#3442)
- Loading branch information
1 parent
82cc53e
commit 583741f
Showing
5 changed files
with
200 additions
and
88 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,3 @@ | ||
| { | ||
| "title": "Image, area and button with image tags should have an \"alt\" attribute", | ||
| "type": "BUG", | ||
| "code": { | ||
| "impacts": { | ||
| "RELIABILITY": "LOW" | ||
| }, | ||
| "attribute": "COMPLETE" | ||
| }, | ||
| "status": "ready", | ||
| "remediation": { | ||
| "func": "Constant\/Issue", | ||
| "constantCost": "5min" | ||
| }, | ||
| "tags": [ | ||
| "accessibility", | ||
| "wcag2-a" | ||
| ], | ||
| "extra": { | ||
| "replacementRules": [ | ||
|
|
||
| ], | ||
| "legacyKeys": [ | ||
| "ImgWithoutAltCheck" | ||
| ] | ||
| }, | ||
| "defaultSeverity": "Minor", | ||
| "ruleSpecification": "RSPEC-1077", | ||
| "sqKey": "ImgWithoutAltCheck", | ||
| "scope": "Main", | ||
| "defaultQualityProfiles": [ | ||
| "Sonar way" | ||
| ], | ||
| "quickfix": "unknown" | ||
| "title": "Image, area and button with image elements should have an \"alt\" attribute" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "tags": [ | ||
| "accessibility", | ||
| "wcag2-a", | ||
| "react" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| == Why is this an issue? | ||
|
|
||
| The ``++alt++``, ``++aria-label++`` and ``++aria-labelledby++`` attributes provide a textual alternative to an image. | ||
|
|
||
| It is used whenever the actual image cannot be rendered. | ||
|
|
||
| Common reasons for that include: | ||
|
|
||
| * The image can no longer be found | ||
| * Visually impaired users using a screen reader software | ||
| * Image loading is disabled, to reduce data consumption on mobile phones | ||
| It is also very important not to set an alternative text attribute to a non-informative value. For example, ``++<img ... alt="logo">++`` is useless as it doesn't give any information to the user. In this case, as for any other decorative image, it is better to use a CSS background image instead of an ``++<img>++`` tag. If using CSS ``++background-image++`` is not possible, an empty ``++alt=""++`` is tolerated. See Exceptions below. | ||
|
|
||
|
|
||
| This rule raises an issue when: | ||
|
|
||
| * An ``++<img>++`` element has no ``++alt++`` attribute. | ||
| * An ``++<input type="image">++`` element has no ``++alt++``, ``++aria-label++`` or ``++aria-labelledby++`` attribute or they hold an empty string. | ||
| * An ``++<area>++`` element within an image map has no ``++alt++``, ``++aria-label++`` or ``++aria-labelledby++`` attribute. | ||
| * An ``++<object>++`` element has no inner text, ``++title++``, ``++aria-label++`` or ``++aria-labelledby++`` attribute. | ||
| === Exceptions | ||
|
|
||
| ``++<img>++`` elements with an empty string ``++alt=""++`` attribute won't raise any issue. However, this way should be used in two cases only: | ||
|
|
||
|
|
||
| When the image is decorative and it is not possible to use a CSS background image. For example, when the decorative ``++<img>++`` is generated via javascript with a source image coming from a database, it is better to use an ``++<img alt="">++`` tag rather than generate CSS code. | ||
|
|
||
| [source,html] | ||
| ---- | ||
| <li *ngFor="let image of images"> | ||
| <img [src]="image" alt=""> | ||
| </li> | ||
| ---- | ||
| When the image is not decorative but its ``++alt++`` text would repeat a nearby text. For example, images contained in links should not duplicate the link's text in their ``++alt++`` attribute, as it would make the screen reader repeat the text twice. | ||
|
|
||
| [source,html] | ||
| ---- | ||
| <a href="flowers.html"> | ||
| <img src="tulip.gif" alt="" /> | ||
| A blooming tulip | ||
| </a> | ||
| ---- | ||
| In all other cases you should use CSS background images. | ||
|
|
||
| == How to fix it | ||
|
|
||
| Add an alternative text to the HTML element. | ||
|
|
||
| === Code examples | ||
|
|
||
| ==== Noncompliant code example | ||
|
|
||
| [source,html,diff-id=1,diff-type=noncompliant] | ||
| ---- | ||
| <img src="foo.png" /> <!-- missing `alt` attribute --> | ||
| <input type="image" src="bar.png" /> <!-- missing alternative text attribute --> | ||
| <input type="image" src="bar.png" alt="" /> <!-- empty alternative text attribute on <input> --> | ||
| <img src="house.gif" usemap="#map1" | ||
| alt="rooms of the house." /> | ||
| <map id="map1" name="map1"> | ||
| <area shape="rect" coords="0,0,42,42" | ||
| href="bedroom.html"/> <!-- missing alternative text attribute on <area> --> | ||
| <area shape="rect" coords="0,0,21,21" | ||
| href="lounge.html" alt=""/> <!-- empty `alt` attribute on <area> --> | ||
| </map> | ||
| <object {...props} /> <!-- missing alternative text attribute on <area> --> | ||
| ---- | ||
|
|
||
| ==== Compliant solution | ||
|
|
||
| [source,html,diff-id=1,diff-type=compliant] | ||
| ---- | ||
| <img src="foo.png" alt="Some textual description of foo.png" /> | ||
| <input type="image" src="bar.png" aria-labelledby="Textual description of bar.png" /> | ||
| <img src="house.gif" usemap="#map1" | ||
| alt="rooms of the house." /> | ||
| <map id="map1" name="map1"> | ||
| <area shape="rect" coords="0,0,42,42" | ||
| href="bedroom.html" alt="Bedroom" /> | ||
| <area shape="rect" coords="0,0,21,21" | ||
| href="lounge.html" aria-label="Lounge"/> | ||
| </map> | ||
| <object>My welcoming Bar</object> | ||
| ---- | ||
|
|
||
| == Resources | ||
| === Documentation | ||
|
|
||
| * W3C - https://www.w3.org/WAI/tutorials/images/decision-tree/[W3C WAI Web Accessibility Tutorials] | ||
| * W3C - https://www.w3.org/TR/WCAG20-TECHS/H24.html[Providing text alternatives for the area elements of image maps] | ||
| * W3C - https://www.w3.org/TR/WCAG20-TECHS/H36.html[Using alt attributes on images used as submit buttons] | ||
| * W3C - https://www.w3.org/TR/WCAG20-TECHS/H37.html[Using alt attributes on img elements] | ||
| * W3C - https://www.w3.org/TR/WCAG20-TECHS/H67.html[Using null alt text and no title attribute on img elements for images that AT should ignore] | ||
| * W3C - https://www.w3.org/TR/WCAG20-TECHS/H2.html[Combining adjacent image and text links for the same resource] | ||
| * W3C - https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-text-equiv-all[Non-text Content] | ||
| * W3C - https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-navigation-mechanisms-refs[Link Purpose (In Context)] | ||
| * W3C - https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-navigation-mechanisms-link[Link Purpose (Link Only)] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,35 @@ | ||
| { | ||
| "title": "Image, area, button with image and object elements should have an alternative text", | ||
| "type": "CODE_SMELL", | ||
| "code": { | ||
| "impacts": { | ||
| "RELIABILITY": "LOW" | ||
| }, | ||
| "attribute": "COMPLETE" | ||
| }, | ||
| "status": "ready", | ||
| "remediation": { | ||
| "func": "Constant\/Issue", | ||
| "constantCost": "5min" | ||
| }, | ||
| "tags": [ | ||
| "accessibility", | ||
| "wcag2-a" | ||
| ], | ||
| "extra": { | ||
| "replacementRules": [ | ||
|
|
||
| ], | ||
| "legacyKeys": [ | ||
| "ImgWithoutAltCheck" | ||
| ] | ||
| }, | ||
| "defaultSeverity": "Minor", | ||
| "ruleSpecification": "RSPEC-1077", | ||
| "sqKey": "ImgWithoutAltCheck", | ||
| "scope": "Main", | ||
| "defaultQualityProfiles": [ | ||
| "Sonar way" | ||
| ], | ||
| "quickfix": "infeasible" | ||
| } |