Open In App

Foundation CSS Visibility Classes Accessibility

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.

In this article, we will learn about the Accessibility Visibility Classes which renders components on the screen based on whether the device is a screen reader or not. This can be useful for users who are using screen readers and may not be able to notice visual content like an icon button.

Note: It is generally not recommended to hide content that should be only visible to normal users. Therefore, one can set the aria-hidden attribute to true, to prevent unreadable content to be read by the screen reader.

Foundation CSS Visibility Accessibility Class:

  • show-for-sr: This class is used to show content only when it is being read by a screen reader.

Syntax:

<p class="show-for-sr">
    Content...
</p>

<p>
    Content...
</p>

Example 1: Below is the example that illustrates the use of the Visibility Accessibility class in Foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
</head>
  
<body style="padding: 20px;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Foundation CSS Visibility Classes Accessibility</h3>
    <p class="show-for-sr">
        Hello Geeks, this is only read
        by a screen reader
    </p>
  
    <p>
        The line above can only be read
        by a screen reader
    </p>
  
    <img src=
    <p class="show-for-sr">GeeksforGeeks Logo</p>
  
    <p>
        There is an image subtitle above only read
        by a screen reader
    </p>
</body>
  
</html>


Output:

Foundation CSS Visibility Accessibility

Example 2: Below is another example that illustrates the use of the Visibility Accessibility class in Foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
      
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
</head>
  
<body style="padding: 20px;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Foundation CSS Visibility Classes Accessibility</h3>
    <table>
        <thead>
          <tr>
            <th>Title</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
            <tr>
              <td>Title One</td>
              <td>
                  <button type="button" class="button primary">
                      <p class="show-for-sr">
                        Edit
                      </p>
  
                      <span aria-hidden="true">
                          <i class="fi-pencil"></i>
                      </span>
                  </button>
  
                  <button type="button" class="button primary">
                    <p class="show-for-sr">
                      Delete
                    </p>
  
                    <span aria-hidden="true">
                        <i class="fi-trash"></i>
                    </span>
                  </button>
              </td>
            </tr>
              
            <tr>
              <td>Title Two</td>
              <td>
                <button type="button" class="button primary">
                    <p class="show-for-sr">
                      Edit
                    </p>
  
                    <span aria-hidden="true">
                        <i class="fi-pencil"></i>
                    </span>
                </button>
  
                <button type="button" class="button primary">
                    <p class="show-for-sr">
                      Delete
                    </p>
  
                    <span aria-hidden="true">
                        <i class="fi-trash"></i>
                    </span>
                </button>
              </td>
            </tr>
            
            <!-- Show one row where the text is
            not hidden for comparison -->
            <tr>
              <td>Title Three</td>
              <td>
                <button type="button" class="button primary">
                    <span>
                      Edit
                    </span> <i class="fi-pencil"></i>
                </button>
                  
                <button type="button" class="button primary">
                    <span>
                      Delete
                    </span> <i class="fi-trash"></i>
                </button>
              </td>
            </tr>
        </tbody>
    </table>
</body>
  
</html>


Output:

Foundation CSS Visibility Accessibility

Reference: https://get.foundation/sites/docs/visibility.html#accessibility



Last Updated : 24 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments