Nativo frente a personalizado: cuándo elegir un elemento real

Ante cualquier control solo tiene una elección: usar un elemento HTML nativo o crear uno personalizado. Casi siempre gana el nativo.

Un button nativo puede recibir el foco y activarse con el ratón, el teclado y el tacto, además de anunciarse correctamente. Usted escribe una etiqueta y la plataforma hace el resto.

Si aplica estilos a un span para que parezca un botón, seguirá sin tener función, foco ni compatibilidad con el teclado. Solo engaña a la vista.

Para que un control personalizado funcione, debe añadir una role, tabindex y controladores de teclado para Enter y Space. Es mucho código para igualar una sola etiqueta.

Incluso los controles personalizados desarrollados con cuidado omiten casos extremos: indicadores de foco, estados deshabilitados o interacción táctil. El elemento nativo ya gestiona todos.

Esto se aplica a toda la plataforma. Un select, una casilla de verificación o un details reales proporcionan un comportamiento y una accesibilidad que una imitación con div nunca iguala por completo.

Los controles de formulario nativos se envían con el form, se validan por sí mismos y se asocian automáticamente con una etiqueta. Recrear todo eso manualmente rara vez merece la pena.

Use una solución personalizada solo cuando no exista un elemento nativo para ese patrón, como una interfaz con pestañas o un árbol. Después, siga cuidadosamente un patrón de creación probado.

¿Le preocupa que un botón real parezca demasiado simple? Puede aplicar muchos estilos a los elementos nativos con CSS. Conserve la semántica y cambie su apariencia como quiera.

Elegir el elemento real implica menos JavaScript, menos errores y un control que resiste gratuitamente las actualizaciones del navegador y de las tecnologías de asistencia.

Hágalo su regla predeterminada: primero lo nativo y lo personalizado solo como último recurso. La plataforma web es un enorme regalo de accesibilidad; deje que haga el trabajo.

Decidamos entre una solución nativa y una personalizada.

Elija primero lo nativo: un botón o input reales le proporcionan foco, teclado y semántica sin esfuerzo. Use una solución personalizada solo cuando no exista un elemento adecuado y aplique estilos libremente a los elementos nativos. 🎉