Carga de archivo

Predeterminado (default)

Estado predeterminado de la carga de archivo en una interfaz.

Completado

Estado que adopta el componente cuando el archivo fue cargado exitosamente, mostrando una confirmación visual (como el cambio de color o texto) para indicar a la persona usuaria que la acción se realizó correctamente.

En foco (focus)

Es un principio de accesibilidad que asegura que cualquier elemento interactivo en una interfaz sea claramente visible cuando recibe la atención del usuario, especialmente al ser navegado con el teclado. En Obelisco se utiliza un borde o anillo (focus ring) por fuera del componente en un color distintivo.

Error

El estado de error debe ser claramente visible y accesible. En el componente de carga de archivos, puede incluir mensajes descriptivos, bordes en color rojo y/o íconos de advertencia con buen contraste. Esto permite que la persona usuaria identifique el problema (como un formato no permitido o un archivo demasiado pesado) y sepa cómo corregirlo, cumpliendo con las pautas de accesibilidad (WCAG).

Deshabilitado (disabled)

Estado que indica que el botón no está disponible para la interacción, lo que significa que no puede activarse.

La separación vertical entre elementos es de 8px tanto para dispositivos desktop como mobile.

Podes consultar ficha de patrones de formulario para conocer la separación entre secciones.

El componente de carga de archivo está construido para ser accesible mediante navegación por teclado y reconocible por lectores de pantalla, comunicando su estado (activado o desactivado) de forma clara.

Utilizando el tab la persona usuaria puede navegar a través de elementos de la interfaz. Además, con el enter, puede accionar los elementos sobre los que esté posicionada como botones, enlaces, entre otros.

Una carga de archivo siempre debe ir acompañado de una etiqueta <label> clara y relacionada con la acción u opción que representa.

El atributo "for" asocia un <label> con un elemento de formulario como un <input>, <select>, <textarea>, etc. mediante el "id" del elemento objetivo.

Interactividad limitada

Cuando un componente de carga de archivo está deshabilitado temporalmente, es importante indicarlo correctamente mediante el atributo "disabled". Además, debe evitarse que el foco del teclado llegue al componente, y debe comunicarse su estado a tecnologías de asistencia.

<div class="form-label-container"> 
   <label for="exampleInputFile" class="form-label">Label</label> 
   <span class="badge-forms badge-required-forms">Requerido</span>
</div>
<input type="file" class="form-control" id="exampleInputFile" name="uploadedFile" aria-describedby="carga de archivo" accept="image/png, image/jpeg" />
<p class="form-label-description">
  Este es un texto de ayuda que da mas información sobre el Input. Es opcional, pero recomendado, y de no más de 3 líneas.
</p>

La información, la estructura y las relaciones transmitidas a través de la presentación pueden determinarse mediante programación o están disponibles en el texto.

La presentación visual de elementos de la interfaz de usuario y objetos gráficos tiene por lo menos una relación de contraste de 3:1 con respecto a los colores adyacentes.

Todas las funcionalidades del contenido se puede operar a través de una interfaz de teclado.

Si se utilizan encabezados o etiquetas, deben describir con precisión el propósito o contenido al que se refieren. Esto facilita la comprensión y navegación del contenido, especialmente para personas con discapacidades cognitivas o que utilizan lectores de pantalla.

Cualquier interfaz de usuario operable por teclado tiene un modo de operación donde el indicador de enfoque del teclado es visible. Cuando utiliza un teclado para navegar por los componentes, los enlaces tienen un subrayado visible y un recuadro outline que indica que los enlaces son interactivos.

Garantiza una experiencia predecible avisando desde el inicio sobre patrones poco comunes.Por ejemplo, una persona con dificultades cognitivas podría esperar revisar el archivo antes de enviarlo, y puede confundirse si el archivo se sube automáticamente al seleccionarlo.

Asegurarse de que todos los textos de ayuda y mensajes de error brinden asistencia útil para evitar o corregir errores.
No uses mensajes poco claros, como "Seleccioná un formato de archivo válido" . En su lugar, aclarar qué formatos son válidos.