Sometime when some component is offscreen, but still get focus when we tab though the page.

This can cause users' confusion.

One easy to to find out the offscreen component is typing in your console,

document.activeElement

It will shows your the current focus element.

Then what you need to do is add CSS so that it won't get focus anymore.

  display: none;
visibility: hidden;

When it comes into screen, set CSS:

  display: block;
visibility: visibile;

[HTML5] Handle Offscreen Accessibility的更多相关文章

  1. [HTML5] Semantics for accessibility

    For example, when we use checkbox, if we do like this: <div class="inline-control sign-up co ...

  2. [HTML5] Accessibility Implementation for complex component

    When you developing a complex component by your own, one thing you cannot ignore is Accessibility. C ...

  3. [HTML5] Using the focus event to improve navigation accessibility (nextElementSibling)

    For a menu item, when we tab onto it, we want this element get 'focus' event, so that the submenu wi ...

  4. [HTML5] Using the tabindex attribute for keyboard accessibility

    You can make any element keyboard interactive with the HTML tabindex attribute. But you might need a ...

  5. HTML5 Differences from HTML4

    Abstract "HTML5 Differences from HTML4" describes the differences of the HTML5 specificati ...

  6. html5 Websockets development guidance

    1. WebSockets -- full-duplex communication The main HTML5 pillars include Markup, CSS3, and JavaScri ...

  7. 弹幕文化与HTML5

    分享人:herry 弹幕篇:弹幕文化与HTML5 说说弹幕 弹幕文化 1什么是弹幕? 弹(dàn)幕(mù)在国内兴起已经有个把年了,相信很多朋友都差不多知道弹幕这个东西. 弹幕系统最初的起源是一家日 ...

  8. HTML5的Server-Sent Events介绍////////////////zzz

    HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据推送).我们来看下,传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有A ...

  9. HTML5 Canvas核心技术图形动画与游戏开发(读书笔记)----第一章,基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

随机推荐

  1. S5PV210开发板 VGA测试【转】

    本文转载自:http://www.cnblogs.com/endlessli/archive/2011/07/07/2099865.html 不断努力 不断努力 S5PV210开发板 VGA测试 WY ...

  2. Android5.1 在init.rc 中添加自己的服务【转】

    本文转载自:http://blog.csdn.net/VOlsenBerg/article/details/71085610 我有一个需求就是在Android系统开机的时候把一个配置文件放到Andro ...

  3. 0x55 环形与后效性问题

    poj2228 分第一天是否熟睡DP两次 #include<cstdio> #include<iostream> #include<cstring> #includ ...

  4. Node.js:Web 模块

    ylbtech-Node.js:Web 模块 1.返回顶部 1. Node.js Web 模块 什么是 Web 服务器? Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,Web服 ...

  5. C# 同步更新系统时间

    前言 在定位用户问题时,发现有些电脑,会出现系统时间不是最新的问题. 可能原因: 取消了勾选服务器时间同步 当前安装的系统,是一个未知来源系统,导致系统时间更新失败 而系统时间不正确,会导致IE选项- ...

  6. ASP.NET Core Web API下事件驱动型架构的实现

    mvp 原创博文:http://www.cnblogs.com/daxnet/p/8082694.html

  7. BZOJ 1061费用流

    思路: 我们可以列出几个不等式 用y0带进去变成等式 下-上 可以消好多东西 我们发现 等式左边的加起来=0 可以把每个方程看成一个点 正->负 连边 跑费用流即可 //By SiriusRen ...

  8. webkitdirectory 实现文件夹上传

    文件夹上传这个功能在web端可能有需求,这里就简单介绍下用法. 目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传,具体可以看下百度云盘的网页版的上传按钮,在火狐下就支持按照文件 ...

  9. vue-阻止事件冒泡-开启右键-键盘类事件

    一: 阻止事件冒泡 布局: 当点击按钮时,会触发button的click 也会触发父级的方法 <div id="box"> <div @click="p ...

  10. 基于MapReduce的贝叶斯网络算法研究参考文献

    原文链接(系列):http://blog.csdn.net/XuanZuoNuo/article/details/10472219 论文: 加速贝叶斯网络:Accelerating Bayesian ...