Primer CSS Progress Accessibility

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.

Output:               

👁 Image

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

Output:           

👁 Image

Reference: https://primer.style/#accessibility