Todos los formularios se componen de varios elementos:
Etiquetas: informe a los usuarios qué significan los campos de entrada correspondientes.
Text Input o Campos de entrada: permite a los usuarios proporcionar información. La información se puede ingresar a través de una variedad de diferentes campos de entrada que van desde campos de texto, casillas de verificación y muchos otros tipos.
Texto de ayuda : proporciona ayuda sobre cómo completar un campo. El texto auxiliar es opcional.
Placeholder: sugiere lo que se incluye en un campo. El texto del marcador de posición es opcional.
Botones: permite a los usuarios enviar un formulario.
Validación: garantiza que los datos enviados por el usuario se ajusten a parámetros aceptables.
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 de una etiqueta 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
en tiempo realLa 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 busqueda búsqueda del contenido de forma mucho mas más rápida, evitando tener que revisar cada sección para encontrar lo que se está buscando.
Item List
Permiten crear conjuntos de elementos en forma de lista en un
menú desplegable.
Switch
Los Switches son componentes que representan una variable booleana (TRUE / FALSE), Principalmente relacionado a configuraciones.
File
El componente File es utilizado para visualizar, agrupar y seleccionar archivos dentro de una vista.
Slide-sheet
El Frame Sidesheet es utilizado como un menú configurable lateral, puede ser usado como formulario o panel de configuración.
Picker date
El componente Picker Date es utilizado como una forma expliícita y sencilla de seleccionar una fecha.
Picker Time
El componente Picker Time es utilizado como una forma expliícita y sencilla de seleccionar una hora.
| Info |
|---|
Todos los componentes han sido diseñados para trabajar armoniosamente juntos, como partes de un todo mayor. Es por esto que cada componente deber ser integrado y construido siguiendo nuestros lineamientos de usabilidady guías de construcción. Toda esta información se encuentra en la página Lineamientos de construcción de nuestro sistema de diseño. Además se debe tener en consideración la accesibilidad en el uso de la tipografía y la accesibilidad del color. |