You can make any element keyboard interactive with the HTML tabindex attribute. But you might need a little extra JavaScript and ARIA to support keyboards and screen readers. For more on using tabindex in practice, check out focus management lesson.

tabindex="0":

Make it accessable by click "tab" on keyboard.

tabindex="-1":

Make it uaccessable by clicking "tab" on keyboard, but still can send fouse by Javascript. Why -1 can be useful. It has pulled it out of the tab order, which is handy if, say, that button is in an inactive screen in a web application or behind a modal window. You might have some reason to pull it out of the tab order, so that a screen reader or keyboard user isn't landing on something that they can't use, for whatever reason.

  <div tabindex="100" id="fakeBtn" class="btn" role="button">Button</div>

  <button id="realBtn" class="btn">Button</button>

[HTML5] Using the tabindex attribute for keyboard accessibility的更多相关文章

  1. DIV使用tabindex获得事件详解 移动div

    添加 tabindex='-1' 属性: 默认:获取不到焦点事件(blur) 1 <div class="wl-product" id="wl-product&qu ...

  2. Web 建站技术中,HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么(转)

    Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么?修改 建站有很多技术,如 HTML.HTML5.X ...

  3. DIV焦点事件详解 --【focus和tabIndex】​

    添加 tabindex='-1' 属性: 默认:获取不到焦点事件(blur) 1 <div class="wl-product" id="wl-product&qu ...

  4. 【HTML5 】<script>元素async,defer异步加载

    原文地址:HTML5′s async Script Attribute原文日期: 2010年09月22日翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再 ...

  5. HTML5 <script>元素async,defer异步加载

    原文地址:HTML5′s async Script Attribute原文日期: 2010年09月22日翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再 ...

  6. HTML5新增的form属性简介——张鑫旭

    一.引言 HTML5中新增了一个名为form的属性,是一个与处理表单相关的元素. 在HTML4或XHTML中,我们要提交一个表单,必须把相关的控件元素都放在<form>元素下.因为表单提交 ...

  7. HTML TabIndex属性

    TabIndex作用: tabindex:全局属性.指示其元素是否可以聚焦(获得焦点),以及它是否/在何处参与顺序键盘导航(因通常使用tab键操作,顾因此得名). 当使用tab键在网页控件中进行导航时 ...

  8. 学习笔记:MDN的HTML

    一.        HTML介绍: HTML —— 用于定义一个网页的结构的基本技术. 元素(Element):开始标记,加结束标记,加内容,等于元素. 两种重要的元素类别,块级元素和内联元素: 块级 ...

  9. vue中v-on支持的事件总结

    资源事件 事件名称 何时触发 error 资源加载失败时. abort 正在加载资源已经被中止时. load 资源及其相关资源已完成加载. beforeunload window,document 及 ...

随机推荐

  1. 在 Android* 商务应用中实施地图和地理围栏特性

    摘要 本案例研究讨论了怎样将地图和地理定位特性构建到 Android* 商务应用中.包含在 Google Maps* 上覆盖商店位置,以及在设备进入商店地理围栏邻近区域时借助地理围栏通知用户. 文件夹 ...

  2. graphicview和widgets没本质区别。它只是更轻量级,更灵活,性能更高的widgets

    graphicview和widgets没本质区别.它只是更轻量级,更灵活,性能更高的widgets.核心就是把widgets变成了更轻量级的graphicitem,把QWidget的各种事件转换成了g ...

  3. Web 组件是什么

    Web 组件是什么 一.总结 这篇下面的内容多看 1.组件化的目的:高内聚,低耦合,便于多人同时开发 2.各种前端框架(前端组件化)让写前端不要太简单: 3.组件编程最最最最简单实例: <lin ...

  4. 104.tcp多线程读写实现群聊

    客户端: #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include <w ...

  5. Android RxBus的实现及简单使用

    RxJava目前已经很火了,如果你尚未了解请看这里.对于RxJava这里不多做介绍.RxBus并不是一个库,而是一种模式.相信大多数开发者都使用过EventBus,作为事件总线通信库,如果你的项目已经 ...

  6. 【Codeforces Round #445 (Div. 2) A】ACM ICPC

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 三重循环 [代码] #include <bits/stdc++.h> using namespace std; int ...

  7. 【例题 6-11 UVA-297】Quadtrees

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 发现根本不用存节点信息. 遇到了叶子节点且为黑色,就直接覆盖矩阵就好(因为是并集); [代码] #include <bits/ ...

  8. Source Insight 3.50.0065使用详解

    转自calvinlee1984 Subject:Source Insight3.50.0065使用详解 Date:     21-Oct-2011 By:         Calvinlee1984@ ...

  9. 【习题 3-6 UVA - 232】Crossword Answers

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟题.注意场宽为3 [代码] #include <bits/stdc++.h> using namespace std ...

  10. Oracle-18-select语句初步&amp;SQL中用算术表达式&amp;别名的使用&amp;连接运算符%distinct&amp;where子句

    一.一般SELECT语句的格式例如以下: 1.查询指定表的全部列 select * from 表名 [where 条件] [group by 分组列名] [having 聚合函数] [order by ...