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. loadrunner http协议put模式脚本编写

    web_submit_data("rest", "Action=http://www.test.com/111ojhjh.do", "Method=P ...

  2. JNI 多线程

    一.概述 JNI编程和Linux上的C/C++编程还是挺相似的,每次java调用JNI中的函数时都会传入有关JVM的一些参数(如JNIEnv,jobject),每次JNI回调java中的方法时都要通过 ...

  3. new[]上面居然有一个内存计数，怪不得delete[]从来不出错

    开眼界了,留个爪,以后再仔细看几遍: http://www.cnblogs.com/hazir/p/new_and_delete.html

  4. 【HDOJ】2065 "红色病毒"问题

    刚开始看这道题目的时候,完全没看出来是递推.看了网上大牛的分析.立刻就明白了.其实无论字符串长度为多少,都可以将该长度下的组合分成四种情况S1(A偶数C偶数).S2(A偶数C奇数).S3(A奇数C偶数 ...

  5. Python‘ssl.match_hostname()’函数SSL证书验证安全绕过漏洞

    漏洞名称: Python‘ssl.match_hostname()’函数SSL证书验证安全绕过漏洞 CNNVD编号: CNNVD-201312-033 发布时间: 2013-12-04 更新时间: 2 ...

  6. NOI 2014 感想

    NOI2014结束了,我卡线登上了领奖台... 这是我第一次NOI,我觉得我收获了很多东西: 1.考前心态不重要,重要的是实力 真正考试的时候是顾不得想其他事情的 2.测试数据是人出的!不是随机的!不 ...

  7. c语言输入与输出库函数#include<stdio.h>

    last modified: 2010-05-28 输入与输出<stdio.h> 头文件<stdio.h>定义了用于输入和输出的函数.类型和宏.最重要的类型是用于声明文件指针的 ...

  8. 利用HttpWebRequest和HttpWebResponse获取Cookie

    之前看过某个同学的一篇有关与使用JSoup解析学校图书馆的文章,仔细一看,发现竟然是同校!!既然对方用的是java,那么我也就来个C#好了,虽然我的入门语言是java. C#没有JSoup这样方便的东 ...

  9. SVN使用教程之——分支、合并

    首先说下为什么我们需要用到分支-合并.比如项目demo下有两个小组,svn下有一个trunk版.由于客户需求突然变化,导致项目需要做较大改动,此时项目组决定由小组1继续完成原来正进行到一半的工作[某个 ...

  10. CodeForces 368B Sereja and Suffixes

    题意:给你一个序列,问你从l位置到结尾有多少个不同的数字. 水题,设dp[i]表示从i位置到结尾不同数字的个数,那么dp[i] = dp[i+1] + (vis[a[i]] == 0),在O(n)时间 ...