Back to Details

astro-accessibility

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Accessibility Rules (WCAG 2.1 AA)

无障碍规则（WCAG 2.1 AA）

This project must meet WCAG 2.1 AA guidelines.

本项目必须符合WCAG 2.1 AA指南要求。

Semantic Structure

语义化结构

Use semantic HTML:

<header>

,

<nav>

,

<section>

,

<article>

,

<footer>

,

<ul>

,

<li>

Use ARIA roles only when native semantics are not possible (e.g.
```
<div role="list">
```
)

使用语义化HTML：

<header>

、

<nav>

、

<section>

、

<article>

、

<footer>

、

<ul>

、

<li>

仅在原生语义无法实现时使用ARIA角色（例如
```
<div role="list">
```
）

Images

图片

Informative images: use the custom
```
<Img>
```
component and pass the
```
media
```
prop, it includes the correct alt text
Functional images/icons (used in buttons or links): use
```
alt
```
or
```
aria-label
```
to describe the action/purpose
Decorative images/icons: use
```
aria-hidden="true"
```
and
```
alt=""
```

信息类图片：使用自定义
```
<Img>
```
组件并传入
```
media
```
属性，该组件已包含正确的替代文本
功能类图片/图标（用于按钮或链接中）：使用
```
alt
```
或
```
aria-label
```
描述操作/用途
装饰类图片/图标：使用
```
aria-hidden="true"
```
和
```
alt=""
```

Active State

激活状态

Use
```
aria-current="page"
```
or
```
aria-current="location"
```
for the current page (e.g. navigation, breadcrumbs)
Use aria-current for styling:
```
aria-current:font-semibold
```

对当前页面使用
```
aria-current="page"
```
或
```
aria-current="location"
```
（例如导航、面包屑）
利用aria-current进行样式设置：
```
aria-current:font-semibold
```

Lists

列表

Use semantic HTML:
```
<ul>
```
,
```
<ol>
```
,
```
<li>
```
For custom components rendering lists, explicitly set ARIA roles:
- ```
role="list"
```
  on the container
- ```
role="listitem"
```
  on each item

使用语义化HTML：
```
<ul>
```
、
```
<ol>
```
、
```
<li>
```
对于渲染列表的自定义组件，需显式设置ARIA角色：
- 在容器上设置
```
role="list"
```
- 在每个列表项上设置
```
role="listitem"
```

Keyboard Navigation

键盘导航

All functionality must be operable using only the keyboard
Do not rely solely on hover, drag, or pointer events for core interactions

所有功能必须仅通过键盘即可操作
核心交互不要仅依赖悬停、拖拽或指针事件

Aria Labels

ARIA标签

Do NOT hardcode strings for
```
aria-label
```
or visually hidden (
```
sr-only
```
) text
Always use dynamic labels from the global state:
```
labels.global['skipToMainContent']
```
Select elements must have an accessible name (e.g.
```
label
```
tag or
```
aria-label
```
)

不要为
```
aria-label
```
或视觉隐藏（
```
sr-only
```
）文本硬编码字符串
始终使用全局状态中的动态标签：
```
labels.global['skipToMainContent']
```
选择元素必须有可访问的名称（例如
```
label
```
标签或
```
aria-label
```
）