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. Git GUI,Git Bash,Git CMD之间的区别

    Git GUI,Git Bash,Git CMD之间的区别 Git Bash: Bash,Unix shell的一种,Linux与Mac OS X v10.4都将它作为默认shell.Git Bash ...

  2. 在Vcl和FireMonkey应用程序中启用TXMLDocument 的XPath（selectNode，selectNodes）方法

    该TXMLDocument的类让你来操作VCL和FireMonkey应用程序的XML文件,但这个类没有实现直接的方式来调用XPath的相关方法(selectNode,的selectNodes),所以你 ...

  3. Java-手动搭建SSH（maven版）

    创建maven项目 把maven项目变为动态网站,步骤如下: 项目结构图如下: 开始搭建spring+springmvc+Hibernate项目 环境版本就不多说了,直接贴出pom.xml文件 < ...

  4. mysql远程连接速度很慢

    远程服务器的mysql数据库在服务器上自己连接速度很快,但是在我本地连接确实出奇的慢,进入数据库慢,打开数据表慢,什么都慢.想到之前有看到过应该是远程链接解析的问题,在查询MySQL相关文档和网络搜索 ...

  5. Java 的 WebSocket

    1. WebSocket 是什么 一言以蔽之,WebSocket允许服务器「主动」给浏览器发消息,如教程演示截图,服务器会主动推送比特币价格给浏览器. 2. 为什么要用 WebSocket 实时获取服 ...

  6. C# IEnumerable接口

    问: 集合很好用,而且非常简单,但是我不明白 为什么数组.ArrayList 和 Hasttable 这些集合都能用foreach直接遍历呢?我想自己定义一个集合类,应该怎么做呢? 回答:这个问题问的 ...

  7. Java程序员必了解的JVM原理以及虚拟机的运行过程

    JVM概念 虚拟机:指以软件的方式模拟具有完整硬件,VM概念 虚拟机:指以软件的方式模拟具有完整硬件系统功能.运行在一个完全隔离环境中的完整计算机系统 ,是物理机的软件实现.常用的虚拟机有VMWare ...

  8. 使用poi统计工作职责

    1 创建一个新的sheet工作页 Sheet job = workbook.createSheet("工作职责统计"); 2 查询工作职责问题选项列表,并设置第一行倒出时间 Lis ...

  9. MVC中Model BLL层Model模型互转

    MVC中Model BLL层Model模型互转 一. 模型通常可以做2种:充血模型和失血模型,一般做法是模型就是模型,不具备方法来操作,只具有属性,这种叫做失血模型(可能不准确):具备对模型一定的简单 ...

  10. 基于SVM的道路简单分割

    折腾了几天了,这个看似简单的东西,怎么做起来那么费劲啊? 任重而道远,光玩,光去幻想,是什么也做不出来的,要一点一点儿大量时间与精力的投入,才能出结果的. (点击下图,可选择原图观看,清晰的效果) 2 ...