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. springboot异步线程

    前言 最近项目中出现了一个问题,发现自己的定时器任务在线上没有执行,但是在线下测试时却能执行,最后谷歌到了这篇文章SpringBoot踩坑日记-定时任务不定时了?; 本篇文章主要以自己在项目中遇到的问 ...

  2. python 2种创建多线程的方法

    多个线程是可以操作同一个全局变量的,因此,可以通过这种方式来判断所有线程的执行进度 # 第一种方法:将要执行的方法作为参数传给Thread的构造方法 import threading import t ...

  3. CF704D Captain America 上下界网络流

    传送门 现在相当于说每一个条件都有一个染成红色的盾牌的数量限制\([l,r]\),需要满足所有限制且染成红色的盾牌数量最小/最大. 注意到一个盾牌染成红色对于一行和一列都会产生影响.如果选中一个物品对 ...

  4. 2019-07-22 phpStudy配置虚拟主机

    1.右击 phpStudy ->[打开配置文件]->[vhosts-conf]: 2.在里面加入如下代码,并保存: NameVirtualHost *:80 <VirtualHost ...

  5. 米尔电子i.MX8开发板评测

    基于 NXP 公司的i.MX8M 系列芯片的高性能开发平台 MYD-JX8MX开发板.是采用核心板(MYC-JX8MX)加底板(MYB-JX8MX)的形式,提供了 HDMI,LVDS(或 MIPI), ...

  6. AngularJS $http用法总结

    最近由于项目需要,在研究AngularJS $http的用法,查了很多资料,发现貌似没有一篇内容可以完整的满足我对$http的基本了解,为了下次方便自己查找,所以特意把最近查到的一些资料和自己的理解记 ...

  7. hexo更改主题

    github+hexo搭建好个人博客之后,一般都挑选自己喜欢的主题.在这里为大家介绍一下比如何挑选主题以及如何修改主题. 主题选择: 1:知乎推荐 2:hexo官方 本地目录中打开git bash: ...

  8. JAVA基础之设置随机成语验证码

    package com.oracle; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import ja ...

  9. jquery实现弹出层完美居中效果

    代码如下: showDiv($("#pop"));function showDiv(obj){ $(obj).show(); center(obj); $(window).scro ...

  10. 京信通信成功打造自动化工厂（MES应用案例）

    企业介绍: 京信通信成立于1997年,是一家集研发.生产.销售及服务于一体的移动通信外围设备专业厂商,致力于为客户提供无线覆盖和传输的整体解决方案,于2003年在香港联交所主板上市(2342.HK), ...