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. JFR 使用记录

    进程的内存信息,可以使用jmap 和 jstack 等dump出文件,使用jhat 分析 dump 文件.不过比较简陋. 可以不停进程的方式有 JFR 或者taobao 开源组件. 本篇只记录JFR相 ...

  2. 手写MVC框架（一）-再出发

    背景 前段时间把之前写的DAO框架(手写DAO框架(一)-从“1”开始)整理了一下,重构了一版.整理过程中看以前写的代码,只是为了了解实现,只是为了实现,代码写的有点粗糙.既然已经整理了DAO框架,索 ...

  3. Listener学习

    监听器Listener用于监听web应用中某些对象.信息的创建.销毁.增加,修改,删除等动作的发生,然后作出相应的响应处理.当范围对象的状态发生变化的时候,服务器自动调用监听器对象中的方法.常用于统计 ...

  4. linux 挂载新的硬盘

    linux 挂载新的硬盘 1.查看硬盘情况,物理盘和分区 fdisk -l 2.分区一个盘,sdb是个还没有分区的硬盘 fdisk /dev/sdb 输入 n p 1 w n 表示新建分区 p 表示分 ...

  5. Oracle打印输出在控制台

    SET SERVEROUTPUT ON  --必须有,不然显示不出declare LN_C number(10,0):=0;begin DECLARE LS_STR1 VARCHAR2(200); - ...

  6. 前端调试代码 chrom 和 火狐禁用缓存 Disabled cache

    前端调试的时候经常遇到缓存问题, chrome : f12  ---> 找到 Disabled caceh 勾上 火狐: f12 找到 禁用缓存

  7. VC++如何利用Matlab2014b的图形引擎进行绘图

    VC++如何利用Matlab的图形引擎 在Visual C++ 2015 工程中使用 Matlab2014b 提供的图形引擎进行绘图的详细过程. 问题来源: 有时候用C++写一些演示程序,有数据可视化 ...

  8. 面试官再问Redis分布式锁如何续期？这篇文章甩 他一脸

    一.真实案例 二.Redis分布式锁的正确姿势 据肥朝了解,很多同学在用分布式锁时,都是直接百度搜索找一个Redis分布式锁工具类就直接用了.关键是该工具类中还充斥着很多System.out.prin ...

  9. 【转载】C#中List集合中Last和LastOrDefault方法的差别

    在C#的List集合操作中,Last方法和LastOrDefault方法都会用来查找集合中最后一个符合条件的元素对象,但Last和LastOrDefault方法还是有差别的,建议使用LastOrDef ...

  10. Leetcode刷题python

    Two Sum 两数==target 方法二更好 题1,对时间复杂度有要求O(n),所以维护一个字典,遍历过的数值放在字典中,直接遍历时候查找字典中有没有出现差,查找字典时间复杂度是O(1),所以O( ...