[HTML5] Accessible Icon Buttons

最新推荐文章于 2023-05-02 22:21:01 发布

weixin_34265814

最新推荐文章于 2023-05-02 22:21:01 发布

阅读量104

点赞数

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;
}

weixin_34265814

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[HTML5] Accessible Icon Buttons

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...
复制链接

扫一扫