48

Recentemente houve uma pergunta aqui no Stack Overflow sobre alterar o comportamento padrão do checkbox para atuar na página como um radio, isto é, ao ser selecionado um item, os outros deveriam ser desmarcados, mantendo a seleção única. As respostas foram dadas utilizando JavaScript basicamente alterando o comportamento natural do checkbox tratando os eventos nesse elemento. Eu sempre acreditei que fazê-lo não era recomendado e que o ideal mesmo seria utilizar o próprio elemento radio por questões de semântica. Eu cheguei a comentar a possível solução utilizando a propriedade appearance do CSS, pois mantém a semântica do código, alterando apenas a aparência do elemento, sem necessitar de 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

Porém, pesquisando, vi que tal propriedade foi removida do CSS 3, então, mesmo que os navegadores ainda suportam tal propriedade, acredito que seu uso deve ser evitado e que a abordagem utilizando JavaScript é comumente discutida em fóruns, mas são poucos os lugares que discutem se de fato é apropriado fazê-lo.

A conclusão que chego é que não se deve alterar o comportamento de um elemento enquanto semanticamente é apropriado utilizar outro, mas não consigo afirmar canonicamente qual é o impacto tanto de desempenho, se houver, quanto na usabilidade da página.

Então:

  • É permitido utilizar JavaScript para alterar o comportamento natural de um elemento para agir como outro?
  • Qual é o impacto gerado por esta abordagem? Existe uma diferença de desempenho na renderização da página? E como isso pode afetar a usabilidade?
  • Se a usabilidade for diretamente afetada, é possível corrigir utilizando o atributo role="checkbox"?

Nota: o exemplo dado entre checkbox e radio foi mais para contextualização do problema e as respostas podem, preferencialmente, abordar outros exemplos, se necessário.

4
  • 13
    Independente de você acreditar ou não na Bíblia, ela contém uma história sobre o que acontece quando as pessoas não se entendem sobre conceitos básicos. É a queda da Torre de Babel. Todo mundo falava a mesma língua, até que os anjos desceram e fizeram com que os povos de então não conseguissem concordar sobre as coisas mais básicas. Então... quando o seu chefe, com sintomas clínicos de hidrocefalia, pede para você fazer um checkbox se comportar com um radio button, ele está fazendo exatamente isso, babelizando o mundo. Ensine a ele que existe uma linguagem visual comum no mundo da Web. Commented 12/06/2017 às 18:15
  • 1
    apperance: checkbox pode ser não recomendado, mas nada impede de estilizar um elemento com as demais features das css3. Aproveitando, editei a resposta lá. Um radio é um radio =) Commented 12/06/2017 às 18:32
  • Tem o link dessa outra pergunta que você cita?
    – bfavaretto
    Commented 14/06/2017 às 21:30
  • Está linkada no comentário do Renan já.
    – Woss
    Commented 14/06/2017 às 21:31

3 Respostas 3

37
+200

Vamos por partes:

É permitido utilizar JavaScript para alterar o comportamento natural de um elemento para agir como outro?

Sim. Javascript foi criado com o intuito de dar inteligência aos componentes das páginas. De certa forma, a imaginação (e as verificações de segurança do navegador) é o limite do que se pode fazer.

Você pode fazer um botão se comportar como uma caixa de texto, ou uma lista li se comportar como um parágrafo. Note que, assim como as coisas que o pessoal faz naquele programa de TV Jackass, só porque você pode não significa que você deve.

Qual é o impacto gerado por esta abordagem? Existe uma diferença de desempenho na renderização da página? E como isso pode afetar a usabilidade?

Esse é o ponto X da sua pergunta. Existe, sim, uma diferença. Vamos tomar o caso de radio versus checkbox como exemplo. Existe um tempo do navegador para carregar esses componentes. Após esse tempo, eles estarão carregados já com seu comportamento padrão. Em geral esse tempo de carga é muito curto, pois os navegadores são implementados pelas melhores equipes multidisciplinares do mundo e uma das coisas que essas equipes pregam e aplicam é que tudo deve ser o mais simples possível.

Quando você adiciona complexidade desnecessária a um componente, você adiciona o tempo de execução do seu JavaScript ao tempo de carga do componente. Logo, o seu checkbox Frankenstein nunca carregará em tempo menor ou igual ao tempo de carga de um checkbox saudável. Você precisa do tempo para castrar o checkbox, e depois do tempo para adestrá-lo para se comportar como um radiobutton.

Isso torna a página mais lenta, mas se isso é perceptível para o usuário depende da habilidade de quem vai fazer a gambiarra e da quantidade de elementos que serão modificados.

Note que não é apenas a performance que é impactada. Você agora tem um código a manter, e código - em especial HTML, Javascript e CSS - deteriora com o tempo. Alguém algum dia vai ter que dar manutenção nisso, e mesmo que seja o autor original, o normal é que esse tipo de trabalho funcione como uma bola de neve. Logo surgem ramos de código desenvolvidos especificamente para versões distintas de navegadores distintos. A integração com novos plugins se torna cada vez mais difícil também.

Se a usabilidade for diretamente afetada, é possível corrigir utilizando o atributo role="checkbox"?

Não é garantido. Isso é meio como empurrar a sujeira para debaixo do tapete. A melhor correção mesmo é recomeçar do zero e seguir os bons padrões de desenvolvimento. Afinal, eles foram criados por um motivo.


Existe outro fator que deve ser considerado, além da performance. Você pode gastar dias de desenvolvimento para garantir que a alteração dos componentes não diminua a fluidez da sua página nem aumente muito o tempo de execução. Mas lembre-se de que hoje todo mundo navega por dezenas, e alguns usuários centenas de sites que seguem as boas normas de design.

Isso significa que os usuários são treinados para tratar caixa de seleção como caixa de seleção e botão rádio como botão rádio. Se no final das contas sua página for muito rápida mas os usuários ficarem confusos, todo o seu esforço de desenvolvimento foi em vão.

2
  • Saberia dizer como esta modificação se comportaria em um leitor de tela para deficientes visuais por exemplo? Sendo um checkbox modificado, o leitor seria incapaz de identificar por si só que o elemento se comporta de forma diferente do esperado.
    – Woss
    Commented 12/06/2017 às 19:13
  • @AndersonCarlosWoss você mesmo já respondeu seu próprio comentário. A acessibilidade do componente é um ponto a mais que deve ser modificado para manter sua consistência. Commented 12/06/2017 às 19:21
16

1)É permitido utilizar JavaScript para alterar o comportamento natural de um elemento para agir como outro?

O javascript é uma linguagem que faz os sites se tornarem interativos e segundo a pagina JavaScript observada as regras de linguagem tudo é possível.

2)Qual é o impacto gerado por esta abordagem? Existe uma diferença de desempenho na renderização da página? E como isso pode afetar a usabilidade?

I)impacto:

  1. nível de código: Geração de código a ser dada manutenção.
  2. compreensão do código: Baixa compreensão necessário documentação auxiliar para manutenção do código.
  3. manutenção de código: Ao trabalhar em uma empresa multi distribuída não se pode ter garantia quem irá dar manutenção no software em 6 meses ou 1 ano, sabendo-se disso seu código possivelmente não será limpo pois não há uma ordem clara do por que houve esta decisão, já que é uma péssima decisão.

II) impacto de renderização de página:

  1. mínimo devido ao trazer somente em adicional o código do javascript e carrega-lo, quase sempre leva-se milisegundos.

III)E como isso pode afetar a usabilidade?*

Segundo o grupo Nielsen este assunto já foi abordado. checkboxes-vs-radio-buttons por Nielsen Norman Group

No site eles comentam até mesmo que eles tem funções diferentes.
Segundo os leitores html para cegos como o dox vox que interpreta entidades html para cegos e deficientes visuais a uma escolha errada fazendo com que o usuário tome decisão errada pois um checkbox deveria aceitar mais de uma opção enquanto o radio button aceita somente uma.


Fazer um site de acordo com a UX padrão e não os padrões internos de uma organização ou equipe resulta em um site melhor aceito para uma quantidade maior de usuários conforme o estudo: Do Interface Standards Stifle Design Creativity?


Segundo a Caelum e sua analise de UX pode ser notado as 10 heurísticas de Nielsen como guia básico para todas as UX ou seja se fugir muito da realidade seus sistema está fadado a desastres.
É possível prevenir todos erros de interface pelo JS ? não! depende tudo do navegador que seu usuário está usando se for um interpretador de html como o citado acima,dox vox, seu código essencialmente irá quebrar para estas pessoas· Então se você altera o comportamento padrão e está é a única solução possivel que encontrou então algo de errado na forma em que está seguindo seu raciocínio lógico.

2
  • Acredito que a resposta pode ser muito mais detalhada que isso, apresentando dados que não sejam apenas baseados em experiência própria, tanto que estou oferecendo a recompensa com o motivo "A pergunta é amplamente aplicável a um grande público alvo. Uma resposta canônica detalhada é necessária para abordar todas as preocupações.". Se for de interesse, pode editar a resposta.
    – Woss
    Commented 14/06/2017 às 20:06
  • 1
    revisado o texto e adicionados os pontos relevantes. desculpe o texto mau elaborado. Commented 14/06/2017 às 20:43
12

É permitido utilizar JavaScript para alterar o comportamento natural de um elemento para agir como outro?

Sim, a partir do momento que temos como parar a propagação e cancelar um determinado evento (caso seja cancelável, sem parar a propagação do mesmo )

event.stopPropagation();

event.preventDefault();

Nós da o poder de modificar o que aquele elemento vai fazer, posso dizer que um input do tipo text vai se comportar como um botão que ao receber um evento de click por exemplo cancele seu evento de focus e acione um click.


Qual é o impacto gerado por esta abordagem? Existe uma diferença de desempenho na renderização da página? E como isso pode afetar a usabilidade?

Isso pode afetar de diversas maneiras dependendo do teu código, do browser, de sua conexão com a internet...

Você pode evitar utilizar arquivos externos .js do contrario você depende de sua conexão da internet para que seu script funcione e "modifique o elemento"

A diferença de desempenho não vai ser notável porem existe, se você não impedir o fluxo do elemento o teu navegador já vai saber como tratar o mesmo, no momento que você começa a impedir funções nativas, parar eventos, modificar eventos, tudo isso vai ter um custo pra sua aplicação, parando para analisar melhor pense da seguinte maneira, você tem um check que quando receber um click ele vai marcar a si mesmo e desmarcar outro elemento logo você vai fazer uma alteração a mais no teu DOM e isso vai sim ter seu custo.

Dependendo da sua script ela vai atrapalhar no carregamento da página sim, logo 'modificar impacta no carregamento da página.'

Um exemplo básico para demonstrar o que pode acontecer caso sua script se atrase e alguém click em seu 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>
<input type="checkbox">

No exemplo acima você pode clicar no checkbox até 3 segundos após o código javascript, após isso eu retorno false no evento de click desativando assim o seu evento de marcar ou não o checkbox, isso é um exemplo que pode acontecer caso seu script demore para carregar e alguem click em seu 'checkbox' que deveria funcionar como radio button.


Se a usabilidade for diretamente afetada, é possível corrigir utilizando o atributo role="checkbox"?

Esse atributo serve para dar mais semântica aos elementos de documentos baseados em marcação, não acho que seria correto utiliza-lo no caso

2
  • Poderia descrever melhor a parte "afetar de diversas maneiras"? Quais maneiras seriam essas? São invetiváveis ou há como contornar? Se há, quais são as formas de fazê-las?
    – Woss
    Commented 14/06/2017 às 20:33
  • Posso sim, irei organizar agora mesmo. Commented 14/06/2017 às 20:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .