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. 唯一ID生成器--雪花算法

    在微服务架构,分布式系统中的操作会有一些全局性ID的需求,所以我们不能用数据库本身的自增功能来产生主键值,只能由程序来生成唯一的主键值.我们采用的是twitter的snokeflake(雪花)算法. ...

  2. 打印从1到n位数的最大值

    题目: 输入数字n,按顺序打印从1到最大的n位十进制数,如输入3,则打印从1.2.3一直到最大的3位数999 参考大数运算的方法.考虑到位数会很大,所以采用字符串的形式解决.对输入的n,创建一个长度为 ...

  3. installer

    if (args.Length == 0) { ServiceBase[] ServicesToRun; ServicesToRun = new ServiceBase[] { new MyServi ...

  4. Vert.x 异步访问数据库 MySQL

    Vert.x提供异步访问数据库的API,数据库操作是一个耗时操作,使用传统的同步模型,容易阻塞线程,导致整体性能下降,因此我们对于数据库操作,需要使用Vert.x提供的异步API. Vert.x提供的 ...

  5. JavaScript字符串转数值

    JavaScript字符串转数值:方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数 js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成 ...

  6. MySQL-By孙胜利-sifangku.com

    一.数据库基本概念 数据库:信息存储的仓库,包括一系列的关系措施! 表:一个数据库中可以有若干张表(形式上你可以看出我们日常生活中建立的表) 字段:表里面的信息会分若干个栏目来存,这些栏目呢,我们在数 ...

  7. weblogic unable to get file lock问题

    非正常结束weblogic进程导致weblogic无法启动 由于先前服务器直接down掉了,所有进程都非正常的进行关闭了,也就导致了下次启动weblogic的时候报了以下错误: <2012-3- ...

  8. tcp校验和

    伪首部(pseudo header),通常指TCP伪首部和UDP伪首部 TCP的校验和是必需的,而UDP的校验和是可选的 TCP校验是需要校验包头和数据的 //共12字节 typedef struct ...

  9. Audio Queue Services Programming Guide（音频队列服务编程指南）

    Audio Queue Services 的苹果官方文档: https://developer.apple.com/library/ios/documentation/MusicAudio/Conce ...

  10. php文字转语音

    使用百度接口 https://ai.baidu.com/docs#/TTS-Online-PHP-SDK/top 使用PHP SDK开发骤如下: 1.在官方网站下载php SDK压缩包. 2.将下载的 ...