使用<sup>标签获取所需的表单字段 - 好主意？

Question

对表单中的必填*字段使用<sup>标记而不是margin-top: -xnumberofpx是个不错的主意。

<label for="address1" required>Address line 1<sup><img src="/src/images/requiredAsterix.png" width="10" height="10" alt="Required!" /><sup></label>
<input type="text" id="address1" name="address1" size="50" ng-maxlength="50" required> 

Answer 1

1. 根据此标记的定义，sup元素在此处的使用显然是可以接受的，该标记旨在本地指示上标元素。

2. 使用带有alt="required"的图片是完全可以接受的，因为这是为不使用屏幕阅读器的人添加替代说明的完美方式。虽然它并不完美。如果没有第三方屏幕阅读器的帮助，元素上的required属性不足以将此信息提供给标准用户。

3. 删除required元素上的label属性并正确关闭sup标记。

4. 输入框中的对比度不符合WCAG对比度要求。

5. 替代文字＆＃34;地址第1行＆＃34;似乎不够明确，但上下文可能有所帮助。

Answer 2

如果有助于解释相关输入，则可以向标签添加更多信息。在HTML规范示例中，他们甚至使用<small />元素向用户显示预期的格式。

https://www.w3.org/TR/html5/forms.html#the-label-element

<label>Full name: <input name=fn> <small>Format: First Last</small></label>

Answer 3

从可访问性的角度来看，使用alt="required"并在输入字段上指定HTML required属性是多余的。屏幕阅读器将宣布它两次。请在图片上设置alt=""。

PS - 我认为这是一个拼写错误，但required属性在<label>标签上无效。