添加的内容 删除的内容
SolidBlock(留言 | 贡献) (→可交互组件) |
SolidBlock(留言 | 贡献) (→可交互组件) |
||
第841行: | 第841行: | ||
</syntaxhighlight> |
</syntaxhighlight> |
||
|2=通过Tab键对元素进行选中的顺序应当于相应内容的视觉上的顺序保持一致,通常来说它们在代码中也应当保持这样的顺序。 |
|2=通过Tab键对元素进行选中的顺序应当于相应内容的视觉上的顺序保持一致,通常来说它们在代码中也应当保持这样的顺序。 |
||
|3=对于有标签的小型组件(例如单选框、复选框),应当将其置于使用的{{Tag|label}}标签中,或者使用相应的<code>for</code>参数,确保当点击的是标签文本而非该组件本身时,也能够选择该组件。 |
|3=对于有标签的小型组件(例如单选框、复选框),应当将其置于使用的{{Tag|label}}标签中,或者使用相应的<code>for</code>参数,确保当点击的是标签文本而非该组件本身时,也能够选择该组件。例如: |
||
<syntaxhighlight lang="html"> |
|||
⚫ | |||
错误写法: |
|||
<input type="radio" name="agree" />设为默认 |
|||
正确写法: |
|||
<label><input type="radio" name="agree" />设为默认</label> |
|||
</syntaxhighlight> |
|||
⚫ | |||
|5=可交互组件必须要有一个无障碍名称{{lang-en|accessible name}}。请看下面这个例子,在例子中的错误写法中,一些人能够使用该按钮使用字母“X”代表关闭,但是辅助功能只会说“X按钮”,对于视觉受限的人而言,可能会产生困惑,因此需要让辅助技术将其描述为“关闭”。 |
|||
<syntaxhighlight lang="html"> |
|||
错误写法: |
|||
<button id="closeButton">X</button> |
|||
正确写法: |
|||
<button id="closeButton">关闭</button> |
|||
<button id="closeButton" aria-label="关闭">X</button> |
|||
</syntaxhighlight> |
|||
{{notice|可交互组件的无障碍名称(例如上面的<code>aria-label</code>参数)中通常不含该可交互组件的类型,因为辅助技术能够识别其角色。例如,上面这个按钮的名称是“关闭”而非“关闭按钮”或“按钮:关闭”。}} |
|||
}} |
|||
== 注释 == |
== 注释 == |