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. 2019 C语言测试

    求一元二次方程ax² + bx + c = 0的解  a,b,c为任意整数.(10分) 编写一个口令输入程序,让用户不停输入口令,直到输对为止,假设口令为456.(8分) 输出1000-9999之间能 ...

  2. Scala 安装 Scala for Eclipse安装及运行hello word

    Scala下载安装地址:https://www.scala-lang.org/download/ .windows版本的安装包是scala-2.12.8.msi.直接滑动到网页最下面,下载对应的系统的 ...

  3. 【LEETCODE】67、分治递归，medium&hard级别，题目：215、312

    我被这些题整哭了,你呢??? 日了狗啊...... 好难啊.... 按照这个样子搞,不用找工作了,回家放牛去....... package y2019.Algorithm.divideandconqu ...

  4. Service must be explitict android 5.0问题

    如果target到API 21,有一些注意的事项,以下是目前我发现的两个问题1. Service must be explitict,从Lollipop开始,service必须显性声明,解决方案:ht ...

  5. c# 结构体实现数据新增(数据字段较多的情况使用) 一

    点击新增按钮 { ChkFormIDBox.Text = Coeno.DevChk.DevChk.CleanUpInput(ChkFormIDBox.Text);  --清除表单文本框数据输入 if ...

  6. IE浏览器 location.href 不跳转

    var url = "https://www.cnblogs.com/zing"; location.href = url; window.event.returnValue = ...

  7. Java自学-数组 排序

    Java 数组选择法,冒泡法排序 步骤 1 : 选择法排序 选择法排序的思路: 把第一位和其他所有的进行比较,只要比第一位小的,就换到第一个位置来 比较完后,第一位就是最小的 然后再从第二位和剩余的其 ...

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

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

  9. springCloud学习笔记2(服务发现)

    本篇代码存放于:https://github.com/FleyX/demo-project/tree/master/springcloud/spring-cloud%E6%9C%8D%E5%8A%A1 ...

  10. Js 打印 div

    var wind = window.open("", 'newwindow', 'height=700, width=1000, top=100, left=100, toolba ...