Foundation CSS Button Accessibility
Last Updated :
24 Mar, 2022
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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<!-- Compressed JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<!-- Compressed JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</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
Similar Reads
Foundation CSS Abide Accessibility Abide in Foundation CSS is a structure approval library that is utilized to approve the structure with custom validators. Foundation CSS Abide Structure: Beginning State: Foundation CSS Stand Beginning State is utilized to determine that an info field in a structure is in the underlying/beginning st
2 min read
Foundation CSS Reveal Accessibility Foundation CSS is an open-source and responsive front-end framework that makes it simple to design gorgeous responsive websites, apps, and emails that work on any device. It was released in September 2011 by ZURB. It is used by many companies, including Facebook, eBay, Mozilla, Adobe, and even Disne
4 min read
Foundation CSS Button Basics Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass
2 min read
Foundation CSS Button Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, M
6 min read
Foundation CSS Visibility Classes Accessibility 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 b
3 min read