Primer CSS Progress Accessibility
Last Updated :
20 Apr, 2022
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=
"https://unpkg.com/@primer/[email protected]/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>
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=
"https://unpkg.com/@primer/[email protected]/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>
Output:
Reference: https://primer.style/css/components/progress#accessibility
Similar Reads
Primer CSS Accessibility A free open-source CSS framework called Primer CSS was created with the GitHub design system to accommodate a wide range of Github websites. It lays the groundwork for fundamental style components including font, space, and colour. Our patterns are stable and interoperable thanks to this methodical
3 min read
Primer CSS Inline Progress 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
2 min read
Primer CSS Progress Primer CSS is a free open-source CSS framework that is built upon the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are ste
4 min read
Primer CSS Large Progress 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
2 min read
Primer CSS Toasts Implementation and Accessibility In this article, we will see the implementation and accessibility of Primer CSS Toasts. It 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. It follows the BEM (Block, Element, and Modifier) a
2 min read