Nativo versus personalizado: quando escolher um elemento real

Para qualquer controle, você enfrenta uma escolha: usar um elemento HTML nativo ou construir um personalizado à mão. O nativo quase sempre é melhor.

Um button nativo pode receber foco, ser acionado com mouse, teclado e toque, e ser anunciado corretamente. Você escreve uma tag e a plataforma cuida do restante.

Estilize uma span para que pareça um botão e ela continuará sem função, sem foco e sem suporte ao teclado. Ela apenas engana os olhos.

Para fazer um controle personalizado funcionar, você precisa adicionar uma função, tabindex e manipuladores de teclas para Enter e Espaço. É muito código para reproduzir uma única tag.

Mesmo controles personalizados feitos com cuidado deixam passar casos extremos: indicadores de foco, estados desativados e toque. O elemento nativo já lida com todos eles.

Isso vale para toda a plataforma. Um select, uma caixa de seleção ou um details reais oferecem comportamento e acessibilidade que uma imitação feita com div nunca iguala completamente.

Controles nativos de formulário são enviados com o formulário, fazem a própria validação e são associados automaticamente a um rótulo. Refazer tudo isso manualmente raramente vale a pena.

Use o personalizado somente quando não existir um elemento nativo para o padrão, como uma interface com abas ou uma árvore. Nesse caso, siga cuidadosamente um padrão de implementação comprovado.

Preocupado porque um botão real parece simples? Você pode estilizar bastante os elementos nativos com CSS. Mantenha a semântica e altere a aparência como preferir.

Escolher o elemento real significa menos JavaScript, menos erros e um controle que continua funcionando mesmo com atualizações do navegador e das tecnologias assistivas, sem esforço adicional.

Adote esta regra como padrão: nativo primeiro; personalizado somente como último recurso. A plataforma web é um enorme presente para a acessibilidade, então deixe que ela faça o trabalho.

Vamos decidir entre nativo e personalizado.

Escolha o nativo primeiro: um botão ou campo de entrada real oferece foco, teclas e semântica gratuitamente. Use o personalizado somente quando não existir um elemento e estilize o nativo à vontade. 🎉