Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos , como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
El componente Primer CSS Progress se utiliza para mostrar el progreso de una tarea al usuario. En este artículo, discutiremos la Accesibilidad de Primer CSS Progress . Hay algunos casos en los que no es posible describir el progreso de la tarea usando texto, se debe usar un atributo aria-label para que el sitio web sea más amigable para los lectores de pantalla.
Primer CSS Clases de accesibilidad de progreso:
- Progreso: esta clase es el contenedor externo del componente de progreso.
- Elemento de progreso : esta clase se usa en el elemento interno del componente de progreso.
Sintaxis:
<div aria-label="...">
<span class="Progress">
<span class="Progress-item">...</span>
...
</span>
</div>
Ejemplo 1: Este ejemplo muestra el uso del atributo aria-label en el componente de progreso en Primer CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Primer CSS Progress Accessibility</title> <link href= "https://unpkg.com/@primer/css@19.8.2/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h2>GeeksforGeeks</h2> <h4>Primer CSS Progress Accessibility</h4> </div> <div class="p-6"> <div aria-label="50% completed"> <span class="Progress"> <span class="Progress-item color-bg-success-emphasis" style="width: 50%;"></span> </span> </div> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo muestra el uso del argumento aria-label con barras de progreso de diferentes colores.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Primer CSS Progress Accessibility</title> <link href= "https://unpkg.com/@primer/css@19.8.2/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h2 style="color:green">GeeksforGeeks</h2> <h4>Primer CSS Progress Accessibility</h4> </div> <div class="p-6"> <div aria-label="50% completed" class="mb-2"> <span class="Progress"> <span class="Progress-item color-bg-success-emphasis" style="width:50%;"> </span> </span> </div> <div aria-label="60% completed" class="mb-2"> <span class="Progress"> <span class="Progress-item color-bg-danger-emphasis" style="width:60%;"> </span> </span> </div> <div aria-label="70% completed" class="mb-2"> <span class="Progress"> <span class="Progress-item color-bg-attention-emphasis" style="width:70%;"> </span> </span> </div> <div aria-label="80% completed" class="mb-2"> <span class="Progress"> <span class="Progress-item color-bg-accent-emphasis" style="width:80%;"> </span> </span> </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/progress#accessibility
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA