[ARIA] Add aria-expanded to add semantic value and styling
to and value add Semantic ARIA
2023-09-14 08:59:14 时间
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.
- An Introduction to ARIA States
- w3c Using aria-expanded to indicate the state of a collapsible element
<!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>
相关文章
- Flink kafka sink to RDBS 测试Demo
- AAAI 2023 | 基于T5的两阶段的多任务Text-to-SQL预训练模型MIGA
- 【错误记录】安卓 RecyclerView 报错 ( only use immediately and call holder.getAdapterPosition() to look it up )
- ORA-01342: LogMiner can not resume session due to inability of staging checkpointed data ORACLE 报错 故障修复 远程处理
- ORA-22917: use VARRAY to define the storage clause for this column or attribute ORACLE 报错 故障修复 远程处理
- ORA-26826: string apply coordinator and apply slave are unable to communicate. ORACLE 报错 故障修复 远程处理
- ORA-26901: string propagation sender in the combined capture and apply mode is to be suspended while apply is disabled. ORACLE 报错 故障修复 远程处理
- ORA-38882: Cannot drop tablespace string on standby database due to guaranteed restore points. ORACLE 报错 故障修复 远程处理
- ORA-41251: Failed to restore session state from a file (error code number) ORACLE 报错 故障修复 远程处理
- ORA-00391: All threads must switch to new log format at the same time ORACLE 报错 故障修复 远程处理
- ORA-03245: Tablespace has to be dictionary managed, online and permanent to be able to migrate ORACLE 报错 故障修复 远程处理
- ORA-09243: smsget: error attaching to SGA ORACLE 报错 故障修复 远程处理
- ORA-16165: LGWR failed to hear from network server ORACLE 报错 故障修复 远程处理
- ORA-16755: failed to set initialization parameter ORACLE 报错 故障修复 远程处理
- ORA-16962: SQL statement attempted to begin an autonomous transaction ORACLE 报错 故障修复 远程处理
- MySQL Error number: MY-013188; Symbol: ER_FAILED_TO_INIT_SYS_VAR; SQLSTATE: HY000 报错 故障修复 远程处理
- Oracle 等待事件 SQL*Net message to dblink 官方解释,作用,如何使用及优化方法
- Linux系统的笔记本:A New Way to Enjoy Mobility(linux系统的笔记本电脑)
- Exploring the World with Linux Maps: Your Essential Guide to Navigating the Globe(linux下地图)
- StepbyStep Guide to Downloading Oracle: Get Your Database System Up and Running(oracle下载教程)
- Creating Your Own File System in Linux: A Guide to Writing and Designing(linux编写文件系统)
- How to Find the Maximum Value in a MySQL Table: Tips and Tricks(mysql表最大值)
- Ultimate Guide to Setting Up and Configuring Linux Named DNS Server!(linuxnamed)
- Mysql中强大的AND运算符的使用方法探究(mysql中and的使用)