Saltar al contenido principal

Barra de progreso simple

Barra de progreso simple en Storybook

Uso​

Descripción general​

La barra de progreso simple muestra el progreso actual de una operación del sistema, como cargar, subir o enviar. También muestra el progreso de una tarea en particular antes de su finalización.

Cuándo se debe utilizar​

Use una barra de progreso para mostrar el progreso actual de una operación del sistema, como cargar, subir o enviar, especialmente en estos casos:

  • La tarea tiene un progreso medible (por ejemplo, porcentaje completado).
  • La tarea es compleja o implica un largo tiempo de espera y los usuarios necesitan retroalimentación sobre su estado.
  • Desea reducir la incertidumbre del usuario proporcionando información visual durante las operaciones de larga duración.

Cuándo no se debe utilizar​

No use una barra de progreso en estos casos:

  • Para tareas muy cortas que no requieran retroalimentación detallada, use indicadores más simples como cargadores.
  • Para mostrar el progreso a través de una serie de pasos discretos (por ejemplo, completar un formulario de varios pasos). En su lugar, use la barra de progreso de pasos.
  • Para mostrar los pasos y subpasos de una tarea concreta o utilizar íconos personalizados. En su lugar, use la barra de progreso de fase.

Formato​

Anatomía​

Imagen que representa la anatomía de una barra de progreso simple

La barra de progreso consta de los siguientes elementos:

  1. Rótulo: Describe la tarea u operación que la barra de progreso está monitoreando.
  2. Valor numérico: Representa el avance de una operación o tarea del sistema dentro de la extensión de la barra de progreso. El valor numérico se muestra en fracción o porcentaje.
  3. Barra: Representa el avance de una operación o tarea del sistema mediante una línea rellena.

Alineación y ubicación​

El rótulo puede aparecer en la parte superior o inferior de la barra de progreso.

Imagen en la que se muestran las opciones de ubicación para el rótulo de la barra de progreso simple

Contenido​

Pautas generales de redacción​

  • En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
  • Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
  • Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
  • Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
  • Las palabras y las oraciones deben ser breves.

Rótulo de la barra de progreso​

  • Incluya un rótulo de barra de progreso para dar contexto sobre la operación o tarea que se está realizando. En casos excepcionales en los que el contexto es suficiente, el rótulo se puede ocultar. Estas barras de progreso deben incluir un atributo aria-label para que sean accesibles.
  • Los rótulos de la barra de progreso deben ser cortos y concisos. Limite el rótulo a unas pocas palabras o una sola línea de texto.
  • En los rótulos, use mayúsculas como se usan en las oraciones. La primera palabra de una frase y cualquier nombre propio deber ir en mayúscula. Para obtener orientación adicional sobre cómo implementar el uso de mayúsculas y minúsculas en las oraciones, consulte la sección Uso de mayúsculas.

Accesibilidad​

La barra de progreso simple incluye el rol WAI-ARIA 'progressbar'. También incluye los atributos de WAI-ARIA, aria-valuetext, aria-valuenow, aria-valuemin y aria-valuemax para ayudar a proporcionar significado adicional a las tecnologías de asistencia.

Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:

  • La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
  • El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
  • El elemento se puede operar con teclado, así como con mouse.
  • Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.

El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.

Cuando utilice este componente en su aplicación, asegúrese de que el rótulo de la barra de progreso sea significativo y conciso. Si necesita ocultar el rótulo, proporcione una propiedad de rótulo y establezca hideLabel en True. Esta acción establece el atributo aria-label en el rótulo.