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的常见索引

    PRIMARY KEY(主键索引) ALTER TABLE table_name ADD PRIMARY KEY ( col ) 它是一种特殊的唯一索引,不允许有空值: UNIQUE(唯一索引) AL ...

  2. Map 集合按字母排序方法

    @Testpublic void testMapSort() { Map<String, String> map = new HashMap<>(); map.put(&quo ...

  3. .NET Core微服务学习-DotNetty

    DotNetty介绍: DotNetty是Azure团队仿照(几乎可以这么说)JAVA的Netty而出来的(目前已实现Netty的一部分),目前在Github上的Star有1.8K+, 地址:http ...

  4. java之mybatis之模糊查询

    1.在 mybatis 中,模糊查询可以有以下方式 (1).第一种,直接将封装好的条件传给 sql 语句 <select id="findByName" parameterT ...

  5. MVC视图中 TextBoxFor 数据格式化

    @Html.TextBoxFor(m => m.Birthday,"{0:yyyy-MM-dd}", new { @class = "m-wrap small&qu ...

  6. PHP基于TP5使用Websocket框架之GatewayWorker开发电商平台买家与卖家实时通讯

    前段时间公司提了一个新的需求,在商品的详情页要实现站内买家和商品卖家实时通讯的功能以方便沟通促成交易,要开发此功能当时首先考虑到的就是swoole和workerman了,从网上大概了解了一下关于这两款 ...

  7. 【转载】 C#中float、double以及decimal类型有何不同

    在C#语言中,float.double以及decimal类型都可以用来表示小数,但三者还是有一定的不同,有效数字为相比的话,decimal类型的有效数字最大,float类型最小.计算浮点类型的运算,如 ...

  8. VUE回顾基础3

    1.方法 在vue模板里函数被定义为方法来使用,将函数放在methods对象里,作为一个属性,就可以在模板里使用它 this:在方法中this指向该方法所属的组件,可以使用this方文档data对象的 ...

  9. 【索引】Oracle之不可见索引和虚拟索引的比对

    [索引]Oracle之不可见索引和虚拟索引的比对    Oracle之不可见索引 :http://blog.itpub.net/26736162/viewspace-2124044/ Oracle之虚 ...

  10. PB连接数据库

    SQLCA.DBMS = "ODBC" SQLCA..AutoCommit = False SQLCA.DBParm = "ConnectString='DSN=fire ...