[HTML5] Accessible Icon Buttons
时间：2021-07-01 10:21:17
帮助过：1人阅读
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;
}
[HTML5] Accessible Icon Buttons
标签：
