[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 :他仅监控 ...
随机推荐
- Django-08-admin
1. 介绍 admin是django强大功能之一,它能共从数据库中读取数据,呈现在页面中,进行管理.默认情况下,它的功能已经非常强大,如果你不需要复杂的功能,它已经够用,但是有时候,一些特殊的功能还需 ...
- STM32 系统滴答计时器
;//us与系统滴答的被乘数 ;//ms与系统滴答的被乘数 ;//系统运行秒数 /** * @description:系统滴答计时系统初始化 * @param 无 * @retval 无 */ voi ...
- LOJ2461 完美的队列 分块
传送门 如果对于每一个操作\(i\)找到这个操作中所有的数都被pop掉的时间\(ed_i\),那么剩下就直接差分覆盖一下就可以了. 那么考虑如何求出\(ed_i\).发现似乎并没有什么数据结构能够维护 ...
- java之spring之scope和autowiring
目录结构如下: UserDao.java package cn.sxt.dao; public interface UserDao { public void add(); } UserDaoImpl ...
- .net Aop 实现原理
本文实现所有继承BaseModel的类都通过代理拦截 using System; using System.Reflection; using System.Collections.Generic; ...
- TCP三次握手四次挥手介绍
学过计算机网络的同学都知道TCP协议是计算机网络课程里面最复杂的协议之一,还没有通信就要搞个什么三次握手,断开还要什么四次分手,中间还要什么流量控制啦,拥塞控制,滑动窗口什么的,初学者看了就会头晕. ...
- MySQL中的JSON类型
前言(废话) 昨天抽了点时间在网上搜列了一个开源项目,项目挺完整的,前后台分离还带有微信小程序,我Clone下代码,经过一番倒腾,嘿~还真就跑起来了.在这个过程中,体验了一把VUE项目工程细节,因为之 ...
- 【转载】C#中List集合中Last和LastOrDefault方法的差别
在C#的List集合操作中,Last方法和LastOrDefault方法都会用来查找集合中最后一个符合条件的元素对象,但Last和LastOrDefault方法还是有差别的,建议使用LastOrDef ...
- 《区块链DAPP开发入门、代码实现、场景应用》笔记4——Ethereum Wallet中部署合约
账号创建完成之后,账号余额是0,但是部署合约是需要消耗GAS的,因此需要获取一定的以太币才能够继续本次实现.在测试网中获取以太币可以通过挖矿的方式,在开发菜单中可以选择打开挖矿模式,但是这需要将Syn ...
- 关于服务器程序运行中收到SIGPIPE（转）
(此文为原文删减版,原文地址:http://blog.sina.com.cn/s/blog_502d765f0100kopn.html) 我写了一个服务器程序,在Linux下测试,然后用C++写了客户 ...