[ARIA] Create an Accessible Tooltip on a Text Input
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>
[ARIA] Create an Accessible Tooltip on a Text Input的更多相关文章
- iOS programming Delegation and Text Input
iOS programming Delegation and Text Input 1.1 Text Fields CGRect textFieldRect = CGRectMake(40, ...
- Text input(文本输入框)
Text input(文本输入框)是用来获得用户输入的绝佳方式. 你可以用如下方法创建: <input type="text"> 注意,input元素是自关闭的.
- 谈论multistage text input（中国输入法）下一个UITextView内容长度的限制
我以前写<如何更好地限制UITextField输入长度>.接使用 UIKIT_EXTERN NSString *const UITextFieldTextDidChangeNotifica ...
- React Native & Android & Text Input
React Native & Android & Text Input react native clear input value https://stackoverflow.com ...
- playwright-python 处理Text input、Checkboxs 和 radio buttons（三）
Text input 输入框输入元素,直接用fill方法即可,支持 <input>,<textarea>, [contenteditable] 和<label>这些 ...
- [ARIA] What is Accessible Name Calculation?
What's in a name? In this lesson, I'll explain the concept of naming interactive elements for screen ...
- Failed to create a 'System.Type' from the text ' ' in wpf(无法从文本创建类型)
问题描述:WPF is unable to create a type for data templateWPF使用mvvm模式无法加载DataTemplate模板定义的资源,提示无法从文本创建类型错 ...
- Create Custom Modal Dialog Windows For User Input In Oracle Forms
An example is given below to how to create a modal dialog window in Oracle Forms for asking user inp ...
- 2.Text input and output
文本的输入和输出 输出 要在屏幕上输出文本你需要这样一行代码: print("Hello World") 如果输出多行,要添加符号“\n”: print("Hello W ...
随机推荐
- kafka-manager 创建 topic【转】
1,add cluster 添加cluster 添加cluster 选择一下kafka的版本 2,创建topic 添加topic 3,查看topic 查看topic
- DELPHI6中DSGNINTF.DCU找不到时的解决方法
https://www.cnblogs.com/gaodu2003/archive/2009/06/04/1495789.html 1.添加 lib\designide.dcp到控件的dpk文件的re ...
- Python爬虫：现学现用xpath爬取豆瓣音乐
爬虫的抓取方式有好几种,正则表达式,Lxml(xpath)与BeautifulSoup,我在网上查了一下资料,了解到三者之间的使用难度与性能 三种爬虫方式的对比. 这样一比较我我选择了Lxml(xpa ...
- 有些CCS工程中为什么会有两个CMD文件？
这里的CCS就是TI公司的Code Composer Studio 集成开发环境,所以这篇随笔也就是关于TI公司DSP开发过程中对于刚入门同学的一个常见问题了. 那作为一个初学者,对于CCS工程中的c ...
- Spring Boot Web 自定义返回值（通用）
在项目下新建common.entity包,包中包含两个文件Result数据类,ResultCode接口文件 Result.class @Data @NoArgsConstructor public c ...
- Scala 系列（四）—— 数组 Array
一.定长数组 在 Scala 中,如果你需要一个长度不变的数组,可以使用 Array.但需要注意以下两点: 在 Scala 中使用 (index) 而不是 [index] 来访问数组中的元素,因为访问 ...
- .NET 使用 ILRepack 合并多个程序集（替代 ILMerge），避免引入额外的依赖
原文:.NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖 我们有多种工具可以将程序集合并成为一个.比如 ILMerge.Mono.Merge.前者不可定制.运 ...
- java之mybatis之缓存
1.mybatis自带缓存功能.分为一级缓存,二级缓存. 2.一级缓存为 session 缓存,在一个 session中 ,一个查询的 select 语句只会执行一次,根据 <select&g ...
- EditPlus中文版 安装教程
EditPlus中文版安装教程 1.下载软件压缩包,解压即可.不需要安装,解压后打开“EditPlus中文版”文件夹(软件我会打包好,在文中的最低端找到即可下载:若链接失效了,请告知我一声,我会重新更 ...
- vue+element 按钮来回切换
需求很简单,实现很容易,日常记录一下 templace代码: data数据声明: me'thods方法: