[ARIA] Add aria-expanded to add semantic value and styling
In this lesson, we will be going over the attribute aria-expanded. Instead of using a class like .open we are going to use the aria-expanded attribute to style.
This accomplished double duty because we have semantic value and visual indicators that a button is open and closed.
To test this, I opened up Safari and used CMD + F5 to turn VoiceOver on.
- An Introduction to ARIA States
- w3c Using aria-expanded to indicate the state of a collapsible element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/style.css" />
<title>Egghead Aria Expanded</title>
</head>
<body>
<h1>Aria Expanded Demo</h1>
<button class="pop-up__open">Helpful links</button>
<ul class="pop-up__items">
<li>
<a href="http://google.com/">Google</a>
</li>
<li>
<a href="http://google.com/">Stack Overflow</a>
</li>
<li>
<a href="https://dev.to/">Dev.to</a>
</li>
</ul>
<script>
const showButton = document.querySelector(".pop-up__open");
showButton.setAttribute("aria-expanded", false); showButton.addEventListener("click", () => {
const ariaExpanded = showButton.getAttribute("aria-expanded"); // This will return a string if (ariaExpanded === "true") {
showButton.setAttribute("aria-expanded", false);
} else {
showButton.setAttribute("aria-expanded", true);
}
});
</script>
</body>
</html>
[ARIA] Add aria-expanded to add semantic value and styling的更多相关文章
- 在 VS 类库项目中 Add Service References 和 Add Web References 的区别
原文:在 VS 类库项目中 Add Service References 和 Add Web References 的区别 出身问题: 1.在vs2005时代,Add Web Reference(添加 ...
- git add -A 和 git add . 的区别
git add -A和 git add . git add -u在功能上看似很相近,但还是存在一点差别 git add . :他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文 ...
- git add -A和git add . 的区别
git add -A和 git add . git add -u在功能上看似很相近,但还是有所差别. git add . :他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文件内容 ...
- add jars、add external jars、add library、add class folder的区别
add external jars = 增加工程外部的包add jars = 增加工程内包add library = 增加一个库add class folder = 增加一个类文件夹 add jar是 ...
- xtu summer individual 5 A - To Add or Not to Add
To Add or Not to Add Time Limit: 2000ms Memory Limit: 262144KB This problem will be judged on CodeFo ...
- git add -A、git add -u、git add .区别
git add各命令及缩写 git add各命令 缩写 git add --all git add -A git add --update git add -u git add . Git Versi ...
- 函数柯里化常见应用---add(1,2) add(1)(2) add(1)(2)(3) add(1,2,3)(4)
这是一道经典的题目,先上代码: 解法1: function add () { var args = Array.prototype.slice.call(arguments); var fn = fu ...
- windows下SVN使用 Add指令、Undo Add指令
前几天,使用SVN的Add指令添加了一个文件,后不使用直接删除了,每次提交都存在,解决后记录方法,希望帮到大家,此外如果大家有好的方法,希望可以回复. 问题:使用Add添加文件后直接删除了文件,每次提 ...
- git的常用指令（二） git add -A 、git add . 和 git add -u
git add . :他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文件内容修改(modified)以及新文件(new),但不包括被删除的文件. git add -u :他仅监控 ...
随机推荐
- 深度学习-深度强化学习(DRL)-Policy Gradient与PPO笔记
Policy Gradient 初始学习李宏毅讲的强化学习,听台湾的口音真是费了九牛二虎之力,后来看到有热心博客整理的很细致,于是转载来看,当作笔记留待复习用,原文链接在文末.看完笔记再去听一听李宏毅 ...
- Dubbo使用javassist生成动态类
在服务(本地和远程)暴露的时候会调用proxyFactory.getInvoker方法 具体位置: 本地暴露:ServiceConfig#exportLocal line:538 远程暴露: Serv ...
- 【Linux】Ubuntu替换阿里源
--------------------------------------------------------- 参考文章:https://www.jianshu.com/p/97c35d569aa ...
- ubuntu 安装harbor仓库
一.介绍 Harbor,是一个英文单词,意思是港湾,港湾是干什么的呢,就是停放货物的,而货物呢,是装在集装箱中的,说到集装箱,就不得不提到Docker容器,因为docker容器的技术正是借鉴了集装箱的 ...
- Zipkin存储Sleuth信息实现调用链追踪的几种方法
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/alva_xu/article/detail ...
- 全栈项目|小书架|微信小程序-点赞功能实现
微信小程序端的点赞功能其实没什么好介绍的,无非就是调用接口改变点赞状态和点赞数量.需要注意的是取消点赞时的处理,我这里为了减少服务器接口的调用,直接本地存一个变量,修改这里的变量值即可. 由于源码都相 ...
- vue报错[Vue warn]: Unknown custom element: <router-Link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
vue浏览器报错,如下 vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <router-Link> - di ...
- java之mybatis之helloworld
1. MyBatis 是一款一流的支持自定义SQL.存储过程和高级映射的持久化框架. MyBatis几乎消除了所有的 JDBC 代码,也基本不需要手工去设置参数和获取检索结果. MyBatis几乎能够 ...
- SQL Server 隔离级别（RC&RR）
- How to do SSH Tunneling (Port Forwarding)
How to do SSH Tunneling (Port Forwarding) In this post we will see how ssh works?, what is SSH tunne ...