英文:
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).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论