[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 :他仅监控 ...
随机推荐
- [笔记] 命令行参数 int main(int argc,char *argv[])
int main(int argc,char *argv[]) // argument count 变量个数 argument values 变量值 C程序的main函数有两个形参* argc:整数, ...
- golang笔记之DOS篇
Dos的常用命令 dos的基本介绍 Dos: Disk Operating System 磁盘操作系统 ,简单说一下Windows下的目录 2. dos的基本操作原理 目录的操作: md ...
- （五）pdf的构成之文件体（catalog对象）
引自:https://blog.csdn.net/steve_cui/article/details/82735039 目录(catalog): 文档目录包含对定义文档内容的其他对象的引用.它还包含声 ...
- Equalizing Two Strings CodeForces - 1256F (思维)
大意: 给定两个串$s,t$, 每次操作任选长度$len$, 分别翻转$s,t$中一个长$len$的子串, 可以进行任意次操作, 求判断能否使$s$和$t$相同. 字符出现次数不一样显然无解, 否则若 ...
- 打印从1到n位数的最大值
题目: 输入数字n,按顺序打印从1到最大的n位十进制数,如输入3,则打印从1.2.3一直到最大的3位数999 参考大数运算的方法.考虑到位数会很大,所以采用字符串的形式解决.对输入的n,创建一个长度为 ...
- Outlook 邮件助手
Outlook 邮件助手 1 Overview 2 C# 编程 3 Outlook 设置 3.1 Outlook 2013 3.2 Outlook 2010 1 Overview 本章将示例如何开发一 ...
- postgreSQL 备份+还原多张表
-U表示用户 -h表示主机 -p表示端口号 -t表示表名 -f表示备份后的sql文件的名字 -d表示要恢复数据库名 一.打开cmd 进入postgresql安装路径下的bin文件夹,以我的为例: cd ...
- python-tyoira基本
目录 .Typora安装 我们在之前的时候记录笔记就是使用word和记事本,但是从今天开始我们要更换软件,记录笔记使用Typora软件,为什么要使用Typora的软件呢,是因为我们程序员不只是写代码这 ...
- 【转载】C#中List集合使用Clear方法清空集合
在C#中的List集合操作过程中,有时候需要清空List集合中的元素对象,将之重置为一个初始化的List集合对象,此时就可以使用到List集合的扩展方法Clear()方法,此方法将清空List集合中所 ...
- DoNetCore Web Api 采用Swagger进行接口文档管理
第一步:创建API项目 步骤这里不说明 第二步:就是Nuget 包, 两种方式:1.工具->Nuget管理->程序包管理控制台 Install-Package Swashbuckle.As ...