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

原文如下:
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">

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

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

感动

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/227095.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux下sys目录与proc目录的作用

sys目录作用 在Linux系统中&#xff0c;/sys目录是一个特殊的虚拟文件系统&#xff08;sysfs&#xff09;&#xff0c;用于提供对内核和设备的运行时信息的访问。它是在内核中运行的驱动程序和子系统的接口&#xff0c;可以用于获取和配置系统的硬件和内核信息。 以下是/sys目…

条件分布律

设是二维离散型随机变量&#xff0c;对于固定的&#xff0c;若&#xff0c;则称 &#xff0c; 其中 为在条件下随机变量的条件分布律。 对于固定的&#xff0c;若&#xff0c;则称 &#xff0c; 其中 为在条件下随机变量的条件分布律。

内网穿透工具,如何保障安全远程访问?

内网穿透工具是一种常见的技术手段&#xff0c;用于在没有公网IP的情况下将本地局域网服务映射至外网。这种工具的使用极大地方便了开发人员和网络管理员&#xff0c;使得他们能够快速建立起本地服务与外部网络之间的通信渠道。然而&#xff0c;在享受高效快捷的同时&#xff0…

C语言之函数设计(1)

目录 没有返回值的函数 通用性 不含形参的函数 函数返回值的初始化 作用域 文件作用域 声明和定义 函数原型声明 头文件和文件包含指令 在上节中我们简单的学习了函数的创建方法&#xff08;函数定义&#xff09;与函数的使用方法&#xff08;函数调用&#xff09;&…

特殊日期。

问题描述 对于一个日期&#xff0c;我们可以计算出年份的各个数位上的数字之和也可以分别计算月和日的各位数字之和。请问从1900年1月1日至9999年12月31日&#xff0c;总共有多少天&#xff0c;年份的数位数字之和等于月的数位数字之和加日的数位数字之和。 例如&#xff0c;20…

现代雷达车载应用——第2章 汽车雷达系统原理 2.2节 汽车雷达架构

经典著作&#xff0c;值得一读&#xff0c;英文原版下载链接【免费】ModernRadarforAutomotiveApplications资源-CSDN文库。 2.2 汽车雷达架构 从顶层来看&#xff0c;基本的汽车雷达由发射器&#xff0c;接收器和天线组成。图2.2给出了一种简化的单通道连续波雷达结构[2]。这…

Doris集群搭建——2.0.1.1版本

目录 一、启动Doris 二、配置并分发doris安装包和环境变量 1.分发doris安装包 2.解压安装包 3.分发环境变量 4.修改对应的配置文件 (1)修改be的配置 (2)修改fe的配置 三、be的扩容与缩容 (一)be扩容 1.添加be节点 3.另外两个节点启动be 4.重新查看be节点状态 (二…

NPM的介绍及使用详解

NPM&#xff08;Node Package Manager&#xff09;是Node.js的包管理工具&#xff0c;它让开发者能够方便地在自己的项目中使用和分享代码。 NPM不仅提供了一个庞大的代码库&#xff0c;还提供了命令行界面&#xff0c;用于下载、安装、更新和管理代码包。 下面详细介绍NPM的介…

数据可视化?这些平台能处

图表在各行各业都起到举重若轻的作用&#xff0c;无论是项目汇报、业绩分析&#xff0c;亦或是数据挖掘、统计分析&#xff0c;良好的可视化可以为我们的阐述起到画龙点睛的效果。在一篇文章中&#xff0c;如果只有密密麻麻的文字堆积&#xff0c;无论是谁恐怕都无法长期保持注…

Python实验 —— 简易计算器制作

Python实验 —— 简易计算器制作 实验说明实验过程实验分析 实验说明 Python 作为一门功能强大且易学的编程语言&#xff0c;为我们提供了丰富的工具和库&#xff0c;使得创造有趣的应用成为一种愉快的体验。在这个 Python 实验中&#xff0c;我们将一起探索并构建一个简易计算…

如何预防最新的.locked、.locked1勒索病毒感染您的计算机?

尊敬的读者&#xff1a; 近期&#xff0c;网络安全领域迎来一股新潮——.locked、.locked1勒索病毒的威胁&#xff0c;其先进的加密技术令人生畏。本文将深入剖析.locked、.locked1勒索病毒的阴谋&#xff0c;提供特色数据恢复策略&#xff0c;并揭示锁定恶劣行径的先锋预防手…

【中等】73. 矩阵置零

题目 73. 矩阵置零 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]] 示例 2…

RK3568平台(网络篇)添加网络交换芯片RTL8306M

一.硬件原理图 分析&#xff1a; 该交换芯片支持I2C、SPI、mdio通信&#xff0c;但是看ast1520的uboot代码采用的是mdio去通信phy芯片的&#xff0c;所以暂时也先采用mdio的方式&#xff0c;需要配置相应的引脚才可以配置成mdio通信模式&#xff0c;具体的配置硬件工程师解决。…

妙妙区间dp(从大往小,计算小对大的贡献(2^n的区间dp))AGC035D

https://www.luogu.com.cn/problem/AT_agc035_d 设 f ( l , r , f l , f r ) f(l,r,fl,fr) f(l,r,fl,fr) 表示现在在区间 [ l , r ] [l,r] [l,r]&#xff0c; a l − 1 1 a_{l-1}1 al−1​1 对答案贡献为 f l fl fl&#xff0c; f r fr fr 同理。 然后枚举最后一次操作的…

使用netcore编写对比excel差异

一、新建项目Vlook项目 using MiniExcelLibs; using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Data; using System.IO;namespace Vlook {internal class Program{static void Main(string[] args){var dir App…

L1-046:整除光棍

题目描述 这里所谓的“光棍”&#xff0c;并不是指单身汪啦~ 说的是全部由1组成的数字&#xff0c;比如1、11、111、1111等。传说任何一个光棍都能被一个不以5结尾的奇数整除。比如&#xff0c;111111就可以被13整除。 现在&#xff0c;你的程序要读入一个整数x&#xff0c;这个…

LeetCode-2454. 下一个更大元素 IV【栈 数组 二分查找 排序 单调栈 堆(优先队列)】

LeetCode-2454. 下一个更大元素 IV【栈 数组 二分查找 排序 单调栈 堆&#xff08;优先队列&#xff09;】 题目描述&#xff1a;解题思路一&#xff1a;单调栈&#xff0c;典型的单调栈问题&#xff0c;不过这里用的是双单调栈&#xff0c;因为是找第二大整数。我们用第一个栈…

通义千问关于网络模块的专业知识能力正确率测试

闲着无聊&#xff0c;就用问答区的一个问题&#xff0c;去考验了通义千问&#xff0c;结果优点出乎意料。 我们来看一下具体的问题&#xff0c;这里&#xff0c;我准备了三个问题&#xff1a; 第一个问题&#xff1a;11.192.0.x 注意&#xff0c;这里我并没有增加任何的辅助提…

关于文件操作---C语言

引言 关于文件&#xff0c;想必大家或多或少都会有些了解&#xff0c;文件可以帮我们储存数据&#xff0c;不同格式的文件可以储存不同类型的数据&#xff0c;也可以将文件中的数据用不同的方式打开。电脑中的文件&#xff0c;是放在硬盘上的。在我们编写代码并运行的时候&…

vue中的常见使用

文章目录 datacomputedwatch深层监听 methods 这里是记录一下常规的使用 data 最常用的&#xff0c;定义一些使用到的数据&#xff0c;以一种函数的表现方式 data(){return{} }声明的数据写在return中 computed 较少使用&#xff0c;称为计算属性。 从名称和使用方式来看&a…