Primer CSS Accessibility - Coding

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> 
    <link href="https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        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= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
                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:

Reffered: https://www.geeksforgeeks.org

CSS

Related
CSS content-visibility Property
Pure CSS Landing Page Layout
Printing the table on the web page having type effect repeatedly
How to tell the browser in CSS to render your layout in different box models?
How to rotate shape loader animation using CSS ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	12