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. MySQL高级 之 order by、group by 优化

    参考:  https://blog.csdn.net/wuseyukui/article/details/72627667 order by示例 示例数据: Case 1 Case 2 Case 3 ...

  2. windows和linux环境下java调用C++代码-JNI技术

    最近部门做安卓移动开发的需要调C++的代码,困难重重,最后任务交给了我,查找相关资料,没有一个教程能把不同环境(windows,linux)下怎么调用说明白的,自己在实现的过程中踩了几个坑,在这里总结 ...

  3. Ubuntu 编译安装 nginx

    有关博客: <Windows 编译安装 nginx 服务器 + rtmp 模块>.<Ubuntu 编译安装 nginx>.<Arm-Linux 移植 Nginx> ...

  4. 守护线程在logback中的使用 - 论基础知识的重要性

    守护线程在logback中的使用 先说问题,在java应用中,logback的异步Appender是怎么在主线程结束后,停下来的? 复盘 我在一个logback的测试用例中,写了这样的代码和logba ...

  5. java之hiberante之集合映射之list映射

    这篇讲解 集合映射之List映射 1.通常对于集合,在hibernate中的处理都是使用set来完成.但是hibernate也提供了对于其他几种集合的映射. 在这里实现List的映射,List是有序的 ...

  6. 中控考勤机使用 zkemkeeper SDK订阅考勤数据事件失效解决方式

    问题 前同事编写的对中控考勤机数据集成项目当中,打卡数据不能实时进行上传到平台当中,一直靠定时全量上传来同步数据. 阅读代码后,发现代码中有实时上传数据的逻辑,但是运行一段时间后,中控zkemkeep ...

  7. C# vb .net实现锐化效果滤镜

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

  8. C# vb .net实现透视图效果滤镜

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

  9. KindEditor 简单使用笔记

    1.在官网下载最新版本  http://kindeditor.net/demo.php 2.在页面中加上如下代码 <textarea id="editor_id" name= ...

  10. Spring通过注解@Autowired/@Resource获取bean实例时为什么可以直接获取接口而不是注入的类

    问: 这个问题困扰了我好久,一直疑问这个接口的bean是怎么注入进去的?因为只看到使用@Service注入了实现类serviceImpl,使用时怎么却获取的接口,而且还能调用到实现类的方法,难道这个接 ...