altText for an input box not work the same way as alt for an image regarding alt values?

huangapple go评论101阅读模式
英文:

Does altText for an input box not work the same way as alt for an image regarding alt values?

问题

altText 或 alt 对于输入框与图像的 alt 在读取 alt 值方面不起相同的作用。

尝试匹配 AODA 标准,但我使用的阅读器会读取图像的 alt,但不会读取输入字段的 altText 或 alt,尽管我以为它们是相同的。

正确读取:

<img src="{{distributor_logo}}" alt="{{distributor_logo_title}}">

不正确读取:

<Input
	otherstuff...
    type={"text"}
	altText={altText}
/>
英文:

Does altText or alt for an input box not work the same way as alt for an image regarding reading alt values?

Trying to match AODA standards but the reader I'm using reads alt for images but not altText or alt for input fields which I thought did the same thing.

reads properly:


<img src="{{distributor_logo}}" alt="{{distributor_logo_title}}">

doesn't read properly:

<Input
	otherstuff...
    type={"text"}
	altText={altText}
/>

答案1

得分: 2

alt属性用于在图像不可用时提供要使用的内容,但您没有图像,只有一个文本字段。在那里使用alt属性既没有意义,也不允许。

查看规范

> alt — 图像不可用时使用的替代文本

并且在下面有一个表格:

> 以下表格不是规范性的,总结了哪些内容属性、IDL属性、方法和事件适用于每个状态:

alt仅适用于type="image"

验证器报告:

> 在此位置上,不允许在input元素上使用alt属性。

input type="text"元素的目的是让用户输入一些文本。屏幕阅读器可以很好地通知用户存在文本字段。关键是确保他们知道他们被要求输入什么类型的信息。您的示例代码(可能因为缩减得太多)不提供这种信息,不适用于不使用屏幕阅读器的人。

用于执行此操作的工具是label元素,它将一些文本与input关联起来。

屏幕阅读器是唯一使用label元素的工具。例如,它们还用于增加可点击区域以为使用鼠标/触控板/触摸屏的用户分配焦点给输入。这在输入本身具有较小表面积时特别有用(例如单选按钮或复选框)。

英文:

The alt attribute provides content to use when an image isn't available, but you don't have an image, you have a text field. It doesn't make sense, nor is it allowed, to use an alt attribute there.


See the spec:

> alt — Replacement text for use when images are not available

And further down is a table:

> The following table is non-normative and summarizes which of those content attributes, IDL attributes, methods, and events apply to each state:

alt only applies to type="image".


The validator reports:

> Attribute alt not allowed on element input at this point.


The purpose of an input type="text element is to let the user enter some text. Screen readers are quiet capable of informing users that there is a text field present.

The trick is to make sure they know what kind of information they are expected to enter. Your example code (presumably because it has been reduced too far) doesn't provide that kind of information for people who don't use a screen reader.

The tool to do that is the label element which associates some text with the input.

Screen readers are the only tools which make use of label elements. e.g. they are also used to increase the clickable area to assign focus to the input for users of mice / trackpads / touchscreens. This is especially useful then the input itself has a small surface area (such as a radio button or checkbox will).

huangapple
  • 本文由 发表于 2023年8月10日 20:59:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76875956.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定