Semantic-UI Icon Set Accessibility

Last Updated : 21 Mar, 2022

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap. It provides the users with various icons that can be used for different purposes with a beautiful user interface. In this article let us see about the Icon set of accessibility. Semantic UI provides some most commonly used icon classes for design which were mostly used in the editors and here are the classes. An icon is a glyph used to represent something else and it can represent accessibility standards.

Semantic-UI Icon Set Accessibility classes:

American sign language interpreting icon – This class is used to make an American sign language interpreting the icon.
assistive listening systems icon – This class is used to make an assistive listening systems icon.
audio description icon – This class is used to make an audio description icon.
blind icon – This class is used to make a blind icon.
braille icon – This class is used to make a braille icon.
closed captioning icon – This class is used to make a closed captioning icon.
closed captioning outline icon – This class is used to make a closed captioning outline icon.
deaf icon – This class is used to make a deaf icon.
low vision icon – This class is used to make a low vision icon.
phone volume icon – This class is used to make a phone volume icon.
question circle icon – This class is used to make a question circle icon.
question circle outline icon – This class is used to make a question circle outline icon.
sign language icon – This class is used to make a sign language icon.
tty icon – This class is used to make a tty icon.
universal access icon – This class is used to make a universal access icon.
wheelchair icon – This class is used to make a wheelchair icon.

Syntax:

<i class="blind icon"></i>

Note: You can change the class name from the above class list.

Example 1: This code demonstrates all accessibility icon set classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
  
</head> 
  
<body> 
    <center> 
        <h1 class="ui green header">GeeksforGeeks</h1> 
        <strong> 
            Semantic-UI Icon Set Accessibility 
        </strong><br /><br /> 
  
        <div class=" ui container"> 
            <div class="ui grid"> 
                <div class="three wide column"> 
                    <i class="american sign language interpreting icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="assistive listening systems icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="audio description icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="blind icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="braille icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="closed captioning icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="closed captioning outline icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="deaf icon"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="low vision icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="phone volume icon"></i> 
                </div> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>

Output :

Example 2: This code demonstrates all accessibility icon set classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
        rel="stylesheet"/> 
</head> 
  
<body> 
  <center> 
    <h1 class="ui green header">Geeksforgeeks</h1> 
    <strong>Semantic UI Icon Set Accessibility </strong> 
    <br/> 
    <br/> 
  
    <div class="ui container"> 
      <button class="ui button"> 
          <i class="question circle icon"></i> 
      </button> 
  
      <button class="ui button"> 
          <i class="question circle outline icon"></i> 
      </button> 
  
      <button class="ui button"> 
          <i class="sign language icon"></i> 
      </button> 
  
      <button class="ui button"> 
          <i class="tty icon"></i> 
      </button> 
    </div> 
  </center> 
</body> 
  
</html>