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. nginx源代码分析--nginx进程间通信

    Linux下的IPC非常多,nginx的进程都是有亲缘关系的进程,对于他们的通信我们选择TCP socket进行通信.   TCP socket 用来做进程通信的优点有,   1.socket是文件描 ...

  2. Sinowal Bootkit 分析-中国红客网络技术联盟 - Powered by Discuz!

    訪问原文 (一)模块组成         感染过Sinowal的电脑,Sinaowal在硬盘中的分布例如以下图: ; Sector                 Offset             ...

  3. 0x63树的直径与最近公共祖先

    凉 bzoj1999 先把树的直径求出来,从左往右枚举,对于当前位置i,找到满足限制并且最远的点j,当前位置最大值就是max(i~j区间内除直径外的子树路径长度最大值,1~i的长度,j~n的长度) 然 ...

  4. Linux Shell Scripting Cookbook 读书笔记 5

    sed,awk 1. sed (string editor) 使用-i可以将结果运用于原文件 sed 's/text1/text2/' file > newfile mv newfile fil ...

  5. 关于java1.8中LocalDateTime实现日期，字符串互转小坑。

    今天无聊,来看了下1.8的时间类型LocalDateTime,当想把字符串转成LocalDateTime的时候报错!! java.time.format.DateTimeParseException: ...

  6. OpenCV+VS 2015开发环境配置

    最近跑C程序,头文件中用到了OpenCV中的文件,找了很多篇OpenCV+VS的环境配置,发现如下这篇写的最为详细,特转载来自己的博客中留存,并附上原博客地址如下 OpenCV学习笔记(一)——Ope ...

  7. C#解除某类警告。。。。。。。。。。

    C#预处理器指令取消不必要的警告 今天将自己写的一个类库生成一个DLL后,想把注释也加进去.... 方法:在属性->生成选项卡->XML文档文件(勾选)(生成的文件名不能修改,使用时必须跟 ...

  8. Codeforces Round #454

    Masha and Bears Tic-Tac-Toe Shockers Seating of Students Party Power Tower Reverses

  9. Absolute Horizontal And Vertical Centering In CSS

    Quick CSS Trick: How To Center an Object Exactly In The Center Centering in CSS: A Complete Guide Ab ...

  10. EF Code First连接现有数据库

    作为一个初入学习.net MVC4 的新手,想写一写今天碰到的问题,做一个总结. 首先我想利用EF Code First来连接我现有数据库,而不是通过EF Code First来自动生成数据库和表. ...