There are many techniques for hiding content in user interfaces, and not all are created equal! Learn how different hiding techniques in HTML, CSS and ARIA impact keyboard and screen reader users in addition to visual display. As a bonus, we'll also take a look using a screen reader on a mobile device.

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Visible vs. Hidden</title>

    <meta name="viewport" content="initial-scale=1">

    <link rel="stylesheet" type="text/css" href="css/demo.css">

</head>

<body>

     <!-- no space reserved, hidden from aria-->

    <div style="display: none;">

        <h1>Heading</h1>

        <a href="#link1">Link 1</a>

    </div>

    <!-- no space reservced, hidden from aria-->

    <div hidden>

        <h1>Heading</h1>

        <a href="#link2">Link 2</a>

    </div>

    <!-- reserve the space, not hidden from aria-->

    <div style="opacity: 0;">

        <h1>Heading</h1>

        <a href="#link3">Link 3</a><!-- can add tabindex="-1" to hide from tab focus -->

    </div>

    <!-- reserve the space, link is not reachable, similar to display:none; -->

    <div style="visibility: hidden;">

        <h1>Heading</h1>

        <a href="#link4">Link 4</a>

    </div>

   <!-- content is still be renderered to the screen, and link is also reachable -->

    <div class="visuallyhidden">

        <h1>Heading</h1>

        <a href="#link5">Link 5</a>

    </div>

   <!-- render to screen and hidden from aria-->

    <div aria-hidden="true">

        <h1>Heading</h1>

        <a href="#link6">Link 6</a>

    </div>

</body>

</html>

[HTML5] How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users (ARIA)的更多相关文章

  1. 零元学Expression Blend 4 - Chapter 39 虾米?!同款?不同师傅!告诉你Visible、Hidden与Collapsed的差异!

    原文:零元学Expression Blend 4 - Chapter 39 虾米?!同款?不同师傅!告诉你Visible.Hidden与Collapsed的差异! 由此可知 Hidden为隐藏项目,但 ...

  2. [Cypress] Interact with Hidden Elements in a Cypress Test

    We often only show UI elements as a result of some user interaction. Cypress detects visibility and ...

  3. [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 ...

  4. 解决HTML5布局，兼容IE问题

    当我们使用h5的新标签,header,footer,aside,section,article...时,会遇到低版本IE不兼容问题,如下图: 解决方案:引入如下JS代码,即可 (这里我就直接放源码了, ...

  5. CSS:opacity:0,visibility:hidden,display:none的区别

    CSS中opacity=0,visibility=hidden,display=none的时候,三者有什么区别呢?? 参考了stackoverflow的博客,才发现区别如下所示: Here is a ...

  6. HTML5 API 是什么

    HTML5 API 是什么 一.总结 1.html5有很多好的api可以用:例如绘图的canvas,获取地理位置的,获取手机电池信息的等等,后面用的时候可以百度 2.html5 API是什么:html ...

  7. 触摸屏键盘插件Virtual Keyboard 该怎么用 Virtual Keyboard 入门指南

    最近公司有个项目,这个项目的显示器是触摸屏, 所以在一些需要简单输入的input需要加一个触摸屏的软键盘, 我在github上找了很多开源项目,最后选择了Virtual Keyboard, 以下是我自 ...

  8. html5的video元素学习手札

    为了监控移动端视频播放的情况,研究了一下 html5 <video> 标签的属性与事件触发,及其在各系统和各个浏览器的兼容情况 属性与事件 理解清楚属性和事件,才能更好的使用 video ...

  9. 拥抱HTML5 — Page Visibility(页面可见性) API介绍

    H5 提供了很多简单实用的 API,Page Visibility API 就是其中之一. 不知道用户是不是在与页面交互,这是困扰广大 Web 开发人员的一个主要问题.如果 页面最小化了 或者 隐藏在 ...

随机推荐

  1. 关于jetty服务器默认首页和端口设置

    一.jetty服务器部署.启动成功后,在浏览器输入http://localhost:8080/ 可以直接访问到jetty欢迎首页. 这是因为在Jetty包中默认带了一个test.war的应用,在${J ...

  2. Style contains key with bad entry

    出现Style contains key with bad entry错误,检查权限是否配置好

  3. NAS与SAN有什么区别？

    NAS和SAN字面上相似,并且都是新型数据存储模式,但这二者是完全不同的,针对不同方向的技术,为了能够更好的区分它们,天伟数据恢复整理了以下内容供读者参考(天伟数据恢复建议重要数据多备份,备份很重要以 ...

  4. SwiftUI 官方教程（五）

    SwiftUI官方教程(五) 5. 同时使用 UIKit 和 SwiftUI 至此,我们已准备好创建 map view 了,接下来使用 MapKit 中的 MKMapView 类来渲染地图. 在 Sw ...

  5. BZOJ 1507 splay

    写完维修数列 这不是水题嘛233333 //By SiriusRen #include <cstdio> #include <cstring> #include <alg ...

  6. laydate.js时间选择

    例子: <asp:HiddenField ID="hfdDateBuid3" runat="server" /> <script type=& ...

  7. X264编码实现

    H264 H264的官方测试源码,由德国hhi研究所负责开发.特点:实现了264所有的特性,由于是官方的测试源码,所以学术研究的算法都是在JM基础上实现并和JM进行比较.但其程序结构冗长,只考虑引入各 ...

  8. Wireshark抓包过滤

    主要说明下抓包前准备工作,及wireshark里面的两个过滤器:捕获过滤器和应用显示过滤器 1.捕获过滤器.顾名思义就是捕获时的过滤器.主要用来决定你要抓包抓哪个IP哪个端口,明确自己要抓哪个IP和端 ...

  9. BigDecimal，注解

    BigDecimal 问题重现 今天在干活的途中,发现一个很坑爹的问题,让我来复现下问题: 从上游接口获得的余额,对于为0的,做了判断 BigDecimal a = new BigDecimal(ac ...

  10. nodeJs的一些常识知识

    在项目目录中打开命令窗口 1. npm init 生成一个 package.json.(npm inii -y 直接生成,不用确定). 2.npm i . 下载 package.json devDep ...