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

    clip: rect(0 0 0 0);

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding:;

    position: absolute;

    width: 1px;

}

[HTML5] Accessible Icon Buttons的更多相关文章

  1. HTML5桌面通知(Web Notifications)实例解析

    先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...

  2. ovirt user guide

    Contents [hide]  1 ⁠Accessing the User Portal 1.1 Logging in to the User Portal 1.2 Logging out of t ...

  3. Website's Game source code

    A Darkroom by doublespeakgames <!DOCTYPE html> <html itemscope itemtype="https://schem ...

  4. SecureCRT中python脚本编写

    SecureCRT中python脚本编写学习指南 SecureCRT python 引言 在测试网络设备中,通常使用脚本对设备端进行配置和测试以及维护:对于PE设备的测试维护人员来说使用较多是Secu ...

  5. ionic button笔记

    源码文件:_button.scss 和 _button-bar.scss,以及_variables.scss(66行-163行). 按钮是手机app不可或缺的一部分,不同风格的app,需要的按钮多种多 ...

  6. SecureCrt脚本（二）二级对象之Dialog

    Crt自动化 测试 SecureCrt脚本 JS脚本   1.引言 2.Dialog属性和方法 2.1.属性 2.2.方法 2.2.1.FileOpenDialog 2.2.2.MessageBox ...

  7. 160908、前端开发框架Semantic UI

    简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...

  8. jquery.util.easyui.dialog

    (function ($) { var $parent = parent.$; //获取弹出窗口数据集合 function getDialogs() { var dialogs = $parent(& ...

  9. ExtJS4.2.1自定义主题（theme）样式详解

    (基于Ext JS 4.2.1版本) UI组件 学习ExtJS就是学习组件的使用.ExtJS4对框架进行了重构,其中最重要的就是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext的控件. Ex ...

随机推荐

  1. JAVA与C++的区别和联系

    这篇总结的貌似不错: http://wenku.baidu.com/link?url=VixkWGl0BzUkmceaDJnQeUhzKEIex6poGaKKvMTP87P8a7HTmS5uIi87I ...

  2. plsql 高效原则

    sql优化是项复杂的工作,不能简单而论,但是在平时书写脚本时的一些细节可以大大提高我们编写代码的效率,提高代码质量. 以下这些规则部分是我的经验,部分是网络资料,整理后在我平时的工作中运用后得到验证的 ...

  3. ActionBar官方教程(5)ActionBar的分裂模式(底部tab样式),隐藏标题,隐藏图标

    Using split action bar Split action bar provides a separate bar at the bottom of the screen to displ ...

  4. arch Linux not found device 错误解决

    使用Archlinux LiveCD mount /dev.sda1 /mnt (有boot分区的挂boot) Running mkinitcpio -p linux Running grub-mkc ...

  5. MySQL海量数据查询优化策略

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  6. XmlNode中Value和InnerText的区别

    XmlNode中Value和InnerText的区别   这个问题我想很多人在使用.NET 操作 Xml 文档时都遇到过,先看一下MSDN里对这两个属性的解释: XmlNode.Value:获取或设置 ...

  7. 热修复 RocooFix篇(一)

    吐槽之前先放一张大帅图. (md 这张图貌似有点小 不纠结这个了==) 有时候项目刚刚上线或者迭代 测试或者在线上使用测出一个bug来 真让人蛋疼 不得不重新改bug测试 打包混淆上线感觉就向find ...

  8. remove all event handlers from a control

    The sample code below will remove all Click events from button1 public partial class Form1 : Form { ...

  9. 查询显示MSSQL表结构 [转]

    SELECT 表名 = Case When A.colorder= Then D.name Else '' End, 表说明 = Case When A.colorder= Then isnull(F ...

  10. Velocity介绍

    Velocity是一个基于Java的模版引擎,它是一个简单并且功能强大的开发工具,你可以非常容易地创建和呈现出.在这个介绍当中,我们希望可以给出一个使用基本Velocity的概述. 使用Velocit ...