Page Comparison

Labels

El etiquetado de formularios eficaz ayuda a los usuarios a comprender qué información ingresar en una entrada de texto.

Mejores prácticas de accesibilidad para etiquetas:

• Las etiquetas deben ser visibles cuando se enfoca una entrada.

• Las etiquetas deben anunciarse al lector de pantalla en foco.

• Asegúrese de que el texto de ayuda que aparece debajo de una entrada se lea cuando un usuario de tecnología de asistencia se detiene en una entrada usando ARIA.

• Utilice mayúsculas al estilo de la oración (solo la primera palabra de una frase y los nombres propios en mayúscula).

Placeholder

El texto del marcador de posición proporciona sugerencias o ejemplos de qué ingresar. El texto del marcador de posición desaparece después de que el usuario comienza a ingresar datos en la Entrada y no debe contener información crucial. Use mayúsculas al estilo de una oración y, en la mayoría de los casos, escriba el texto como una declaración directa sin puntuación. El uso de placeholder en lugar del label a veces se emplea como método para ahorrar espacio. Sin embargo, esto no se recomienda porque oculta el contexto y presenta problemas de accesibilidad.

Texto de ayuda

El texto auxiliar es información pertinente que ayuda al usuario a completar un campo. El texto auxiliar siempre está disponible cuando la entrada está enfocada y aparece debajo de la etiqueta.

El texto auxiliar opcional debe usarse para proporcionar instrucciones que ayuden a los usuarios a comprender cómo completar el campo de texto, así como también para indicar cualquier entrada requerida y opcional, formatos de datos y otra información relevante.

Text Input

Los input de texto permiten al usuario interactuar e introducir contenido y datos. Este componente se puede utilizar para entradas de formato largo y corto.

Siempre que sea posible, detectar y rellenar previamente las entradas para reducir errores y ahorrar tiempo. Cuando no se puede determinar el valor, usar la escritura anticipada para hacer sugerencias. Utilizar mayúsculas y minúsculas para valores predeterminados, valores detectados y texto de autocompletado.

Validación

La validación en tiempo real ayuda a agilizar el proceso y mantener los datos limpios cuando el usuario está completando formularios. El mensaje de validación debe incluirse para advertir al usuario sobre el texto que se ingresó incorrectamente o un campo obligatorio que falta.

Text Area

Los componentes Text Area son utilizados como campos de texto, se diferencian de los Text Field en que son capaces de almacenar una cantidad mucho mayor de texto, incluso son capaces de crecer para contener más información.

Los campos de texto y las áreas de texto pueden tener un límite de caracteres y un contador. Use el límite de caracteres y el contador para que los usuarios sepan antes de comenzar a escribir, así entender cuándo supera el límite de caracteres.

Search

El componente Search es utilizado para realizar la búsqueda del contenido de forma mucho más rápida, evitando tener que revisar cada sección para encontrar lo que se está buscando.

Toggle

Radio buttons

Se utilizan cuando hay una lista de dos o más opciones que se excluyen mutuamente y el usuario debe seleccionar exactamente una opción. En otras palabras, al hacer clic en un botón de opción no seleccionado, se anulará la selección de cualquier otro botón que se haya seleccionado previamente en la lista.

Checkboxes

Se utilizan cuando hay listas de opciones y el usuario puede seleccionar cualquier número de opciones, incluidas cero, una o varias. En otras palabras, cada casilla de verificación es independiente de todas las demás casillas de la lista, por lo que marcar una casilla no desmarca las demás. Se puede utilizar una casilla de verificación independiente o una palanca para una sola opción que el usuario puede activar o desactivar.

Select

Se utilizan para campos en los que se requiere una única selección y hay una gran cantidad de opciones posibles.

Image Modified