What is the impact of changing the default behavior of an HTML element?

Let's break it down:

  

Is it permissible to use JavaScript to change the natural behavior of one element to act as another?

Yes. Javascript was created with the intention of giving intelligence to the components of the pages. In a way, imagination (and browser security checks) is the limit of what you can do.

You can make a button behave like a text box, or a li list behaves as a paragraph. Note that just like the things people do on that Jackass TV show, just because you can does not mean you should.

  

What is the impact of this approach? Is there a performance difference in page rendering? And how can this affect usability?

This is the X-point of your question. There is, indeed, a difference. Let's take the case of radio versus checkbox as an example. There is a browser time to load these components. After that time, they will already be loaded with their default behavior. In general this load time is very short because browsers are implemented by the best multidisciplinary teams in the world and one of the things these teams preach and apply is that everything should be as simple as possible.

When you add unnecessary complexity to a component, you add the runtime of your JavaScript to the load time of the component. Therefore, your% of% will never load in less time or equal to the loading time of a% healthy%. You need time to castrate the checkbox Frankenstein , and then the time to castrate it to behave as a checkbox .

This makes the page slower, but if this is noticeable to the user it depends on who is going to play the game and the amount of elements that will be modified.

Note that it is not just performance that is impacted. You now have a code to keep, and code - especially HTML, Javascript and CSS - deteriorates over time. Someone will someday have to do maintenance on it, and even if it's the original author, it's normal for this kind of work to work like a snowball. Soon, branches of code developed specifically for different versions of different browsers. Integration with new plugins becomes increasingly difficult as well.

  

If the usability is directly affected, can it be corrected using the role="checkbox" attribute?

It is not guaranteed. This is kind of like pushing the dirt under the rug. The best correction is to start over from scratch and follow good developmental patterns. After all, they were created for a reason.

There is another factor to consider besides performance. You can spend development days to ensure that changing the components does not slow down your page or greatly increase the execution time. But remember that today everyone browses by dozens, and some users hundreds of websites that follow good design standards.

This means that users are trained to handle check box as check box and radio button as radio button. If at the end of the page your page is very fast but the users are confused, all your development effort was in vain.

1) Is it permissible to use JavaScript to change the natural behavior of one element to act as another?

JavaScript is a language that makes websites become interactive, and according to the JavaScript page, the rules of language are all possible.

2) What is the impact of this approach? Is there a performance difference in page rendering? And how can this affect usability?

I) impact:

II) page rendering impact:

  

Is it permissible to use JavaScript to change the natural behavior of one element to act as another?

Yes, from the moment we can stop the propagation and cancel a certain event (if it is cancelable, without stopping the propagation of the same)

event.stopPropagation();

event.preventDefault();

We have the power to modify what that element will do, I can say that an input of type text will behave like a button that when receiving a click event for example cancels its focus event and triggers a click

  

What is the impact of this approach? Is there a performance difference in page rendering? And how can this affect usability?

This can affect you in different ways depending on your code, the browser, your internet connection ...

You can avoid using external .js files otherwise you rely on your internet connection for your script to work and "modify the element"

The performance difference will not be noticeable, however, if you do not prevent the element from flowing, your browser will know how to handle it, the moment you start to prevent native functions, stop events, modify events, everything this will have a cost for your application, stopping to analyze better think as follows, you have a check that when you receive a click it will mark itself and unmark another element soon you will make one more change in your DOM and this but it will cost you.

Depending on your script, it will disrupt the page loading, so 'modify affects page loading.'

A basic example to demonstrate what might happen if your script delays and someone clicks on your check. :

setTimeout(function(){
  jQuery('input').click(function(){
    return false;
  });
},3000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="checkbox">

In the above example you can click on the checkbox up to 3 seconds after the javascript code, after that I return false in the click event thus deactivating your event to check or not the checkbox, this is an example that can happen if your script it takes time to load and someone clicks on your 'checkbox' that should work as a radio button.

  

If the usability is directly affected, can it be corrected using the role="checkbox" attribute?

This attribute serves to give more semantics to markup-based document elements, I do not think it would be correct to use it in case