-
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.
Create rule S6850 for HTML: Heading elements should have accessible c…
…ontent (#3652) * Add html to rule S6850 * Add HTML documentation to S6850 Also improve the wording by replacing the term _header_ with the semantically correct _heading_ one. * Split the rules tags Also format the JavaScript sample with 2-spaces identation. --------- Co-authored-by: ericmorand-sonarsource <ericmorand-sonarsource@users.noreply.github.com> Co-authored-by: Eric MORAND <eric.morand@sonarsource.com> Co-authored-by: Ilia Kebets <104737176+ilia-kebets-sonarsource@users.noreply.github.com>
- Loading branch information
4 people
authored
Feb 16, 2024
1 parent
6ba18ae
commit 90b7373
Showing
6 changed files
with
132 additions
and
69 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 |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "tags": [ | ||
| "accessibility" | ||
| ] | ||
| } |
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,45 @@ | ||
| include::../rule.adoc[tag=header] | ||
|
|
||
| === Code examples | ||
|
|
||
| ==== Noncompliant code example | ||
|
|
||
| [source,html,diff-id=1,diff-type=noncompliant] | ||
| ---- | ||
| <h1>JavaScript Programming Guide</h1> | ||
| <p>An introduction to JavaScript programming and its applications.</p> | ||
| <h2>JavaScript Basics</h2> | ||
| <p>Understanding the basic concepts in JavaScript programming.</p> | ||
| <h3>Variables</h3> | ||
| <p>Explanation of what variables are and how to declare them in JavaScript.</p> | ||
| <h3 aria-hidden>Data Types</h3> <!-- Noncompliant --> | ||
| <p>Overview of the different data types in JavaScript.</p> | ||
| <h3 /> <!-- Noncompliant --> | ||
| <p>Understanding how to declare and use functions in JavaScript.</p> | ||
| ---- | ||
|
|
||
| ==== Compliant solution | ||
|
|
||
| [source,html,diff-id=1,diff-type=compliant] | ||
| ---- | ||
| <h1>JavaScript Programming Guide</h1> | ||
| <p>An introduction to JavaScript programming and its applications.</p> | ||
| <h2>JavaScript Basics</h2> | ||
| <p>Understanding the basic concepts in JavaScript programming.</p> | ||
| <h3>Variables</h3> | ||
| <p>Explanation of what variables are and how to declare them in JavaScript.</p> | ||
| <h3>Data Types</h3> | ||
| <p>Overview of the different data types in JavaScript.</p> | ||
| <h3>Functions</h3> | ||
| <p>Understanding how to declare and use functions in JavaScript.</p> | ||
| ---- | ||
|
|
||
| include::../rule.adoc[tag=footer] |
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,26 +1,6 @@ | ||
| { | ||
| "title": "Header elements should have accessible content", | ||
| "type": "CODE_SMELL", | ||
| "status": "ready", | ||
| "remediation": { | ||
| "func": "Constant\/Issue", | ||
| "constantCost": "5min" | ||
| }, | ||
| "tags": [ | ||
| "accessibility", | ||
| "react" | ||
| ], | ||
| "defaultSeverity": "Major", | ||
| "ruleSpecification": "RSPEC-6850", | ||
| "sqKey": "S6850", | ||
| "scope": "All", | ||
| "defaultQualityProfiles": ["Sonar way"], | ||
| "quickfix": "infeasible", | ||
| "code": { | ||
| "impacts": { | ||
| "MAINTAINABILITY": "LOW", | ||
| "RELIABILITY": "MEDIUM" | ||
| }, | ||
| "attribute": "CONVENTIONAL" | ||
| } | ||
| ] | ||
| } |
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 |
|---|---|---|
| @@ -1,2 +1,22 @@ | ||
| { | ||
| } | ||
| "title": "Heading elements should have accessible content", | ||
| "type": "CODE_SMELL", | ||
| "status": "ready", | ||
| "remediation": { | ||
| "func": "Constant\/Issue", | ||
| "constantCost": "5min" | ||
| }, | ||
| "defaultSeverity": "Major", | ||
| "ruleSpecification": "RSPEC-6850", | ||
| "sqKey": "S6850", | ||
| "scope": "All", | ||
| "defaultQualityProfiles": ["Sonar way"], | ||
| "quickfix": "infeasible", | ||
| "code": { | ||
| "impacts": { | ||
| "MAINTAINABILITY": "LOW", | ||
| "RELIABILITY": "MEDIUM" | ||
| }, | ||
| "attribute": "CONVENTIONAL" | ||
| } | ||
| } |
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,30 @@ | ||
| :doctype: book | ||
|
|
||
| # tag::header[] | ||
| == Why is this an issue? | ||
|
|
||
| Heading elements are represented by the tags ``++<h1>++`` through ``++<h6>++``, with ``++<h1>++`` being the highest level and ``++<h6>++`` being the lowest. These elements are used to structure the content of the page and create a hierarchical outline that can be followed by users and search engines alike. | ||
|
|
||
| In the context of accessibility, heading elements play a crucial role. They provide a way for users, especially those using assistive technologies like screen readers, to navigate through the content of a webpage. By reading out the headings, screen readers can give users an overview of the content and allow them to jump to the section they're interested in. | ||
|
|
||
| If a heading element is empty, it can lead to confusion as it doesn't provide any information about the content that follows. This can make navigation difficult for users relying on screen readers, resulting in a poor user experience and making the website less accessible for people with visual impairments. | ||
|
|
||
| Therefore, to ensure your website is accessible to all users, it's important to always include meaningful content in your heading elements. | ||
|
|
||
| == How to fix it | ||
|
|
||
| Do not leave empty your heading elements. | ||
|
|
||
| # end::header[] | ||
|
|
||
| === Code examples | ||
|
|
||
| # tag::footer[] | ||
| == Resources | ||
| === Documentation | ||
|
|
||
| * MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements[Heading elements] | ||
| * MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden[aria-hidden] | ||
| * WCAG - https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html[Headings and Labels] | ||
|
|
||
| # end::footer[] |