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. 当使用Spring MVC @Valid对输入框进行验证的时候，可能会遇到以下的异常：Neither BindingResult nor plain target object for bean name ‘mybean’ available as request attribute

    转自:https://www.cnblogs.com/wenhulu/p/5555457.html 当使用Spring MVC @Valid对输入框进行验证的时候,可能会遇到以下的异常: Neithe ...

  2. [源码管理] Microsoft Visual SourceSafe 2005 下载与配置

    一.VSS2005的下载地址是:百度搜索关键字:vss, 二.配置Microsoft Visual SourceSafe 2005的Internet访问 VSS2005发布以后,早就听说可以支持Int ...

  3. WinSocket聊天程序实例（多线程）

    #pragma comment(lib,"Ws2_32.lib") #include <stdio.h> #include <Winsock2.h> SOC ...

  4. maven 打包jar && lib

    一.springboot 打包成jar 1.pom.xml <build> <!-- jar的名称--> <finalName>shiro</finalNam ...

  5. 爬虫之Urllib库的基本使用

    官方文档地址:https://docs.python.org/3/library/urllib.html 什么是Urllib Urllib是python内置的HTTP请求库包括以下模块urllib.r ...

  6. Super超级ERP系统---(5)采购管理--采购入库

    采购商品完成后,下一步要进行入库操作.为了做到精细化管理,入库操作主要分以下几个步骤,采购到货确认,采购入库,入库完成.接下来我们看看这些步骤是怎样实现的. 1.到货确认 采购商品到达仓库后,仓库收货 ...

  7. 洛谷P1208 [USACO1.3]混合牛奶 Mixing Milk(贪心)

    题目描述 由于乳制品产业利润很低,所以降低原材料(牛奶)价格就变得十分重要.帮助Marry乳业找到最优的牛奶采购方案. Marry乳业从一些奶农手中采购牛奶,并且每一位奶农为乳制品加工企业提供的价格是 ...

  8. Java基础8一面向对象

    一.JavaBean标准的定义规范 1.类中所有的属性必须是私有的,也就是说属性必须用private修饰. 2.提供一个公共无参数的构造方法. 3.为所有私有的属性提供公共的set和get方法. se ...

  9. 23个Python爬虫开源项目代码：爬取微信、淘宝、豆瓣、知乎、微博等

    来源:全球人工智能 作者:SFLYQ 今天为大家整理了23个Python爬虫项目.整理的原因是,爬虫入门简单快速,也非常适合新入门的小伙伴培养信心.所有链接指向GitHub,祝大家玩的愉快 1.Wec ...

  10. Retrofit进行post提交json数据

    1:先看一看xutils3的提交代码 String account = editText1.getText().toString(); String password = editText2.getT ...