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

44

Recently there was a question here in Stack Overflow about changing the default behavior of checkbox to act on the page as a radio , that is, when selecting an item, the others should be deselected, keeping the selection unique. Responses were given using JavaScript basically by altering the natural behavior of checkbox by treating the events in that element. I always believed that doing so was not recommended and that the ideal would be to use the radio element itself for semantic reasons. I came to comment on the possible solution using the appearance property of CSS, as it maintains the semantics of the code, changing only the appearance of the element, without needing JavaScript:

input[type=radio] {
  appearance: checkbox;
  -moz-appearance: checkbox;
  -webkit-appearance: checkbox;
}
<input name="foo" type="radio" value="1" checked> 1
<input name="foo" type="radio" value="2"> 2
<input name="foo" type="radio" value="3"> 3

However, searching, I saw that such a property was removed from CSS 3, so even though browsers still support such a property, I believe its use should be avoided and that approach using JavaScript is commonly discussed in forums, but few the places that discuss whether it is in fact appropriate to do so.

The conclusion I get is that you should not change the behavior of one element while semantically it is appropriate to use another one, but I can not state canonically what the impact of both the performance, if any, and the usability of the page is. >

Then:

  • Is it allowed to use JavaScript to change the natural behavior of one element to act as another?
  • What is the impact of this approach? Is there a performance difference in page rendering? And how can this affect usability?
  • If the usability is directly affected, can it be corrected using the role="checkbox" attribute?
  

Note : The example given between checkbox and radio was more for contextualizing the problem and the answers may preferably cover other examples, if necessary.

    
asked by Anderson Carlos Woss 12.06.2017 в 19:59
source

3 answers

36

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.

    
answered by 12.06.2017 / 20:27
source
15

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:

  • code level : Generating code to be maintained.
  • Understanding the code : Low understanding required documentation help for code maintenance.
  • code maintenance : When working in a multi-distributed company you can not guarantee who will service the software in 6 months or 1 year, knowing that your code may not be cleaned since there is no clear order of why this decision was made, since it is a bad decision.
  • II) page rendering impact:

  • minimum
  • III) And how can this affect usability? *

    According to the Nielsen group this issue has already been addressed. checkboxes-vs-radio-buttons by Nielsen Norman Group

    On the site they even comment that they have different functions. According to html readers for the blind like the dox vox that interprets html entities for the blind and visually impaired to a wrong choice by doing with that the user makes the wrong decision because a checkbox should accept more than one option while the radio button accepts only one.


    Making a site according to the default UX rather than the internal standards of an organization or team results in a better accepted site for a larger number of users as per the study: Data Interface Standards Stifle Design Creativity?


    According to the Caelum and its UX analysis can be noted the 10 heuristics of Nielsen as basic guide for all UX ie if you escape too much of the reality your system is doomed to disasters.
    Is it possible to prevent all interface errors by JS? not! depends all of the browser your user is using if it is an html interpreter like the one mentioned above, dox vox, your code will essentially break for these people · So if you change the default behavior and this is the only possible solution you found then something wrong in the way he is following his logical reasoning.

        
  • answered by 14.06.2017 в 21:57
    11
      

    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

        
    answered by 14.06.2017 в 22:25