Open In App

Foundation CSS Button 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.

Foundation CSS Button Accessibility is helpful for ensuring the accessibility of screen readers. It is recommended to use the show-for-sr class for putting readable text in situations where a button may not have one, like in the case of buttons having only icons. This makes the text hidden to the normal user, however, it is available for screen readers so that it could read out the context of the 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 Button Accessibility Class:

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

Syntax:

<button type="button" class="button primary">
    <p class="show-for-sr">Add</p>
    <span aria-hidden="true"><i class="fi-plus"></i></span>
</button>

Example 1:

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 Button Accessibility</h3>
    <h5>Screen Reader Friendly Buttons</h5>
    <button type="button" class="button primary">
        <p class="show-for-sr">Add</p>
  
        <span aria-hidden="true">
          <i class="fi-plus"></i>
        </span>
    </button>
    <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>
  
    <h5>Normal Buttons with Visible Text</h5>
    <button type="button" class="button primary">
        <span>Add 
          <i class="fi-plus"></i>
        </span>
    </button>
    <button type="button" class="button primary">
        <span>Edit 
          <i class="fi-pencil"></i>
        </span>
    </button>
    <button type="button" class="button primary">
        <span>Delete 
          <i class="fi-trash"></i>
        </span>
    </button>
</body>
  
</html>


Output:

Example 2:

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 Button 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>
  
                      <i class="fi-pencil"></i>
                    </button>
                    <button type="button" class="button primary">
                        <p class="show-for-sr">Delete</p>
  
                      <i class="fi-trash"></i>
                    </button>
                </td>
            </tr>
            <tr>
                <td>Title Two</td>
                <td>
                    <button type="button" class="button primary">
                        <p class="show-for-sr">Edit</p>
  
                      <i class="fi-pencil"></i>
                    </button>
                    <button type="button" class="button primary">
                        <p class="show-for-sr">Delete</p>
  
                      <i class="fi-trash"></i>
                    </button>
                </td>
            </tr>
            <tr>
                <td>Title Three</td>
                <td>
                    <button type="button" class="button primary">
                        <p class="show-for-sr">Edit</p>
  
                      <i class="fi-pencil"></i>
                    </button>
                    <button type="button" class="button primary">
                        <p class="show-for-sr">Delete</p>
  
                      <i class="fi-trash"></i>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</body>
  
</html>


Output:

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



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