• Home
• org.sonarsource.html
• sonar-html-plugin
• 3.18.0.5605
• source code
• S6852.html

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

org.sonar.l10n.web.rules.Web.S6852.html Maven / Gradle / Ivy

Interactive elements being focusable is vital for website accessibility. It enables users, including those using assistive technologies, to
interact effectively with the website. Without this, some users may be unable to access certain features, leading to a poor user experience and
potential non-compliance with accessibility standards.
Why is this an issue?
Lack of focusability can hinder navigation and interaction with the website, resulting in an exclusionary user experience and possible violation of
accessibility guidelines.
How to fix it
Ensure that all interactive elements on your website can receive focus. This can be achieved by using standard HTML interactive elements, or by
assigning a tabindex attribute of "0" to custom interactive components.
Code examples
Noncompliant code example
<!-- Element with mouse/keyboard handler has no tabindex -->
<span onclick="submitForm();" role="button">Submit</span>

<!-- Anchor element without href is not focusable -->
<a onclick="showNextPage();" role="button">Next page</a>

Compliant solution
<!-- Element with mouse handler has tabIndex -->
<span onClick="doSomething();" tabIndex="0" role="button">Submit</span>

<!-- Focusable anchor with mouse handler -->
<a href="javascript:void(0);" onClick="doSomething();"> Next page </a>

Resources
Documentation

  
 W3C - Creating a logical tab order through links, form controls, and objects 
  
 W3C - Fundamental Keyboard Navigation Conventions 
  
 MDN - ARIA: button role -
  Accessibility concerns