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. PHP 去一定范围随机小数 随机浮点数

    例如取2到3中的 随机小数(一位)或整数 mt_rand(20,30)/10 mt_rand()是随机取整函数 先扩大一定倍数,再缩小相应倍数,倍数代表精确到哪一位

  2. Django-08-admin

    1. 介绍 admin是django强大功能之一,它能共从数据库中读取数据,呈现在页面中,进行管理.默认情况下,它的功能已经非常强大,如果你不需要复杂的功能,它已经够用,但是有时候,一些特殊的功能还需 ...

  3. DRF框架（九）——drf偏移分页组件、drf游标分页组件(了解)、自定义过滤器、过滤器插件django-filter

    drf偏移分页组件 paginations.py from rest_framework.pagination import LimitOffsetPagination class MyLimitOf ...

  4. linux 释放系统内存命令

    1.sync 因为系统在操作的过程当中,会把你的操作到的文件资料先保存到buffer中去,因为怕你在操作的过程中因为断电等原因遗失数据,所以在你操作过程中会把文件资料先缓存.所以我们执行sync命令, ...

  5. 论DOM中文档和元素的位置大小属性及其区别

    element.offsetLeft/Top  获取元素相对于最近的有定位的父元素的坐标,如果没有有定位的父元素,则是文档坐标 element.scrollTop/Left 获取元素滚动卷去的距离 e ...

  6. Unity - LayerMask简析

    本文简述了LayerMask的定义,后通过项目实战充分解析 LayerMask中的GetMask.LayerToName.NameToLayer 等函数的使用方法及其注意事项. 项目地址:3D坦克大战 ...

  7. 过滤器 & 监听器 & 拦截器

    过滤器: https://blog.csdn.net/MissEel/article/details/79351231 https://blog.csdn.net/qq_32363305/articl ...

  8. Linux 6 修改ssh默认远程端口号

    linux 默认的ssh远程端口是22,有时默认端口会遭到别有用心的人们扫描或攻击,为了时我们的系统更加安全那就需要修改远程端口号 操作步骤:1.修改ssh_config配置文件 vim /etc/s ...

  9. selenium中的元素操作之下拉列表操作（四）

    下拉列表操作中分为两种:select.非select 1.非select的下拉框操作 非select下拉列表操作与网页元素操作一致,找到元素,定位元素,设置等待,点击元素等等 接下来操作百度的设置按钮 ...

  10. 【夯实基础】- https和http的主要区别

    HTTPS和HTTP的区别主要如下: 1.https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用. 2.http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输 ...