Skip to content
Related Articles
Open in App
Not now

Related Articles

Primer CSS Labels Accessibility and keyboard Navigation

Improve Article
Save Article
  • Last Updated : 01 Sep, 2022
Improve Article
Save Article

In this article, we will see how to label accessibility and keyboard navigation work. 

Primer CSS is a free open-source CSS framework that is built with 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 steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, and BEM architecture. It is a highly reusable model.

Label Accessibility: Make sure that the label that we are writing before any link should have some meaning. For example, you have provided the same links with two labels that don’t make any sense and the same goes with the text. Always choose your words carefully.

tabindex attribute: This attribute is used to specify an element’s tab order.

Keyboard navigation or Keyboard accessibility: We should make sure whatever you have inserted into your project should be accessible through the keyboard also. So the user can navigate smoothly through the keyboard.

The list of use cases in which accessibility is important are:

  • Providing Link: Whenever you are inserting a link, please mention the link properly with the appropriate label.
  • Ordering: Proper ordering of the tab is important when you are performing indexing to align the tab in the proper sequence.

Example 1: In the below code, we will see how the label accessibility works.

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><br>
          
        <h4>You should Use</h4>        
        <!-- Do: Link text communicates destination. -->
        <p>Find out more about 
           <a href="#url">GeeksforGeeks Courses</a>.<br>
        </p>
  
         <!-- Don't: "Click here" is not meaningful. -->
        <h4>Avoid this</h4>
        <p>To find out more about GeeksforGeeks course pricing,
              <a href="#url">click here</a>.
        </p>
    </div>
</body>
</html>


Output:

 

Example 2: In the below code, we will see how the tab’s accessibility works.

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><br>
          
        <h4>Do: Tab order can be guessed.</h4>
        <button type="button" class="btn">1</button>
        <button type="button" class="btn">2</button>
        <button type="button" class="btn">3</button>
        <br><br>
        <h4>Don't: The second button's tab order is unexpected.</h4>
  
        <button type="button" class="btn">
            1
        </button>
        <button type="button" class="btn" tabindex="1">
            2
        </button>
        <button type="button" class="btn">
            3
        </button>
    </div>
</body>
</html>


Output:

 

Reference: https://primer.style/css/principles/accessibility


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!