[ARIA] Create an Accessible Tooltip on a Text Input
On an create Text input tooltip ARIA accessible
2023-09-14 08:59:14 时间
Here we use HTML and CSS to create a stylish yet semantic tooltip on a form input. I am using aria-describedby
to create a relationship with the input and the tooltip. Then I use CSS to style the tooltip and control when it appears or disappears both on hover and focus.
We use VoiceOver. To test that on a MacOS, use CMD + F5.
A few resources:
- CSS Triangle
- a11y Style Guide - Tooltips - I used this to gut check and with some help with those transitions.
- Using VoiceOver to Evaluate Web Accessibility
<!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" /> <title>Egghead A11y Tooltips</title> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" /> <style> body { font-family: "Montserrat", sans-serif; background: #eedbff; color: #6505cc; } form { max-width: 40em; margin: 1rem; } .a11y-input-tooltip { position: relative; } input[type="text"] { width: 100%; max-width: 100%; padding: 0.75rem; margin: 8px -2px 20px; box-sizing: border-box; border-radius: 4px; border: 2px solid rgba(101, 5, 204, 0.7); font-size: 1rem; min-height: 49px; } input[type="text"]:focus, input[type="text"]:hover { outline: none; box-shadow: 2px 2px 10px rgba(60, 0, 130, 0.5); } input[type="text"]:hover + [role="tooltip"] { visibility: visible; opacity: 1; } [role="tooltip"] { transition: opacity 0.2s 0.5s ease-in-out; visibility: hidden; opacity: 0; position: relative; background: #6505cc; color: #eedbff; padding: 0.5rem 0.75rem; border-radius: 5px; } [role="tooltip"]::after { content: ""; position: absolute; left: 20px; top: -5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #6505cc; } </style> </head> <body> <form> <label for="name">Name:</label> <span class="a11y-input-tooltip"> <input type="text" id="name" aria-describedby="a11y-tooltip" /> <span role="tooltip" id="a11y-tooltip" >Please write your first and last name.</span > </span> </form> </body> </html>
相关文章
- windows,远程开机,远程唤醒(WOL,Wake-on-LAN)
- Voice Assistants…What’s Going On
- an软件怎么下载到电脑上,Adobe Animate(An)2023软件安装包下载及安装教程
- ORA-23629: string.string is not an eligible index on table string.string for comparison ORACLE 报错 故障修复 远程处理
- ORA-24017: cannot enable enqueue on QUEUE, string is an exception queue ORACLE 报错 故障修复 远程处理
- ORA-25966: join index cannot be based on an index organized table ORACLE 报错 故障修复 远程处理
- ORA-27613: Smart I/O failed due to an I/O error on the cell “string”. disk: “string”, block: “string”, disk offset: “string” I/O size: “string” ORACLE 报错 故障修复 远程处理
- ORA-28337: the specified index may not be defined on an encrypted column ORACLE 报错 故障修复 远程处理
- ORA-27003: cannot open file on device allocated with NOIO option ORACLE 报错 故障修复 远程处理
- ORA-29869: cannot issue ALTER without REBUILD on a domain index marked FAILED ORACLE 报错 故障修复 远程处理
- MySQL Error number: 3103; Symbol: ER_UNSUPPORTED_ALTER_INPLACE_ON_VIRTUAL_COLUMN; SQLSTATE: HY000 报错 故障修复 远程处理
- ORA-48191: user missing read or write permission on specified file ORACLE 报错 故障修复 远程处理
- ORA-54036: cannot define referential constraint with ON DELETE SET NULL clause on virtual column ORACLE 报错 故障修复 远程处理
- ORA-02021: DDL operations are not allowed on a remote database ORACLE 报错 故障修复 远程处理
- ORA-03176: string only works on an open physical standby database ORACLE 报错 故障修复 远程处理
- ORA-16407: An archive log from an earlier redo branch has been rejected ORACLE 报错 故障修复 远程处理
- mysql中两张表使用left join on 求差集详解数据库
- How to Install JAR on Linux Systems(jarlinux安装)
- Improve Performance on Linux with nvprof(nvproflinux)
- Exploring the Benefits and Compatibility of JDK1.6 on Linux OS(jdk1.6linux)
- Exploring the Stack: An Introduction to Viewing Stacks on Linux(linux查看栈)
- Exploring the Enigmatic World of Ghosts on Linux: An Adventure on the Cutting Edge(ghostlinux)
- 深入MySQL解密On语句的使用方法(mysql中on使用方法)
- MySQL中的ON子句有什么作用(mysql中on代表什么)