最简单:
<input type="image" src="email.png" width="14" height="14" alt="Email">
 
使用 css sprites的话:
<style>
    .email-btn {
        width: 14px;
        height: 14px;
        background: url(activities.png) 0 -85px no-repeat;
    }
</style>
<input type="image" src="transparent.gif" class="email-btn" alt="Email">
input中的图案是透明的,真正显示的由 css 中的activities.png控制
In this case, the major screen readers (JAWS, NVDA, VoiceOver) announce “Email button” in all major browsers, reading the alt text and identifying the image as a button
 
使用 icon font 情况下:
<a href="#">
    <span class="icon-home"></span>
    <span class="visuallyhidden">Home</span>
</a>
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
How People with Disabilities Use the Web: Overview
 
提高可访问性:
第一步,检查<title></title>,不允许空,不允许过长,简洁明了
第二步,提供文字替代方案,图片、iframe、object,检查这些元素是否填写了适当的alt属性或者title属性的值
第三步,检查表单。是否有label标签,这些label的for属性是否通过填写相应表单元素的id来彼此绑定;比如一个按钮的样式是一个放大镜,那么替代文字的内容一定不是“放大镜”,而是“搜索”。
第四步,使用heading做信息架构。辅助技术,特别是读屏软件,一般都会提供一个快捷键h,按h按键,焦点即可在heading之间切换,从而提高浏览效率。
第五步,是否有blur()。辅助技术一般都是依靠焦点来获取内容,所以这个事件从本质上就使得辅助内容无法获得应用了此方法的元素。this.onfocus=this.blur()这个是最傻的一句代码了。
第六步,按Ctrl+或者command+查看页面是否可以被缩放。老年人和使用11寸高档笔记本的老板可是非常喜欢使用放大页面的功能的。
第七步,添加landmark角色。这个是成本最低的方法了,添加的方法就是给相应功能的元素添加role这个属性,并赋予响应的landmark值。一共有8个值,一般你只能用到6个:banner(banner)、complementary(辅助内容区)、contentinfo(网站信息和版权)、form(表单)、main(主内容区)、navigation(导航区)、search(搜索区)。如果一个表单,他仅仅是提供搜索功能,那么就将role设置为search,而不是form。
第八步,设置快捷键。1是指向首页的那个链接。Esc是停止播放音视频,是停止,不是暂停。这两个按键是迄今为止最能达成共识的快捷键了。
第九步,触发界面转换需设置焦点。如果你通过一个按钮触发了一个组件窗口,在关闭这个组件窗口的时候,请把焦点重新移动回到触发这个窗口的按钮上。
 

可点击的icon按钮 无障碍 ARIA 可访问性的更多相关文章

  1. Jetpack Compose学习(3)——图标(Icon) 按钮(Button) 输入框(TextField) 的使用

    原文地址: Jetpack Compose学习(3)--图标(Icon) 按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 本篇分别对常用的组件:图标(Ic ...

  2. 实现点击不同的按钮加载不同的css

    这段时间做一个小网站发现有时候特别需要点击不同的按钮去加载不同的css,这样可以确定点击的是哪个,由于每个按钮都是从后端数据库加载过来的,不仅是简简单单的用id或者是类名,用过this也不行: 前端加 ...

  3. JavaScript或jQuery模拟点击超链接和按钮

    有时候我们需要页面自动点击超链接或者按钮,可以用js或者jQuery利用程序去点击,方法很简单,按钮或超链接代码如下: <a href="url" target=" ...

  4. ng-file-upload(在单文件选择,并且通过点击“上传”按钮上传文件的情况下,如何在真正选择文件之前保留上一文件信息?)

    文章前面研究ng-file-upload可能涉及指令: You can use ng-model or ngf-change instead of specifying function for ng ...

  5. 消除点击连接或者按钮或者执行onclick事件时出现的边框

    css中添加 *:not(input) { font-family: sans-serif; font-size-adjust: none; -webkit-user-select: none; -w ...

  6. iOS开发 横向分页样式 可左右滑动或点击头部栏按钮进行页面切换

    iOS开发 横向分页样式 可左右滑动或点击头部栏按钮进行页面切换 不多说直接上效果图和代码 1.设置RootViewController为一个导航试图控制器 //  Copyright © 2016年 ...

  7. JS实现点击参数面板按钮显示或隐藏数据

    当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据.如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板 ...

  8. Android——点击对话框上按钮不关闭对话框

    有时候我没可能需要在点击按钮进行一些检测,但是并不想关闭次对话框(系统默认点击任何一个按钮则关闭对话框),处理方法如下:在点击事件下添加如下代码: try { Field field = dialog ...

  9. 使用pjax时点击浏览器刷新按钮仅加载内容页的解决办法

    pjax可以实现ajax的局部刷新功能,同时能改变地址栏的URL,因此支持浏览器的后退和前进功能. 但是,在使用中,若没有正确使用,仍然会出现一些问题. 比如,我们在使用pjax后,能够在不加载整个页 ...

随机推荐

  1. JS设计模式(二) 惰性模式

    惰性模式:减少代码每次执行时的重复性判断,通过重新定义对象来避免原对象中的分支判断,提高网站性能. 例如针对不同浏览器的事件注册方法: var AddEvent = function(dom, typ ...

  2. PLSQL Developer 连接oracle(64)(instantclient_32)

    下载instantclient-basic-nt-11.2.0.2.0位客户端,加压后存放,如F:\instantclient_11_2 拷贝Oracle 11.2G的msvcr80.dll和tnsn ...

  3. 用 Python 撸一个区块链

    本文翻译自 Daniel van Flymen 的文章 Learn Blockchains by Building One 略有删改.原文地址:https://hackernoon.com/learn ...

  4. UWP 自定义状态栏

    在UWP开发中,我们可以改变状态栏样式,让你的应用更加好看. 先来一简单的应用: 为了做例子,所以我做的很简单,在MainPage的Grid里,插了一个Image <Grid Backgroun ...

  5. Centos 7.4 下初探Zabbix安装

    工作一波停一波起,感觉离开.net好久了. 最近工作中发现服务器监视都是用了zabbix,对于我这类不懂的狠狠弥补了一下知识. 无意发现zabbix带有api,就想开发个工具调用api来着.可是api ...

  6. Mysql主从复制原理及配置

    Mysql主从复制原理及配置 1.复制概述 Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的数据复制到其 ...

  7. WPF DataGrid Custommization using Style and Template

    WPF DataGrid Custommization using Style and Template 代码下载:http://download.csdn.net/detail/wujicai/81 ...

  8. CSS之 relative 特性

    1. 自身特性: 如left,right,top,bottom定位都是相对于自身位置定位. 当left与right同时存在,lfet生效. 当top与bottom同时存在,top生效. 无侵入,保留原 ...

  9. 虚拟机VMware-workstation-full-12.5.2安装注册方法(附安装包下载链接)

    首先,需要下载好虚拟机的安装包: 链接:http://pan.baidu.com/s/1mix3fFa 密码:6ftu 下载好后,双击安装程序,弹出安装界面,然后按照红色圈圈的指示进行安装操作,完成安 ...

  10. Table 控件各元素及属性

    功能:在Web页中创建通用表格里. 属性: 1.CellPadding属性:用于设置表中单元格的边框和内容之间的距离(以像素为单位).默认为-(未设置). 2.CellSpacing属性:用于设置表中 ...