[HTML5] How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users (ARIA)
2024-08-31 08:11:11
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>
最新文章
- Citrix运行检测出错
- Android常见控件— — —TextView
- 为FaceBook审核提交模拟器包及自己验证模拟器包
- Linux删除文件后空间没有释放
- Redis学习手册(实例代码)
- hibernate性能消耗太狠了。果断减肥引发的连串意外惊喜
- cocos3——8.实现初学者指南
- 运行时设计(Design at Run-time)
- hdu_5964:平行四边形
- 开发者说 | 使用Visual Studio Code编译、调试Apollo项目
- 【翻译】从Store生成Checkbox Group
- php : 文件及文件夹操作(创建、删除、移动、复制)
- html 之 <;meta>; 标签之http-equiv
- (第十二周)final预发布视频
- Three.js基础探寻一
- 在eclipse上搭建Roku开发环境
- MT【109】线面角最大时为二面角平面角
- DAY5-Flask项目
- 【BZOJ4242】水壶(克鲁斯卡尔重构树,BFS)
- Java-jdbc工具类DBUtils