[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 ...
随机推荐
- Spring学习指南-第二章-Spring框架基础(完)
第二章 Spring框架基础 面向接口编程的设计方法 在上一章中,我们看到了一个依赖于其他类的POJO类包含了对其依赖项的具体类的引用.例如,FixedDepositController 类包含 ...
- Django-08-admin
1. 介绍 admin是django强大功能之一,它能共从数据库中读取数据,呈现在页面中,进行管理.默认情况下,它的功能已经非常强大,如果你不需要复杂的功能,它已经够用,但是有时候,一些特殊的功能还需 ...
- setdefault函数的用法及理解
setdefault函数的用法及理解 dict.setdefault(key, default=None) 功能:如果键不存在于字典中,将会添加该键并将default的值设为该键的默认值,如果键存在于 ...
- day18——re正则表达式
day18 re模块--正则表达式 匹配方法 findall():从字符串中全部查找内容,返回一个列表 s = "meet_宝元_meet" print(re.findall(&q ...
- HTML5+规范：nativeUI(管理系统原生界面)
nativeUI管理系统原生界面,可用于弹出系统原生提示对话框窗口.时间日期选择对话框.等待对话框等. 1.方法 1.1.actionSheet: 弹出系统选择按钮框 void plus.native ...
- 阿里巴巴 Java 开发手册 (八) 注释规约
1. [强制]类.类属性.类方法的注释必须使用 Javadoc 规范,使用/**内容*/格式,不得使用 //xxx 方式. 说明:在 IDE 编辑窗口中,Javadoc 方式会提示相关注释,生成 Ja ...
- 变量.argsort()的用法
a=[1,2,5,9,7,3]a=np.array(a)order = a.argsort() # 从小到大排序,并返回索引值print('order=',order)order1= a.argsor ...
- selenium自学笔记---下拉框定位元素select
下拉框1.先定位select 然后在定位option city = driver.find_element_by_id("selCities_0") city.find_eleme ...
- Java之路---Day05
2019-10-19-21:09:31 面向对象的封装性 封装性 概念:封装就是将一些细节信息隐藏起来,对于外界不可见 面向对象封装性在Java中的体现 1.方法就是一种封装 public class ...
- Spring对于事务的控制@Transactional注解详解
引用自:https://blog.csdn.net/fanxb92/article/details/81296005 先简单介绍一下Spring事务的传播行为: 所谓事务的传播行为是指,如果在开始当前 ...