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. ＠转EXT2->EXT3->EXT4

    Linux文件系统第一篇—从Ext2到Ext3再到Ext4 1 概述 Linux继承了UNIX一切皆文件的设计哲学,用文件和树形目录的抽象逻辑概念代替了硬盘和光盘等物理设备使用数据块的概念,用户使用文 ...

  2. 1.11 Python基础知识 - 序列：元组

    元组(tuple)是一组有序系列,元组和列表是否相似,但是元组是不可变的对象,不能修改.添加或删除元组中的元素,但可以访问元组中的元素 元组的定义: 元组采用圆括号中用逗号分隔的元素 元组的基本操作和 ...

  3. 【Codeforces Round #447 (Div. 2) C】Marco and GCD Sequence

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 把gcd(a[1..n])放在输入的n个数之间. [代码] /* 1.Shoud it use long long ? 2.Have ...

  4. 为什么出现ORM

    ORM(Object Relational Mapping)对象关系映射,是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术 . 为什么出现ORM? 面向对象的特征:我们通常使用的开发语言J ...

  5. js进阶 13-7 如何实现滑动面板效果

    js进阶 13-7 如何实现滑动面板效果 一.总结 一句话总结:就是普通的jquery动画中的滑动效果.$('#content').slideToggle().滑动效果的实质是通过调整高度. 1.滑动 ...

  6. python 字符串大小写转换（不能使用swapcase()方法）

    python 3字符串大小写转换 要求不能使用swapcase()方法 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wa ...

  7. Win10系统如何设置所有程序默认以管理员身份运行？

    原文:Win10系统如何设置所有程序默认以管理员身份运行? 在win10系统中有些用户发现一些程序只有使用管理员身份运行能才打开,这样的话就感觉会麻烦很多,那么有没有办法设置所有程序都默认以管理员身份 ...

  8. Virtualizing physical memory in a virtual machine system

    A processor including a virtualization system of the processor with a memory virtualization support ...

  9. [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2

    Artical --> BYPASSING PROVIDERS IN ANGULAR 2 Here trying to solve one problem: On the left hand s ...

  10. LeetCode——Set Matrix Zeroes

    Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. 原题链接:h ...