SonarSource Rules
  • Products

    In-IDE

    Code Quality and Security in your IDE with SonarQube Ide

    IDE extension that lets you fix coding issues before they exist!

    Discover SonarQube for IDE

    SaaS

    Code Quality and Security in the cloud with SonarQube Cloud

    Setup is effortless and analysis is automatic for most languages

    Discover SonarQube Cloud

    Self-Hosted

    Code Quality and Security Self-Hosted with SonarQube Server

    Fast, accurate analysis; enterprise scalability

    Discover SonarQube Server
  • SecretsSecrets
  • ABAPABAP
  • AnsibleAnsible
  • ApexApex
  • AzureResourceManagerAzureResourceManager
  • CC
  • C#C#
  • C++C++
  • CloudFormationCloudFormation
  • COBOLCOBOL
  • CSSCSS
  • DartDart
  • DockerDocker
  • FlexFlex
  • GitHub ActionsGitHub Actions
  • GoGo
  • HTMLHTML
  • JavaJava
  • JavaScriptJavaScript
  • JSONJSON
  • JCLJCL
  • KotlinKotlin
  • KubernetesKubernetes
  • Objective CObjective C
  • PHPPHP
  • PL/IPL/I
  • PL/SQLPL/SQL
  • PythonPython
  • RPGRPG
  • RubyRuby
  • RustRust
  • ScalaScala
  • ShellShell
  • SwiftSwift
  • TerraformTerraform
  • TextText
  • TypeScriptTypeScript
  • T-SQLT-SQL
  • VB.NETVB.NET
  • VB6VB6
  • XMLXML
  • YAMLYAML
HTML

HTML static code analysis

Unique rules to find Bugs, Security Hotspots, and Code Smells in your HTML code

  • All rules 83
  • Bug23
  • Security Hotspot3
  • Code Smell57
Filtered: 10 rules found
wcag2-a
    Impact
      Clean code attribute
        1. "<object>" tags should provide an alternative content

           Code Smell
        2. Table cells should reference their headers

           Bug
        3. Tables used for layout should not include semantic markup

           Bug
        4. Tables should have headers

           Bug
        5. "aria-label" or "aria-labelledby" attributes should be used to differentiate similar elements

           Code Smell
        6. "<html>" element should have a language attribute

           Bug
        7. "<th>" tags should have "id" or "scope" attributes

           Bug
        8. "input", "select" and "textarea" tags should be labeled

           Bug
        9. "<table>" tags should have a description

           Bug
        10. Image, area and button with image elements should have an "alt" attribute

           Code Smell

        "aria-label" or "aria-labelledby" attributes should be used to differentiate similar elements

        intentionality - complete
        maintainability
        Code Smell
        • accessibility
        • wcag2-a

        Why is this an issue?

        More Info

        If a page contains multiple <nav> or <aside> elements, each one should have an aria-label or aria-labelledby attribute so that they can be differentiated. The same rule applies when multiple elements have a role attribute with the same "landmark" value.

        Landmark roles are: banner, complementary, contentinfo, form, main, navigation, search, application. 

        The use of ARIA markup helps users of screen readers navigate across blocks of content. For example it makes groups of links easier to locate or skip.

        Noncompliant code example

        Multiple <nav> element

        <nav> <!-- Noncompliant -->
            <ul>
                <li>A list of navigation links</li>
            </ul>
        </nav>
        
        <article>
            <nav> <!-- Noncompliant -->
                Another list of navigation links
            </nav>
        </article>
        

        Repeated "landmark" role "navigation"

        <div id="mainnav" role="navigation"> <!-- Noncompliant -->
            <h2 id="mainnavheading">Site Navigation</h2>
            <ul>
               <li>List of links</li>
            </ul>
        </div>
        <div id="secondarynav" role="navigation"> <!-- Noncompliant -->
            <h2 id="secondarynavheading">Related links</h2>
            <ul>
               <li>List of links</li>
            </ul>
        </div>
        

        Compliant solution

        <nav aria-label="Site menu">
            <ul>
                <li>A list of navigation links</li>
            </ul>
        </nav>
        
        <article>
            <nav aria-label="Related links">
                Another list of navigation links
            </nav>
        </article>
        
        <div id="mainnav" role="navigation" aria-labelledby="mainnavheading">
            <h2 id="mainnavheading">Site Navigation</h2>
            <ul>
               <li>List of links</li>
            </ul>
        </div>
        <div id="secondarynav" role="navigation" aria-labelledby="secondarynavheading">
            <h2 id="secondarynavheading">Related links</h2>
            <ul>
               <li>List of links</li>
            </ul>
        </div>
        
          Available In:
        • SonarQube IdeCatch issues on the fly,
          in your IDE
        • SonarQube CloudDetect issues in your GitHub, Azure DevOps Services, Bitbucket Cloud, GitLab repositories
        • SonarQube Community BuildAnalyze code in your
          on-premise CI
          Available Since
          9.1
        • SonarQube ServerAnalyze code in your
          on-premise CI
          Developer Edition
          Available Since
          9.1

        © 2008-2025 SonarSource SA. All rights reserved.

        Privacy Policy | Cookie Policy | Terms of Use