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. ANDROID_MARS学习笔记_S01原始版_018_SERVICE之Parcel

    一.代码 1.xml(1)activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk ...

  2. Date简介

    Date类 在JDK1.0中,Date类是唯一的一个代表时间的类,但是由于Date类不便于实现国际化,所以从JDK1.1版本开始,推荐使用Calendar类进行时间和日期处理.这里简单介绍一下Date ...

  3. A9两款芯片管脚数目

        Exynos 4412   bga786; S5P4418  bga513 

  4. 【HDOJ】3275 Light

    这就是个简单线段树+延迟标记.因为对bool使用了~而不是!,wa了一下午找不到原因. /* 3275 */ #include <iostream> #include <sstrea ...

  5. ERP 推式 拉式 工序拉式 装配拉式 倒冲

    ERP 推式  拉式  工序拉式   装配拉式   倒冲 以上為生产订单(wip)中的原料供应方式,最常用的有Pull和Push. PULL即拉动方式: 拉式生产是生产为主,原材料是由专门的配送人员按 ...

  6. Ubuntu 出现apt-get: Package has no installation candidate问题

    今天在安装软件的时候出现了Package has no installation candidate的问题,如: #  apt-get install <packagename> Read ...

  7. Linux kernel ‘xfs_attrlist_by_handle()’函数缓冲区溢出漏洞

    漏洞名称: Linux kernel ‘xfs_attrlist_by_handle()’函数缓冲区溢出漏洞 CNNVD编号: CNNVD-201311-392 发布时间: 2013-11-29 更新 ...

  8. 发布网站，报Access to the path is denied的解决办法

    错误: Server Error in '/' Application.---------------------------------------------------------------- ...

  9. 彻底解决：请求被中止: 未能创建 SSL/TLS 安全通道

    最近有个项目要调用客户用java写的带https的webservice,对方提供了证书文件 test.pfx,我这里调用方式如下: //webservice代理类 SvcService svc = n ...

  10. Spring读取加密属性文件处理

    引言:Spring框架俨然已经是目前Java WEB项目开发的一个宠儿,更有人将Spring, Struts,和Hibernage称之为Java WEB项目开发的3件利器.Spring的依赖.注入.A ...