Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Align S6850 documentation with the RSPEC one #4581

Merged
merged 2 commits into from
Feb 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,61 +1,61 @@
<h2>Why is this an issue?</h2>
<p>Header elements are represented by the tags <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, with <code>&lt;h1&gt;</code> being the highest
level and <code>&lt;h6&gt;</code> 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.</p>
<p>In the context of accessibility, header 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 headers, screen readers can give users an overview of the
<p>Heading elements are represented by the tags <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, with <code>&lt;h1&gt;</code> being the
highest level and <code>&lt;h6&gt;</code> 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.</p>
<p>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.</p>
<p>If a header element is empty, it can lead to confusion as it doesn’t provide any information about the content that follows. This can make
<p>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.</p>
<p>Therefore, to ensure your website is accessible to all users, it’s important to always include meaningful content in your header elements.</p>
<p>Therefore, to ensure your website is accessible to all users, it’s important to always include meaningful content in your heading elements.</p>
<h2>How to fix it</h2>
<p>Do not leave empty your header elements.</p>
<p>Do not leave empty your heading elements.</p>
<h3>Code examples</h3>
<h4>Noncompliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
function JavaScript101() {
return (
&lt;&gt;
&lt;h1&gt;JavaScript Programming Guide&lt;/h1&gt;
&lt;p&gt;An introduction to JavaScript programming and its applications.&lt;/p&gt;
return (
&lt;&gt;
&lt;h1&gt;JavaScript Programming Guide&lt;/h1&gt;
&lt;p&gt;An introduction to JavaScript programming and its applications.&lt;/p&gt;

&lt;h2&gt;JavaScript Basics&lt;/h2&gt;
&lt;p&gt;Understanding the basic concepts in JavaScript programming.&lt;/p&gt;
&lt;h2&gt;JavaScript Basics&lt;/h2&gt;
&lt;p&gt;Understanding the basic concepts in JavaScript programming.&lt;/p&gt;

&lt;h3&gt;Variables&lt;/h3&gt;
&lt;p&gt;Explanation of what variables are and how to declare them in JavaScript.&lt;/p&gt;
&lt;h3&gt;Variables&lt;/h3&gt;
&lt;p&gt;Explanation of what variables are and how to declare them in JavaScript.&lt;/p&gt;

&lt;h3 aria-hidden&gt;Data Types&lt;/h3&gt; // Noncompliant
&lt;p&gt;Overview of the different data types in JavaScript.&lt;/p&gt;
&lt;h3 aria-hidden&gt;Data Types&lt;/h3&gt; // Noncompliant
&lt;p&gt;Overview of the different data types in JavaScript.&lt;/p&gt;

&lt;h3 /&gt; // Noncompliant
&lt;p&gt;Understanding how to declare and use functions in JavaScript.&lt;/p&gt;
&lt;/&gt;
);
&lt;h3 /&gt; // Noncompliant
&lt;p&gt;Understanding how to declare and use functions in JavaScript.&lt;/p&gt;
&lt;/&gt;
);
}
</pre>
<h4>Compliant solution</h4>
<pre data-diff-id="1" data-diff-type="compliant">
function JavaScript101() {
return (
&lt;&gt;
&lt;h1&gt;JavaScript Programming Guide&lt;/h1&gt;
&lt;p&gt;An introduction to JavaScript programming and its applications.&lt;/p&gt;
return (
&lt;&gt;
&lt;h1&gt;JavaScript Programming Guide&lt;/h1&gt;
&lt;p&gt;An introduction to JavaScript programming and its applications.&lt;/p&gt;

&lt;h2&gt;JavaScript Basics&lt;/h2&gt;
&lt;p&gt;Understanding the basic concepts in JavaScript programming.&lt;/p&gt;
&lt;h2&gt;JavaScript Basics&lt;/h2&gt;
&lt;p&gt;Understanding the basic concepts in JavaScript programming.&lt;/p&gt;

&lt;h3&gt;Variables&lt;/h3&gt;
&lt;p&gt;Explanation of what variables are and how to declare them in JavaScript.&lt;/p&gt;
&lt;h3&gt;Variables&lt;/h3&gt;
&lt;p&gt;Explanation of what variables are and how to declare them in JavaScript.&lt;/p&gt;

&lt;h3&gt;Data Types&lt;/h3&gt;
&lt;p&gt;Overview of the different data types in JavaScript.&lt;/p&gt;
&lt;h3&gt;Data Types&lt;/h3&gt;
&lt;p&gt;Overview of the different data types in JavaScript.&lt;/p&gt;

&lt;h3&gt;Functions&lt;/h3&gt;
&lt;p&gt;Understanding how to declare and use functions in JavaScript.&lt;/p&gt;
&lt;/&gt;
);
&lt;h3&gt;Functions&lt;/h3&gt;
&lt;p&gt;Understanding how to declare and use functions in JavaScript.&lt;/p&gt;
&lt;/&gt;
);
}
</pre>
<h2>Resources</h2>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"title": "Header elements should have accessible content",
"title": "Heading elements should have accessible content",
"type": "CODE_SMELL",
"status": "ready",
"remediation": {
Expand Down