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:

<!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的更多相关文章

  1. iOS programming Delegation and Text Input

    iOS programming Delegation and Text Input  1.1 Text Fields    CGRect textFieldRect = CGRectMake(40, ...

  2. Text input(文本输入框)

    Text input(文本输入框)是用来获得用户输入的绝佳方式. 你可以用如下方法创建: <input type="text"> 注意,input元素是自关闭的.

  3. 谈论multistage text input（中国输入法）下一个UITextView内容长度的限制

    我以前写<如何更好地限制UITextField输入长度>.接使用 UIKIT_EXTERN NSString *const UITextFieldTextDidChangeNotifica ...

  4. React Native & Android & Text Input

    React Native & Android & Text Input react native clear input value https://stackoverflow.com ...

  5. playwright-python 处理Text input、Checkboxs 和 radio buttons（三）

    Text input 输入框输入元素,直接用fill方法即可,支持 <input>,<textarea>, [contenteditable] 和<label>这些 ...

  6. [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 ...

  7. Failed to create a 'System.Type' from the text ' ' in wpf(无法从文本创建类型)

    问题描述:WPF is unable to create a type for data templateWPF使用mvvm模式无法加载DataTemplate模板定义的资源,提示无法从文本创建类型错 ...

  8. 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 ...

  9. 2.Text input and output

    文本的输入和输出 输出 要在屏幕上输出文本你需要这样一行代码: print("Hello World") 如果输出多行,要添加符号“\n”: print("Hello W ...

随机推荐

  1. C/C++ 每日一题

    超长正整数的相加,题目链接:https://www.nowcoder.com/practice/5821836e0ec140c1aa29510fd05f45fc?tpId #include<al ...

  2. c++11多线程记录6：条件变量（condition variables）

    https://www.youtube.com/watch?v=13dFggo4t_I视频地址 实例1 考虑这样一个场景:存在一个全局队列deque,线程A向deque中推入数据(写),线程B从deq ...

  3. Python之路【第十七篇】:Python并发编程|协程

    一.协程 协程,又叫微线程,纤程.英文名Coroutine.协程本质上就是一个线程 优点1:协程极高的执行效率.因为子程序切换不是线程切换,而是由程序自身控制,因此,没有线程切换的开销,和多线程比,线 ...

  4. epoll原理

    系统调用说明 epoll_create:在内核中创建epoll结构 epoll_ctl:add 1. 调用监听的文件的poll方法,设置callback 2. 设备就绪时唤醒等待队列上的进程,此时会调 ...

  5. Tr/ee AtCoder - 4433 (构造)

    大意: 给定长$n$的字符串$s$, 要求构造一棵树, 满足若第$i$个字符为$1$, 那么可以删一条边, 得到一个大小为$i$的连通块. 若为$0$则表示不存在一条边删去后得到大小为$i$的连通块. ...

  6. 一些spring boot的配置

    RabbitMQ与Redis队列对比 https://www.cnblogs.com/chinaboard/p/3819533.html Spring batch的学习 https://www.cnb ...

  7. Gradle 翻译 build dependencies 依赖 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  8. Linux生产环境上，最常用的一套“Sed“技巧

    sed命令应用广泛,使用简单,是快速文本处理的利器.它其实没多少技巧,背诵.使用是最合适的学习渠道,属于硬技能.但它又很复杂,因为高级功能太多.本篇不去关注sed的高级功能,仅对常用的一些操作,进行说 ...

  9. Linux基础-7.Linux网络基础设置

    装好Linux,Linux一般会默认使用NetworkManager来辅助管理网络配置.对于配置Linux服务器来说,我们不需要NetworkManager来配置网络,所以要关闭它,不然它会影响手动配 ...

  10. PcAnywhere用法

    安装软件 配置被控端 点击"主机",点击"添加" 可以使用"现有的Windows账户",也可以创建新的"用户名和密码" ...