8 new HTML rules making your web frontend safer and more accessible + Vue.js template support

Clean Code Sonar Updates
1

Hi web developers,

We have two big news for you:

HTML issues in Vue.js templates
We can now detect HTML issues in Vue.js template files (*.vue). Note that Javascript was already supported :wink:

Vuejs_html
Vuejs_html2555×907 88.8 KB

8 New accessibility and security rules

Making our products accessible to everybody is very important for us and we believe that it is also the case for your projects. This is why we added 7 new accessibility rules:

  • S5256: Tables should have headers. (Bug)

  • S5258: Tables used for layout should not include semantic markup. (Bug)

  • S5260: Table cells should reference their headers. (Bug)

  • S5254: “<html>” element should have a language attribute. (Bug)

  • S5257: HTML “<table>” should not be used for layout purposes. (Code Smell)

  • S5255: “aria-label” or “aria-labelledby” attributes should be used to differentiate similar elements. (Code Smell)

  • S5264: “<object>” tags should provide an alternative content. (Code Smell)

We also improved existing accessibility rules to reduce false positives: S1085, S1077, S1082, S1097.
All these rules are based on the Techniques and Failures for Web Content Accessibility Guidelines 2.0 (also known as WCAG 2.0) and Web Accessibility Tutorials from W3C.

Last but not least, we added a new vulnerability rule to avoid phishing attacks.

  • S5148: Links with “target=_blank” should prevent phishing attacks to be performed

Here are examples of these rules in action:

For more information you can read the changelog.

You can already enjoy these new features on SonarCloud, SonarLint for Eclipse and SonarLint for VSCode. As for SonarQube, these new features will be included in the next version (8.0). To get these features in SonarQube now, simply update to v3.2 of the HTML analysis engine.

All feedback is welcome.

Cheers,
Nicolas

7 Likes