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.

<!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的更多相关文章

  1. 在 VS 类库项目中 Add Service References 和 Add Web References 的区别

    原文:在 VS 类库项目中 Add Service References 和 Add Web References 的区别 出身问题: 1.在vs2005时代,Add Web Reference(添加 ...

  2. git add -A 和 git add . 的区别

    git add -A和 git add .   git add -u在功能上看似很相近,但还是存在一点差别 git add . :他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文 ...

  3. git add -A和git add . 的区别

    git add -A和 git add . git add -u在功能上看似很相近,但还是有所差别. git add . :他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文件内容 ...

  4. add jars、add external jars、add library、add class folder的区别

    add external jars = 增加工程外部的包add jars = 增加工程内包add library = 增加一个库add class folder = 增加一个类文件夹 add jar是 ...

  5. 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 ...

  6. 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 ...

  7. 函数柯里化常见应用---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 ...

  8. windows下SVN使用 Add指令、Undo Add指令

    前几天,使用SVN的Add指令添加了一个文件,后不使用直接删除了,每次提交都存在,解决后记录方法,希望帮到大家,此外如果大家有好的方法,希望可以回复. 问题:使用Add添加文件后直接删除了文件,每次提 ...

  9. git的常用指令（二） git add -A 、git add . 和 git add -u

    git add . :他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文件内容修改(modified)以及新文件(new),但不包括被删除的文件. git add -u :他仅监控 ...

随机推荐

  1. strlen（）与sizeof（）

    一.strlen() strlen()为计算字符串长度的函数,以‘\0’为字符串结束标志.注意:其传入参数必须是字符串指针(char*), 当传入的是数组名时,实际上数组退化成指针了. 二.sizeo ...

  2. C++ 工程师养成 每日一题4.5 （迭代器遍历）

    首先说明,当每日一题标号不是整数时代表此题是较为简单的,我在这里整理一遍主要是我做错了(没错是我太菜各位大佬无视就好) 题目: 读入一个字符串str,输出字符串str中的连续最长的数字串 此题思路清晰 ...

  3. 【实战经验】STM32烧录

    1.编译 2.配置烧录工具 2.配置烧录工具 3.配置烧录工具(一般街上Jlink就能检测到对应的STM32芯片) 5.选择FLASH 4.烧录 5.烧录完成

  4. git设置代理模式，仅为github设置代理

    设置代理: 全局代理 git config --global http.proxy 127.0.0.1:1087 局部代理,在github clone 仓库内执行 git config --local ...

  5. C# vb .net实现淡出效果特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的淡出效果特效呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...

  6. 换个语言学一下 Golang （6）——控制流程

    Go语言的控制结构关键字只有if..else if..else ,for 和 switch. 而且在Go中,为了避免格式化战争,对程序结构做了统一的强制的规定.看下下面的例子. 请比较一下A程序和B程 ...

  7. OO第三单元作业总结

    OO第三单元作业总结--JML 第三单元的主题是JML规格的学习,其中的三次作业也是围绕JML规格的实现所展开的(虽然感觉作业中最难的还是如何正确适用数据结构以及如何正确地对于时间复杂度进行优化). ...

  8. GitHub Java项目推荐｜功能丰富的 Java 工具包｜提高开发效率

    GitHub Java项目推荐|功能丰富的 Java 工具包|提高开发效率 功能丰富的 Java 工具包.它帮助我们实现了常用的工具方法,从而减少代码的体积,提高开发效率.该项目最初是作者工作项目中的 ...

  9. 动态渲染左侧菜单栏 ：menu tree 动态渲染

    其中后端代码不包含权限控制,同时支持二级(无子菜单) 和 三级菜单(无子菜单). 1.layui前端代码:(其他前端框架实现方法通用,不过需要修改js中append对应标签元素即可) <div ...

  10. Kali下的内网劫持（三）

    前面两种说的是在Kali下的ettercap工具通过配合driftnet和urlsnarf进行数据捕获,接下来我要说的是利用Kali下的另外一种抓包分析工具——wireshark来进行捕获数据: 首先 ...