您的位置：首页 > Web前端 > HTML5

[HTML5] Accessible Icon Buttons

2016-07-19 17:50 519 查看

Icon buttons are very common in web applications, yet they often have accessibility problems. Learn how to make your icon buttons accessible to keyboard and screen reader users with HTML, CSS, SVG and ARIA.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Button Demo</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
</head>
<body>
<main>

<button>Help!</button>

<button>
<span class="visuallyhidden">Help!</span>
<i class="icon icon-help" aria-hidden="true"></i>
</button>

<!-- alternate labeling technique: aria-label -->
<button aria-label="Help!">
<i class="icon icon-help" aria-hidden="true"></i>
</button>

<div class="button" role="button" tabindex="0">
<svg width="32" height="32" viewBox="0 0 32 32" class="icon" aria-labelledby="svgtitle">
<title id="svgtitle">Help!</title>
<path d="M14 24h4v-4h-4v4zM16 8c-3 0-6 3-6 6h4c0-1 1-2 2-2s2 1 2 2c0 2-4 2-4 4h4c2-0.688 4-2 4-5s-3-5-6-5zM16 0c-8.844 0-16 7.156-16 16s7.156 16 16 16 16-7.156 16-16-7.156-16-16-16zM16 28c-6.625 0-12-5.375-12-12s5.375-12 12-12 12 5.375 12 12-5.375 12-12 12z"></path>
</svg>
</div>
</main>
</body>
</html>

.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航