【英/中,前端】Form <input> elements must have labels每一个元素应当都有一个标签

2023-12-17

原文如下:
Form elements must have labels | Axe Rules | Deque University | Deque Systems

编程式的关联标签和窗体控件。
下面以推荐程度从高到低依次排列,使用label元素->使用for和id属性显示关联,就这样。
label标签的包裹 or 不包裹

<label for="firstname">First name:</label> <input type="text" id="firstname">
<label>First name: <input type="text"></label>

(这个不是很懂)

If the input is already labeled visually some other way, such as through a magnifying glass icon on a search submit button, it may be acceptable to use aria-label to create an invisible text label for screen readers to read.

好像是如果标签已经定义过,就采用这个属性隐式的表示。

<input type="text" aria-label="Search">

另一种方法(有时在添加 < label > 标签会破坏功能或样式,或者当多个标签应用于同一输入时使用)是使用 aria-labelledby 代替:

<div id="firstname">First name:</div> <input type="text" aria-labelledby="firstname">
<!--visual labels may be elsewhere in the content, such as in table headers-->  
<div id="temperature">Temperature:</div>  
<div id="high">High:</div>  
<div id="low">Low:</div>  
<!-- the inputs -->  
<input type="text" aria-labelledby="temperature low">  
<input type="text" aria-labelledby="temperature high">

最后可以使用placeholder属性提供可访问名称。

<input type="text" placeholder="Search">

看明白了,是为了让用户能更好的理解按钮、输入等的功能,而且也是为了残障人士的使用体验。

例外:按钮和隐藏输入是特殊的存在,没有必须标签的要求

感动

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【英/中,前端】Form <input> elements must have labels每一个元素应当都有一个标签 的相关文章

  • 【计算机毕设文章】微信阅读小程序的设计与实现

    毕 业 设 计 论 文 题目 微信阅读小程序的设计与实现 摘 要 由于APP软件在开发以及运营上面所需成本较高 而用户手机需要安装各种APP软件 因此占用用户过多的手机存储空间 导致用户手机运行缓慢 体验度比较差 进而导致用户会卸载非必要的

随机推荐

  • 双非本科进不了大厂?阿里技术四面+交叉面+HR面,成功拿到offer

    前言 前两天 我收到了阿里巴巴的实习offer 从学长内推开始面试到拿到最后offer经历了4面技术 一面交叉面和一面HR面 经过了漫长的等待和几次几乎折磨的面试之后 终于拿到了实习offer 自我介绍 本人来自西南某双非本科学校 该校学的
  • 这应该是最全的大模型训练与微调关键技术梳理

    作为算法工程师的你是否对如何应用大型语言模型构建医学问答系统充满好奇 是否希望深入探索LLaMA ChatGLM等模型的微调技术 进一步优化参数和使用不同微调方式 现在我带大家领略大模型训练与微调进阶之路 拓展您的技术边界 通过阅读文章 你
  • 【计算机毕设文章】微信点餐小程序

    微信点餐小程序 摘 要 随着社会的发展 社会的方方面面都在利用信息化时代的优势 互联网的优势和普及使得各种系统的开发成为必需 本文以实际运用为开发背景 运用软件工程原理和开发方法 它主要是采用java语言技术和mysql数据库来完成对系统的
  • 第三章 Linux的目录结构

    第三章 Linux的目录结构 学习目标 1 熟悉Linux目录的组织习惯 2 熟悉一些Linux的常见目录及作用 第一节 Linux中的常见目录 Linux常见的目录结构 不同版本的Linux目录结构可能略有不同 Centos7的文件目录结
  • 毕业设计 江科大STM32的智能温室控制蓝牙声光报警APP系统设计

    基于STM32的智能温室控制蓝牙声光报警APP系统设计 1 项目简介 1 1 系统构成 1 2 系统功能 2 部分电路设计 2 1 stm32f103c8t6单片机最小系统电路设计 2 2 LCD1602液晶显示电路设计 2 2 风
  • Tor网络原理详解

    引入 匿名通信是一种通过采用数据转发 内容加密 流量混淆等措施来隐藏通信内容及关系的隐私保护技术 为了提高通信的匿名性 这些数据转发链路通常由多跳加密代理服务节点构成 而所有这些节点即构成了匿名通信系统 或称匿名通信网络 匿名通信系统本质上
  • 数据恢复及U盘、硬盘的性能检测

    前言 本文论述了如何查看磁盘是否为扩容盘 问题盘 坏盘 以及如何恢复磁盘删除的数据 如何避免黑客恢复数据 原文 原创作者 冷墨寒 博客 网安冷墨寒 定期分享网安技术教程以及网络资源 https www ink0 cn 因为最近需要买个移动机
  • 基于鲸鱼算法优化长短期记忆神经网络WOA-LSTM的故障诊断附matlab代码

    作者简介 热爱科研的Matlab仿真开发者 修心和技术同步精进 代码获取 论文复现及科研仿真合作可私信 个人主页 Matlab科研工作室 个人信条 格物致知 更多Matlab完整代码及仿真定制内容点击 智能优化算法 神经网络预测 雷达通信
  • 【最新版】PyCharm实用插件

    文章目录 一 安装插件 捆绑的插件 二 实用插件 1 Chinese Simplified Language Pack 中文语言包 概览 2 Rainbow Brackets
  • 设计模式详解---策略模式

    1 策略模式简介 策略模式 Strategy Pattern 是一种行为型设计模式 用于在运行时根据不同的情境选择不同的算法或策略 该模式将算法封装成独立的类 使得它们可以相互替换 而且可以独立于客户端使用它们的方式 1 1 主要角色 上下
  • TypeScript

    TS类型
  • markdown怎么隐藏文字

    2023年12月16日 周六下午 在Markdown中 可以使用以下格式来隐藏文字 在渲染Markdown文档时 被注释的部分将不会显示在最终的输出中 请注意 这种方法只是在渲染时隐藏文字 而不是在Markdown源文件中隐藏
  • 【LEACH协议】 SEP 一种适用于集群百分比异构无线传感器网络的稳定选举协议附Matlab代码

    作者简介 热爱科研的Matlab仿真开发者 修心和技术同步精进 代码获取 论文复现及科研仿真合作可私信 个人主页 Matlab科研工作室 个人信条 格物致知 更多Matlab完整代码及仿真定制内容点击 智能优化算法 神经网络预测 雷达通信
  • 旁边的同事突然晋升阿里P7,只因偷偷学习了这份JVM笔记?

    大家都是有经验的Java开发人员 想想为何要学习JVM 面试 调优 装逼 不管出于何种原因 总之你得先学好 那怎么学好呢 每个人对于JVM的了解可能不一样 这就要考虑到怎么切入 既然大家都学习过Java 那不妨就从Java开始聊起 同时也是
  • 卸载NotePad++/SublimeText吧:VSCode才是史上最优秀的IDE编辑器

    开源免费 免费 这应该是所有人都所希望的 而且居然是微软开源免费的 你敢信吗 vscode使用的是MIT Lisense 可随意下载 分发 商用等 下载地址 https code visualstudio com 此外 VSCode还开源
  • 阿里P8架构师带你“一窥”大型网站架构的主要技术挑战和解决方案

    写在前面 传统的企业应用系统主要面对的技术挑战是处理复杂凌乱 千变万化的所谓业务逻辑 而大型网站主要面对的技术挑战是处理超大量的用户访问和海量的数据处理 前者的挑战来自功能性需求 后者的挑战来自非功能性需求 功能性需求也许还有 人月神话 聊
  • WOA-LSTM多元分类预测 | Matlab鲸鱼算法优化长短期记忆神经网络的故障诊断附matlab代码

    作者简介 热爱科研的Matlab仿真开发者 修心和技术同步精进 代码获取 论文复现及科研仿真合作可私信 个人主页 Matlab科研工作室 个人信条 格物致知 更多Matlab完整代码及仿真定制内容点击 智能优化算法 神经网络预测 雷达通信
  • 「Verilog学习笔记」 Johnson Counter

    专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点 刷题网站用的是牛客网 timescale 1ns 1ns module JC counter input clk input rst n output reg 3 0
  • 【计算机毕设文章】个人行政复议在线预约系统微信小程序

    摘 要 随着我国经济迅速发展 人们对手机的需求越来越大 各种手机软件也都在被广泛应用 但是对于手机进行数据信息管理 对于手机的各种软件也是备受用户的喜爱 微信APP被用户普遍使用 为方便用户能够可以随时进行个人行政复议在线预约系统微信小程序
  • 【英/中,前端】Form <input> elements must have labels每一个元素应当都有一个标签

    原文如下 Form elements must have labels Axe Rules Deque University Deque Systems 编程式的关联标签和窗体控件 下面以推荐程度从高到低依次排列 使用label元素 gt