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 approach. Its approach to CSS is influenced by BEM architecture, functional CSS, and object-oriented CSS concepts. It is a model that can be used a lot.
- Label accessibility: Ensure that the label you write before any links has some context. For instance, you supplied the same links with two labels that are illogical, and the same is true of the text. Always be mindful of your language.
- Keyboard accessibility: The taborder of an element can be specified using the tabindex attribute. We need to make sure that everything you have added into your project is also reachable via the keyboard. So that the user may easily browse the keyboard.
The following are examples of use cases where accessibility is crucial.
- Linking: When adding a link, please be sure to label it correctly.
- Organize: When conducting indexing, it’s crucial to order the tabs properly so that they are aligned in the right order.
Example 1: Below mentioned example shows the working of accessibility in Toast position
HTML
<!DOCTYPE html> <html>
<head>
<title> Primer CSS Toast Position </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3>A computer science portal for geeks</h3>
<h2> Primer CSS Toast Position </h2>
</div>
<div class="position-fixed bottom-1 right-2">
<div class="Toast">
<span class="Toast-icon">
<svg class="octicon"
viewBox="0 0 15 15"
width="25" height="25">
<path d=
"M13.78 4.22a.75.75 0 010 1.06l-7.25
7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0
011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z">
</path>
</svg>
</span>
<span class="Toast-content ">
GeeksforGeeks- Bottom Right
</span>
</div>
</div>
</body>
</html>
|
Output:
Example 2: The accessibility of the media class is demonstrated in the code below.
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</title>
rel="stylesheet" />
</head>
<body>
<div class="m-4">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Primer CSS Layout Media Object</h2>
</div>
<div class="clearfix p-3 border m-4">
<div class="float-left mr-3">
<img src=
width="80" alt="">
</div>
<div class="float-right ml-3 p-5 color-bg-success">
GFG Premium
</div>
<div class="overflow-hidden">
<p>Are you a Geek! Then where are you,
come and explore GeeksforGeeks premium portal
and get premium job access to all the jobs.</p>
</div>
</div>
</body>
</html>
|
Output:
Reference:
- https://primer.style/css/principles/accessibility
- https://www.geeksforgeeks.org/primer-css-toasts-implementation-and-accessibility/amp/
- https://primer.style/css/utilities/layout#the-media-object