Accessibility
优质
小牛编辑
128浏览
2023-12-01
描述 (Description)
当您的按钮不包含可读文本时,您可以添加仅限屏幕阅读器的文本以说明其用途。 符号或图标必须放在具有aria-hidden-"true"属性的元素中,这样可以避免屏幕阅读器尝试发音图标或符号。 要定义仅限屏幕阅读器的文本,请使用.show-for-sr类。
例子 (Example)
以下示例演示了在Foundation中使用button accessibility 。
<html>
<head>
<title>Button Accessibility</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
</head>
<body>
<p>When he reached
<button class = "button" type = "button">
<span class = "show-for-sr">home</span>
<!-- Screen readers will see "home" but Visual users will see the home icon, but not the "home" text -->
<span aria-hidden = "true"><i class = "fi-home"></i></span>
</button> the children were playing.
</p>
<p>Copy and paste the above sentence to see what it is.</p>
</body>
</html>