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. 关于ShapeDrawable应用的一些介绍（下）

    我们今天接着来看一下Shape中的stroke属性,stroke其实就是边缘的意思,当我们在定义画笔的时候,有很多时候会用到 FILL 和 STROKE,前者能够画出一个实心的形状,而后者就画出一个空 ...

  2. 开发vue插件并发布到npm包管理工具的流程

    1-10是开发流程,后面的是发布流程 1. 在Git里面…新建项目   2. 克隆项目到本地用来开发 git clone https://github.com/***/vue-prevent-brow ...

  3. 如何在C#中运行数学表达式字符串

    方法1:利用DataTable中的Compute方法 1 string expression = "1+2*3"; 2 DataTable eval = new DataTable ...

  4. 浅析CLR的事件

    文章目录:     1.C#(.net framework框架)中的事件以及特点 2.事件的组成部分 3.编辑器如何实现事件的         4.显式实现事件 1.C#(.net framework ...

  5. Gitlab smtp 设置

    地址: https://blog.csdn.net/yongche_shi/article/details/78677163 # 腾讯云限制25发信端口,修改为465,并开启. https://doc ...

  6. Python matplotlib库

    安装日期:2017.9.7 版本不太清楚,为啥嘞? 从python2到python3,还有在学的tensorflow,版本一更新就会有之前的代码不能用了.学习的时候用别人的代码各种出错,查了半天发现那 ...

  7. It Started With A Kiss

  8. GCC编译步骤

    gcc -E t1.c -o t1.i 预处理gcc -S t1.i -o t1.s 转成汇编语言gcc -c t1.s -o t1.o 转成机器码gcc t1.o -o t1.exe 链接 直接使用 ...

  9. WordPress浏览次数统计插件：WP-Postviews使用

    WP-Postviews使用 1.要让你的博客在页面上显示浏览次数,你需要修改你博客当前使用的主题,在主循环中插入以下代码: 1 <?php if(function_exists('the_vi ...

  10. CUDA与OpenCL架构

    CUDA与OpenCL架构 目录 CUDA与OpenCL架构 目录 1 GPU的体系结构 1.1 GPU简介 1.2 GPU与CPU的差异 2 CUDA架构 2.1 硬件架构 2.1.1 GPU困境 ...