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. HDU 1400 （POJ 2411 ZOJ 1100）Mondriaan's Dream（DP + 状态压缩）

    Mondriaan's Dream Problem Description Squares and rectangles fascinated the famous Dutch painter Pie ...

  2. SGU 488 Dales and Hills

    这给题目和LIS类似,只不过是求连续的单调序列,用单调队列可破之,比如求LDIS(连续单增序列),如果a[i]大于栈顶元素入栈,将top作为序列长度,反过来再扫一遍就是包含该元素的单调递减序列,这样通 ...

  3. Android ExpandableListView的简单应用

    Expandablelistview1Activity.java package com.wangzhu.demoexpandablelistview; import java.util.ArrayL ...

  4. SQLite Version3.3.6源代码文件结构

    Version 3.3.6源代码文件结构                                                ——整理:hustcat 2009-2-19 文件名称 大小by ...

  5. Spring 3.x企业应用开发实战(14)----事务

    Spring虽然提供了灵活方便的事务管理功能,但这些功能都是基于底层数据库本身的事务处理机制工作的.要深入了解Spring的事务管理和配置,有必要先对数据库事务的基础知识进行学习. 何为数据库事务 “ ...

  6. Microsoft Internet Explorer内存破坏漏洞(CVE-2013-5052)

    漏洞版本: Microsoft Internet Explorer 6-11 漏洞描述: BUGTRAQ ID: 64126 CVE(CAN) ID: CVE-2013-5052 Internet E ...

  7. easyui plugin —— etreegrid：CRUD Treegrid

    昨天写了一个ko+easyui的同样的实现,感觉写的太乱,用起来十分麻烦,于是今天照着edatagrid,写了一个etreegrid,这样再用ko绑定就方便多了. 使用很简单,$(tableId).e ...

  8. apache开源项目--gora

    Gora 是一个应用于 NoSQL 数据库的 ORM 框架,支持包括:Apache HBase/Apache Cassandra

  9. 从头开始编写一个Orchard网上商店模块(3) - 创建Orchard.Webshop模块项目

    原文地址:http://skywalkersoftwaredevelopment.net/blog/writing-an-orchard-webshop-module-from-scratch-par ...

  10. Asm Shader Reference --- Shader Model 1 part

    ps部分 ps_1_1,ps_1_2,ps_1_3,ps_1_4 总览                   Instruction Set                               ...