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. [jobdu]二进制中1的个数

    做法是n&(n-1).据说还有变态的查表法:http://www.cnblogs.com/graphics/archive/2010/06/21/1752421.html.最后,居然必须用sc ...

  2. [wikioi]二叉树最大宽度和高度

    简单的DFS,用数组w记录每一层的宽度就行了,就是遇到一层就++.中间发现在C++里面,如果int未初始化就是用也是有异常的.还有二叉树的数组表示时,从1开始计数会比较好.还有后来学会了数组这样的初始 ...

  3. asp.net中GridView的CheckedUnBindCheckBox属性

    1. 获取GridView中CheckBox所选行的字段,即使是在绑定了数据源的时候,也可以获取选中的CheckedUnBindCheckBox对应的各个列的字段 使用时根据实际情况适当的修改即可. ...

  4. QAbstractItemView为截断的项显示ToolTip（在eventFilter函数里覆盖QEvent::ToolTip事件）

    在Qt中想要为QAbstractItemView中长度不够而使得内容被截断的项显示ToolTip,Qt官网有一篇文章介绍使用事件过滤器来显示太长的项,但是没有涵盖图标的情况.显示列头项太长的情况等等, ...

  5. 【Quick 3.3】资源脚本加密及热更新(二)资源加密

    [Quick 3.3]资源脚本加密及热更新(二)资源加密 注:本文基于Quick-cocos2dx-3.3版本编写 一.介绍 在前一篇文章中介绍了代码加密,加密方式是XXTEA.对于资源文件来说,同样 ...

  6. LinearLayout按下(pressed)或获取焦点(focused)时背景设置不同颜色或图片

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id=&qu ...

  7. Spring AOP实现方式一【附源码】

    基本代理模式  纯POJO切面 源码结构: 1.首先我们新建一个接口,love 谈恋爱接口. package com.spring.aop; /** * 谈恋爱接口 * * @author Admin ...

  8. char*,const char*和string的相互转换

    好久没写东西啦,发表学术文章一篇,hiahia~ 近日和小佳子编程时遇到很多转换问题,很麻烦,在网上查了很多资料. 为了以后查找方便,特此总结如下. 如果有不对的地方或者有更简单的方法,请指出~~ 1 ...

  9. Form.block Trigger DML常规写法

    Block的数据源是View的,如果想操作数据,需要注意在以下几个Trigger里面写代码: 一般建议创建View的时候包含rowid字段. on-lock: select inventory_ite ...

  10. NTP 服务器配置

    1.yum安装ntp 1 yum install ntp* 2.更新时间 1 ntpdate 202.120.2.101 3.加入任务计划 1 2 crontab -e */10 * * * * nt ...