Skip to content

Commit

Permalink
[zh-cn]: create the translation of aria-checked (#20937)
Browse files Browse the repository at this point in the history
Co-authored-by: A1lo <[email protected]>
  • Loading branch information
tianyeeT and yin1999 authored Jun 24, 2024
1 parent 1b2cc8a commit ac9a724
Showing 1 changed file with 85 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
---
title: aria-checked
slug: Web/Accessibility/ARIA/Attributes/aria-checked
l10n:
sourceCommit: 3810b129d05f1076d271c4498cbecdec30ad1d39
---

{{AccessibilitySidebar}}

`aria-checked` 属性指示复选框、单选按钮和其他小部件的当前“已选中”状态。

> **备注:** 在可能的情况下,请使用带有 `type="checkbox"``type="radio"` 的 HTML {{htmlelement("input")}} 元素,因为它们具有内置语义,并且不需要 ARIA 属性。
## 描述

`aria-checked` 属性指示元素是否被选中(`true`)、未选中(`false`)或者选中状态不确定(`mixed`),表示它既未被选中也未取消选中。`mixed` 值受到 [`checkbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/checkbox_role)[`menuitemcheckbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role) 的三态输入角色支持。

`mixed` 值不受 [`radio`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/radio_role)[`menuitemradio`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role)[`switch`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/switch_role) 以及继承自这些角色的元素支持。如果不支持 `mixed`,则值将为 false。

```html
<span
role="checkbox"
id="checkBoxInput"
aria-checked="false"
tabindex="0"
aria-labelledby="chk15-label"></span>
<label id="chk15-label">订阅时事通讯</label>
```

`tabindex` 属性是为了启用焦点。需要 JavaScript 切换 `aria-checked` 状态。如果此复选框是可提交表单的一部分,则需要更多 JavaScript 来设置名称和值。

以上代码也可以写为:

```html
<input type="checkbox" id="chk15-label" name="Subscribe" />
<label for="chk15-label">订阅时事通讯</label>
```

通过使用具有 `type="checkbox"` 的 {{htmlelement("input")}} 元素而不是 ARIA,无需任何 JavaScript。

##

- false
- : 元素支持被选中,但当前未被选中。
- true
- : 元素被选中。
- mixed
- : 仅适用于 [`checkbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/checkbox_role)[`menuitemcheckbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role),相当于 `indeterminate`,表示既不选中也不取消选中的混合模式值。
- undefined(默认)
- : 元素不支持被选中。

## 关联角色

适用于以下角色:

- [`checkbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/checkbox_role)
- [`menuitemcheckbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role)
- [`menuitemradio`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role)
- [`option`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/option_role)
- [`radio`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/radio_role)
- [`switch`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/switch_role)

## 关联接口

- {{domxref("Element.ariaChecked")}}
- : {{domxref("Element")}} 接口的 [`ariaChecked`](/zh-CN/docs/Web/API/Element/ariaChecked) 属性反映了 `aria-checked` 属性的值。
- {{domxref("ElementInternals.ariaChecked")}}
- : {{domxref("ElementInternals")}} 接口的 [`ariaChecked`](/zh-CN/docs/Web/API/Element/ariaChecked) 属性反映了 `aria-checked` 属性的值。

```js
myHTMLElement.ariaChecked = true;
```

## 规范

{{Specifications}}

## 参见

- [`<input type="checkbox">`](/zh-CN/docs/Web/HTML/Element/input/checkbox)
- [`<input type="radio">`](/zh-CN/docs/Web/HTML/Element/input/radio)
- [`aria-pressed`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
- [`aria-selected`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
- [双态复选框示例](https://www.w3.org/WAI/ARIA/apg/example-index/checkbox/checkbox.html)—w3.org
- [混合状态复选框示例](https://www.w3.org/WAI/ARIA/apg/example-index/checkbox/checkbox-mixed.html)—w3.org

0 comments on commit ac9a724

Please sign in to comment.