Open In App

Primer CSS Progress Accessibility

Improve
Improve
Like Article
Like
Save
Share
Report

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS Progress component is used to show the progress of a task to the user. In this article, we will be discussing Primer CSS Progress Accessibility. There are some cases where it is not possible to describe the progress of the task using text, an aria-label attribute should be used to make the website more friendly for screen readers.

Primer CSS Progress Accessibility Classes:

  • Progress: This class is the outer container of the progress component.
  • Progress-item: This class is used on the inner element of the progress component. 

Syntax:

<div aria-label="...">
    <span class="Progress">
       <span class="Progress-item">...</span>
        ...
      </span>
</div>

Example 1: This example shows the use of the aria-label attribute on the progress component in 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=
          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>


Output:               

 

Example 2: This example shows the use of the aria-label argument with different colored progress bars.

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=
         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>


Output:           

 

Reference: https://primer.style/css/components/progress#accessibility



Last Updated : 20 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads