chore: release merge feat/a11y-aria

.eslintrc.js

@@ -30,7 +30,10 @@ module.exports = {
                 'operator-linebreak': ['warn', 'after', { 'overrides': { '?': 'before', ':': 'before' } }],
                 'import/no-unresolved': 'off',
                 'semi': ['error', 'always'],
-                'keyword-spacing': ["error", { "before": true, "after": true }]
+                'keyword-spacing': ["error", { "before": true, "after": true }],
+                'jsx-a11y/click-events-have-key-events': ['warn'],
+                'jsx-a11y/no-noninteractive-element-interactions': ['warn'],
+                'jsx-a11y/no-autofocus': ['warn'],
             },
             globals: {
                 "sinon": "readonly",
@@ -39,7 +42,7 @@ module.exports = {
         {
             files: ['*.ts', '*.tsx'],
             excludedFiles: ['content/**'],
-            extends: ['jest-enzyme', 'plugin:@typescript-eslint/recommended', 'plugin:import/typescript', 'plugin:react/recommended'],
+            extends: ['jest-enzyme', 'plugin:@typescript-eslint/recommended', 'plugin:import/typescript', 'plugin:react/recommended', 'plugin:jsx-a11y/recommended'],
             parser: '@typescript-eslint/parser',
             parserOptions: {
                 project: ['./tsconfig.eslint.json'],
@@ -70,7 +73,10 @@ module.exports = {
                 '@typescript-eslint/no-unused-vars': 'off',
                 'import/no-unresolved': 'off',
                 'semi': ['error', 'always'],
-                'keyword-spacing': ["error", { "before": true, "after": true }]
+                'keyword-spacing': ["error", { "before": true, "after": true }],
+                'jsx-a11y/click-events-have-key-events': ['warn'],
+                'jsx-a11y/no-noninteractive-element-interactions': ['warn'],
+                'jsx-a11y/no-autofocus': ['warn'],
             }
         },
     ],

.github/workflows/lighthouse.yml

@@ -2,9 +2,9 @@ name: 'lighthouse test'
 
 on:
   pull_request:
-    branches: [ main, release, milestone** ]
+    branches: [ main, release, milestone**, feat/a11y-aria ]
   push:
-    branches: [ main, release, milestone**, feat/a11y-ci ]
+    branches: [ main, release, milestone** ]
 
 jobs:
   lhci:

content/basic/grid/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 9
+order: 10
 category: Basic
 title:  Grid
 icon: doc-grid

content/basic/grid/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 9
+order: 10
 category: 基础
 title:  Grid 布局
 icon: doc-grid

content/basic/icon/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 10
+order: 11
 category: Basic
 title: Icon
 subTitle: Icon
@@ -160,3 +160,18 @@ import StarIcon from './star.svg';
 | spin | spin animation | boolean | |
 | style | Icon style | CSSProperties | None |
 | svg | Icon content | ReactNode | None |
+
+## Accessibility
+
+### ARIA
+
+- The Icon component role is img, and its aria-label defaults to the component's file name
+
+```jsx live=true
+import React from 'react';
+import { IconHome } from '@douyinfe/semi-icons';
+
+() => <IconHome aria-label="back to homepage" />;
+```
+
+- The svg element inside Icon is a decorative element, and aria-hidden is set by default to prevent it from being read by screen readers

content/basic/icon/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 10
+order: 11
 category: 基础
 title:  Icon 图标
 icon: doc-icons
@@ -159,3 +159,19 @@ import StarIcon from './star.svg';
 | spin | 旋转动画 | boolean |   |
 | style | 图标样式 | CSSProperties | 无    |
 | svg | 图标内容 | ReactNode | 无    |
+
+
+## Accessibility
+
+### ARIA
+
+- Icon 组件 role 为 img，它的 aria-label 默认为组件的文件名。例如 IconHome 的 aria-label 为 `home`，如果你有更好的语义化名字，可以通过 aria-label 传入。
+
+```jsx live=true
+import React from 'react';
+import { IconHome } from '@douyinfe/semi-icons';
+
+() => <IconHome aria-label="back to homepage" />;
+```
+
+- Icon 内部的 svg 元素为装饰元素，默认设置了 aria-hidden 以不被屏幕阅读器阅读

content/basic/layout/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 11
+order: 12
 category: Basic
 title:  Layout
 subTitle: Layout
@@ -480,6 +480,8 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 | className  | Class name                                                                                                                                 | string  | -       |
 | hasSider   | Indicates that there is a Sider in the child element, which is generally not specified. It can be used to avoid style flashing during SSR. | boolean | -       |
 | style      | Style                                                                                                                                      | CSSProperties  | -       |
+| aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) attribute, used to label the current element Description, improve accessibility | string | | 2.2.0 |
+| role | [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) attribute to improve accessibility | string | | 2.2.0 |
 
 ### Layout.Sider
 
@@ -489,6 +491,8 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 | className    | Class name                                                                             | string                               | -       |
 | style        | Style                                                                                  | CSSProperties                               | -       |
 | onBreakpoint | Callback function when triggering a responsive layout breakpoint                       | (screen: string, broken: bool) => void | -       |
+| aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) attribute, used to label the current element Description, improve accessibility | string | | 2.2.0 |
+| role | [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) attribute to improve accessibility | string | | 2.2.0 |
 
 ### responsive map
 
@@ -503,7 +507,15 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 }
 ```
 
+## Accessibility
+
+### ARIA
+
+- Sider can pass in aria-label props to describe the function of this Sider.
+- Header Content Main Footer can pass in role aria-label to describe the function of the corresponding element.
+
+
 <!-- ## Related Material
 ```material
 2, 43
-``` -->
+``` -->

content/basic/layout/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 11
+order: 12
 category: 基础
 title: Layout 布局
 icon: doc-layout
@@ -494,6 +494,8 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 | className | 类名                                                               | string  | -      |
 | hasSider  | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | -      |
 | style     | 样式                                                               | CSSProperties  | -      |
+| aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) 属性，用来给当前元素加上的标签描述, 提升可访问性 >=2.3.0 | string | - |
+| role | [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) 属性, 提升可访问性 >=2.3.0 | string | - |
 
 ### Layout.Sider
 
@@ -503,6 +505,8 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 | className | 类名 | string | - |
 | style | 样式 | CSSProperties | - |
 | onBreakpoint | 触发响应式布局断点时的回调 | (screen: string, broken: bool) => void | - |
+| aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute)属性，用来给当前元素加上的标签描述, 提升可访问性 >=2.3.0 | string | - |
+| role | [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)属性, 提升可访问性 >=2.3.0  | string | - |
 
 ### responsive map
 
@@ -517,6 +521,13 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 };
 ```
 
+## Accessibility
+
+### ARIA
+
+- Sider 可传入 aria-label props，描述该 Sider 作用。
+- Header Content Main Footer 可传入 role aria-label 描述对应元素作用。
+
 <!-- ## 相关物料
 
 ```material

content/basic/space/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 13
+order: 14
 category: basic
 title:  Space
 icon: doc-space

content/basic/space/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 13
+order: 14
 category: 基础
 title:  Space 间距
 icon: doc-space

content/basic/tokens/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 12
+order: 13
 category: Basic
 title: Tokens 
 icon: doc-token

content/basic/tokens/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 12
+order: 13
 category: 基础
 title:  Tokens 设计变量
 icon: doc-token

content/basic/typography/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 14
+order: 15
 category: Basic
 title:  Typography
 subTitle: Typography

content/basic/typography/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 14
+order: 15
 category: 基础
 title:  Typography 版式
 icon: doc-typography

content/feedback/banner/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 60
+order: 61
 category: Feedback
 title:  Banner
 subTitle: Banner
@@ -184,5 +184,12 @@ import { Banner } from '@douyinfe/semi-ui';
 | title | Title | ReactNode | - | 1.0 |
 | type | Type of banner, one of `info`, `success`, `danger`, `warning` | string | `info` | - |
 
+## Accessibility
+
+### ARIA
+
+- The component has a `role` of 'alert'.
+- The close icon has a `aria-label` of 'Close'.
+
 ## Design Tokens
 <DesignToken/>

content/feedback/banner/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 60
+order: 61
 category: 反馈类
 title:  Banner 通知横幅
 icon: doc-banner
@@ -183,5 +183,12 @@ import { Banner } from '@douyinfe/semi-ui';
 | title | 标题 | ReactNode | - | 1.0 |
 | type | 类型，支持 `info`, `success`, `danger`, `warning` | string | `info` | - |
 
+## Accessibility
+
+### ARIA
+
+- 组件的 `role` 为 'alert'
+- 关闭按钮的 `aria-label` 为 'Close'
+
 ## 设计变量
 <DesignToken/>

content/feedback/notification/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 61
+order: 62
 category: Feedback
 title:  Notification
 subTitle: Notification
@@ -318,5 +318,12 @@ Hook Notification ( >= 1.2.0 )
 
 When you need access Context, you could use ``Notification.useNotification` to create a `contextHolder` and insert to corresponding DOM tree. Notification created by hooks will be able to access the context where `contextHolder` is inserted. Hook Notification has following methods: `info`, `success`, `warning`, `error`, `open`, `close`. For more usage demo, refer to [useToast](/en-US/components/toast#useToast_Hooks)
 
+## Accessibility
+
+### ARIA
+
+- The `role` of the component is'alert'
+- The notification's `aria-labelledby` is marked as the corresponding notification title
+
 ## Design Tokens
-<DesignToken/>
+<DesignToken/>

content/feedback/notification/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 61
+order: 62
 category: 反馈类
 title: Notification 通知
 icon: doc-notification
@@ -301,6 +301,15 @@ import { Notification, Button } from '@douyinfe/semi-ui';
 | top | 弹出位置 top | number \| string | - | 0.25.0 |
 | zIndex | 弹层 z-index 值 | number | 1010 | 0.25.0 |
 
+
+## Accessibility
+
+### ARIA
+
+- 组件的 `role` 为 'alert'
+-  通知的 `aria-labelledby` 标记为对应通知标题
+
+
 ## 设计变量
 
 <DesignToken/>

content/feedback/popconfirm/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 62
+order: 63
 category: Feedback
 title:  Popconfirm
 subTitle: Popconfirm

content/feedback/popconfirm/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 62
+order: 63
 category: 反馈类
 title:  Popconfirm 气泡确认框
 icon: doc-popconfirm

content/feedback/progress/index-en-US.md

@@ -1,15 +1,14 @@
 ---
 localeCode: en-US
-order: 63
+order: 64
 category: Feedback
-title:  Progress
+title: Progress
 subTitle: Progress
 icon: doc-progress
 width: 60%
 brief: Show the current progress of the operation.
 ---
 
-
 ## When to use
 
 Display the current progress and state of the operation for the user when the operation takes a long time to complete
@@ -21,11 +20,13 @@ Display the current progress and state of the operation for the user when the op
 ```jsx
 import { Progress } from '@douyinfe/semi-ui';
 ```
+
 ### Standard progress bar
 
 Use `stroke` Property to control the filling color of the progress bar  
 Use `Percent` Property to control completed progress  
 Use `size` Property control progress bar size  
+Use `aria-label` Property to explain the specific role  
 If the preset size is not satisfied, You can pass height to customize the height of the progress bar through `style` property.
 
 ```jsx live=true
@@ -34,25 +35,24 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 200 }}>
-        <Progress percent={10} stroke='#fc8800' />
-        <br/>
-        <Progress percent={25} stroke='#f93920' />
-        <br/>
-        <Progress percent={50} />
-        <br/>
-        <Progress percent={80} />
-        <br/>
-        <Progress percent={80} size='large' />
-        <br/>
-        <Progress percent={80} style={{ height: '8px' }}/>
+        <Progress percent={10} stroke="#fc8800" aria-label="disk usage"/>
+        <br />
+        <Progress percent={25} stroke="#f93920" aria-label="disk usage"/>
+        <br />
+        <Progress percent={50} aria-label="disk usage"/>
+        <br />
+        <Progress percent={80} aria-label="disk usage"/>
+        <br />
+        <Progress percent={80} size="large" aria-label="disk usage"/>
+        <br />
+        <Progress percent={80} style={{ height: '8px' }} aria-label="disk usage"/>
     </div>
 );
 ```
 
 ### Show percentage text
 
-You can control whether to show percentage number through the `showInfo` property
-In addition, you can format the percentage text show through `format`.
+You can control whether to show percentage number through the `showInfo` property In addition, you can format the percentage text show through `format`.
 
 ```jsx live=true
 import React from 'react';
@@ -60,21 +60,20 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 200 }}>
-        <Progress percent={10} stroke='#fc8800' showInfo={true}/>
-        <br/>
-        <Progress percent={25} stroke='#f93920' showInfo={true}/>
-        <br/>
-        <Progress percent={50} showInfo={true}/>
-        <br/>
-        <Progress percent={50} showInfo={true} format={percent => (percent*10) + '‰'}/>
+        <Progress percent={10} stroke="#fc8800" showInfo={true} aria-label="disk usage"/>
+        <br />
+        <Progress percent={25} stroke="#f93920" showInfo={true} aria-label="disk usage"/>
+        <br />
+        <Progress percent={50} showInfo={true} aria-label="disk usage"/>
+        <br />
+        <Progress percent={50} showInfo={true} format={percent => percent * 10 + '‰'} aria-label="disk usage"/>
     </div>
 );
 ```
 
 ### Vertical progress bar
 
-You can use vertical progress bar by setting `direction='vertical'`
-If preset width is not satisfied, you can pass width to customize the width of the vertical progress bar through `style` property.
+You can use vertical progress bar by setting `direction='vertical'` If preset width is not satisfied, you can pass width to customize the width of the vertical progress bar through `style` property.
 
 ```jsx live=true
 import React from 'react';
@@ -82,11 +81,11 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ height: 100, display: 'flex' }}>
-        <Progress percent={10} direction='vertical'/>
-        <Progress percent={25} direction='vertical' />
-        <Progress percent={50} direction='vertical' />
-        <Progress percent={80} direction='vertical' size='large' />
-        <Progress percent={80} direction='vertical' style={{ width: '8px' }}/>
+        <Progress percent={10} direction="vertical" aria-label="disk usage"/>
+        <Progress percent={25} direction="vertical" aria-label="disk usage"/>
+        <Progress percent={50} direction="vertical" aria-label="disk usage"/>
+        <Progress percent={80} direction="vertical" size="large" aria-label="disk usage"/>
+        <Progress percent={80} direction="vertical" style={{ width: '8px' }} aria-label="disk usage"/>
     </div>
 );
 ```
@@ -101,10 +100,10 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div>
-        <Progress percent={10} type='circle' style={{ margin: 5 }} />
-        <Progress percent={25} type='circle' style={{ margin: 5 }} />
-        <Progress percent={50} type='circle' style={{ margin: 5 }} />
-        <Progress percent={80} type='circle' style={{ margin: 5 }} />
+        <Progress percent={10} type="circle" style={{ margin: 5 }} aria-label="disk usage"/>
+        <Progress percent={25} type="circle" style={{ margin: 5 }} aria-label="disk usage"/>
+        <Progress percent={50} type="circle" style={{ margin: 5 }} aria-label="disk usage"/>
+        <Progress percent={80} type="circle" style={{ margin: 5 }} aria-label="disk usage"/>
     </div>
 );
 ```
@@ -118,10 +117,10 @@ import { Progress } from '@douyinfe/semi-ui';
 () => (
     <React.Fragment>
         <div>
-            <Progress percent={100} type='circle' width={100} style={{ margin: 5 }} />
+            <Progress percent={100} type="circle" width={100} style={{ margin: 5 }} aria-label="disk usage"/>
         </div>
         <div>
-            <Progress percent={100} type='circle' width={100} style={{ margin: 5 }} stroke='#f93920' />
+            <Progress percent={100} type="circle" width={100} style={{ margin: 5 }} stroke="#f93920" aria-label="disk usage"/>
         </div>
     </React.Fragment>
 );
@@ -137,10 +136,10 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <React.Fragment>
-        <Progress percent={10} type='circle' size='small' style={{ margin: 5 }} />
-        <Progress percent={25} type='circle' size='small' style={{ margin: 5 }} />
-        <Progress percent={50} type='circle' size='small' style={{ margin: 5 }} />
-        <Progress percent={80} type='circle' size='small' style={{ margin: 5 }} />
+        <Progress percent={10} type="circle" size="small" style={{ margin: 5 }} aria-label="disk usage"/>
+        <Progress percent={25} type="circle" size="small" style={{ margin: 5 }} aria-label="disk usage"/>
+        <Progress percent={50} type="circle" size="small" style={{ margin: 5 }} aria-label="disk usage"/>
+        <Progress percent={80} type="circle" size="small" style={{ margin: 5 }} aria-label="disk usage"/>
     </React.Fragment>
 );
 ```
@@ -157,11 +156,24 @@ import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
     return (
         <>
             <div>
-                <Progress percent={percent} showInfo/>
-                <Button icon={<IconChevronLeft />} theme="light" onClick={()=> {setPercent(percent - 10);}} disabled={percent === 0} />
-                <Button icon={<IconChevronRight />} theme="light" onClick={()=> {setPercent(percent + 10);}} disabled={percent >=100 } />
+                <Progress percent={percent} showInfo />
+                <Button
+                    icon={<IconChevronLeft />}
+                    theme="light"
+                    onClick={() => {
+                        setPercent(percent - 10);
+                    }}
+                    disabled={percent === 0}
+                />
+                <Button
+                    icon={<IconChevronRight />}
+                    theme="light"
+                    onClick={() => {
+                        setPercent(percent + 10);
+                    }}
+                    disabled={percent >= 100}
+                />
             </div>
-
         </>
     );
 };
@@ -176,9 +188,25 @@ import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
     const [cirPerc, setCirPerc] = useState(40);
     return (
         <div>
-            <div><Progress percent={cirPerc} type='circle'/></div>
-            <Button icon={<IconChevronLeft />} theme="light" onClick={()=> {setCirPerc(cirPerc - 10);}} disabled={cirPerc === 0}/>
-            <Button icon={<IconChevronRight />} theme="light" onClick={()=> {setCirPerc(cirPerc + 10);}} disabled={cirPerc >=100 }/>
+            <div>
+                <Progress percent={cirPerc} type="circle" aria-label="disk usage"/>
+            </div>
+            <Button
+                icon={<IconChevronLeft />}
+                theme="light"
+                onClick={() => {
+                    setCirPerc(cirPerc - 10);
+                }}
+                disabled={cirPerc === 0}
+            />
+            <Button
+                icon={<IconChevronRight />}
+                theme="light"
+                onClick={() => {
+                    setCirPerc(cirPerc + 10);
+                }}
+                disabled={cirPerc >= 100}
+            />
         </div>
     );
 };
@@ -195,9 +223,9 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <React.Fragment>
-        <Progress percent={75} showInfo type='circle' format={(per) => per + 'Days'} style={{ margin:10 }}/>
-        <Progress percent={100} showInfo type='circle' format={(per) => 'Done'} style={{ margin:10 }}/>
-        <Progress percent={50} type='circle' showInfo={false} style={{ margin:10 }}/>
+        <Progress percent={75} showInfo type="circle" format={per => per + 'Days'} style={{ margin: 10 }} aria-label="disk usage"/>
+        <Progress percent={100} showInfo type="circle" format={per => 'Done'} style={{ margin: 10 }} aria-label="disk usage"/>
+        <Progress percent={50} type="circle" showInfo={false} style={{ margin: 10 }} aria-label="disk usage"/>
     </React.Fragment>
 );
 ```
@@ -212,8 +240,8 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <React.Fragment>
-        <Progress percent={50} strokeLinecap='round' type='circle' style={{ margin: 10 }} />
-        <Progress percent={50} strokeLinecap='square' type='circle' style={{ margin:10 }} />
+        <Progress percent={50} strokeLinecap="round" type="circle" style={{ margin: 10 }} aria-label="disk usage"/>
+        <Progress percent={50} strokeLinecap="square" type="circle" style={{ margin: 10 }} aria-label="disk usage"/>
     </React.Fragment>
 );
 ```
@@ -221,20 +249,46 @@ import { Progress } from '@douyinfe/semi-ui';
 ## API Reference
 
 | PROPERTIES | Instructions | Type | Default |
-|--- | --- | --- | --- |
-|className | style class name | string | |
-|direction | The direction of the bar progress bar `horizontal`, `vertical` | string |'horizontal' |
-|format | Formatting function, the input parameter is the current percentage, the result of return will be directly rendered in the center of the circular progress bar | (percent: number) => ReactNode | (percent) => percent +'%' |
-|orbitStroke | Progress bar track fill color<br/>**provided after v1.0.0** | string |'var(--semi-color-fill-0)' |
-|percent | percentage of progress | number | |
-|showInfo | Whether to display the middle text in the circular progress bar, and whether to display the text on the right side of the bar-shaped progress bar | boolean | false |
-|size | size, optional `default`, `small` (only type=circle is effective), `large` (only type=line is effective) | string |'default' |
-|stroke | Fill color of progress bar | string |'var(--semi-color-success)' |
-|strokeLinecap | round corner `round`/square corner `square` (only effective in type='circle' mode) | string |'round' |
-|strokeWidth | When type is `line`, this property controls the height of the progress bar; when type is `circle`, this property controls the width of the progress bar | number | 4 |
-|style | style | CSSProperties | |
-|type | type, optional `line`, `circle` | string |'line' |
-|width | Width of circular progress bar | number | 72 when size='default', 24 for 'small' |
-
+| --- | --- | --- | --- |
+| aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) attribute. Used to add a label description to the current element to improve a11y<br/>**provided after v2.2.0** | string |  |
+| aria-labelledby | [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) attribute. Indicates that the id of some element is the label of the current element. It is used to determine the connection between controls or control groups and their labels, to improve a11y<br/>**provided after v2.2.0** | string |  |  |
+| aria-valuetext | [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) attribute. Used to improve a11y<br/>**provided after v2.2.0** | string |  |  |
+| className | style class name | string |  |
+| direction | The direction of the bar progress bar `horizontal`, `vertical` | string | 'horizontal' |
+| id | id attribute <br/>**provided after v2.2.0** | string |  |
+| format | Formatting function, the input parameter is the current percentage, the result of return will be directly rendered in the center of the circular progress bar | (percent: number) => ReactNode | (percent) => percent +'%' |
+| orbitStroke | Progress bar track fill color<br/>**provided after v1.0.0** | string | 'var(--semi-color-fill-0)' |
+| percent | percentage of progress | number |  |
+| showInfo | Whether to display the middle text in the circular progress bar, and whether to display the text on the right side of the bar-shaped progress bar | boolean | false |
+| size | size, optional `default`, `small` (only type=circle is effective), `large` (only type=line is effective) | string | 'default' |
+| stroke | Fill color of progress bar | string | 'var(--semi-color-success)' |
+| strokeLinecap | round corner `round`/square corner `square` (only effective in type='circle' mode) | string | 'round' |
+| strokeWidth | When type is `line`, this property controls the height of the progress bar; when type is `circle`, this property controls the width of the progress bar | number | 4 |
+| style | style | CSSProperties |  |
+| type | type, optional `line`, `circle` | string | 'line' |
+| width | Width of circular progress bar | number | 72 when size='default', 24 for 'small' |
+
+## Accessibility
+### ARIA
+
+-   Progress has a `progressbar` role to indicate that it is a progress bar component.
+-   Progress will automatically set `aria-valuenow` as the progress percentage (`percent`) passed to the component to ensure that the screen reader can get the correct percentage value. In addition, Progress supports incoming `aria-valuetext`. When you pass in, according to W3C specifications, `aria-valuetext` will be used and consumed by screen readers instead of `aria-valuenow`
+-   Progress support `aria-label`, `aria-labelledby`
+    -   When there is a description element about the role of Progress outside of Progress, you can explicitly specify that the id of certain elements is the label of Progress through `aria-labelledby`
+    -   Otherwise, you should use aria-label to explain the specific meaning of the value represented by Progress
+
+```js
+// good case
+<p id="progressbar-label">Disk Usage</p>
+<Progress aria-labelledby="progressbar-label" percent={80} />
+
+// good case
+<Progress aria-label='Percent of disk usage' percent={80} />
+<Progress aria-label='Percent of file downloaded' percent={80} />
+
+// usage of aria-valuetext
+<Progress aria-label='Percent of disk usage' percent={80} aria-valuetext="Step 2: Copying files... "/> 
+```
 ## Design Tokens
+
 <DesignToken/>

content/feedback/progress/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 63
+order: 64
 category: 反馈类
 title: Progress 进度条
 icon: doc-progress
@@ -25,6 +25,7 @@ import { Progress } from '@douyinfe/semi-ui';
 通过`stroke`属性来控制进度条的填充色  
 通过`percent`属性控制已完成的进度  
 通过`size`属性控制进度条尺寸  
+通过`aria-label`说明进度条具体代表含义  
 如果`size`预设的尺寸不满足，可以通过`style`传入 height 自定义进度条高度
 
 ```jsx live=true
@@ -33,17 +34,17 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 200 }}>
-        <Progress percent={10} stroke="#fc8800" />
+        <Progress percent={10} stroke="#fc8800" aria-label="disk usage" />
         <br />
-        <Progress percent={25} stroke="#f93920" />
+        <Progress percent={25} stroke="#f93920" aria-label="download progress" />
         <br />
-        <Progress percent={50} />
+        <Progress percent={50} aria-label="disk usage" />
         <br />
-        <Progress percent={80} />
+        <Progress percent={80} aria-label="download progress" />
         <br />
-        <Progress percent={80} size="large" />
+        <Progress percent={80} size="large" aria-label="disk usage" />
         <br />
-        <Progress percent={80} style={{ height: '8px' }} />
+        <Progress percent={80} style={{ height: '8px' }} aria-label="disk usage" />
     </div>
 );
 ```
@@ -58,13 +59,13 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 200 }}>
-        <Progress percent={10} stroke="#fc8800" showInfo={true} />
+        <Progress percent={10} stroke="#fc8800" showInfo={true} aria-label="disk usage" />
         <br />
-        <Progress percent={25} stroke="#f93920" showInfo={true} />
+        <Progress percent={25} stroke="#f93920" showInfo={true} aria-label="disk usage" />
         <br />
-        <Progress percent={50} showInfo={true} />
+        <Progress percent={50} showInfo={true} aria-label="disk usage" />
         <br />
-        <Progress percent={50} showInfo={true} format={percent => percent * 10 + '‰'} />
+        <Progress percent={50} showInfo={true} format={percent => percent * 10 + '‰'} aria-label="disk usage" />
     </div>
 );
 ```
@@ -79,11 +80,11 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ height: 100, display: 'flex' }}>
-        <Progress percent={10} direction="vertical" />
-        <Progress percent={25} direction="vertical" />
-        <Progress percent={50} direction="vertical" />
-        <Progress percent={80} direction="vertical" size="large" />
-        <Progress percent={80} direction="vertical" style={{ width: '8px' }} />
+        <Progress percent={10} direction="vertical" aria-label="disk usage" />
+        <Progress percent={25} direction="vertical" aria-label="disk usage" />
+        <Progress percent={50} direction="vertical" aria-label="disk usage" />
+        <Progress percent={80} direction="vertical" size="large" aria-label="disk usage" />
+        <Progress percent={80} direction="vertical" style={{ width: '8px' }} aria-label="disk usage" />
     </div>
 );
 ```
@@ -98,10 +99,10 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div>
-        <Progress percent={10} type="circle" style={{ margin: 5 }} />
-        <Progress percent={25} type="circle" style={{ margin: 5 }} />
-        <Progress percent={50} type="circle" style={{ margin: 5 }} />
-        <Progress percent={80} type="circle" style={{ margin: 5 }} />
+        <Progress percent={10} type="circle" style={{ margin: 5 }} aria-label="disk usage" />
+        <Progress percent={25} type="circle" style={{ margin: 5 }} aria-label="disk usage" />
+        <Progress percent={50} type="circle" style={{ margin: 5 }} aria-label="disk usage" />
+        <Progress percent={80} type="circle" style={{ margin: 5 }} aria-label="disk usage" />
     </div>
 );
 ```
@@ -115,10 +116,17 @@ import { Progress } from '@douyinfe/semi-ui';
 () => (
     <React.Fragment>
         <div>
-            <Progress percent={100} type="circle" width={100} style={{ margin: 5 }} />
+            <Progress percent={100} type="circle" width={100} style={{ margin: 5 }} aria-label="disk usage" />
         </div>
         <div>
-            <Progress percent={100} type="circle" width={100} style={{ margin: 5 }} stroke="#f93920" />
+            <Progress
+                percent={100}
+                type="circle"
+                width={100}
+                style={{ margin: 5 }}
+                stroke="#f93920"
+                aria-label="disk usage"
+            />
         </div>
     </React.Fragment>
 );
@@ -134,10 +142,10 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <React.Fragment>
-        <Progress percent={10} type="circle" size="small" style={{ margin: 5 }} />
-        <Progress percent={25} type="circle" size="small" style={{ margin: 5 }} />
-        <Progress percent={50} type="circle" size="small" style={{ margin: 5 }} />
-        <Progress percent={80} type="circle" size="small" style={{ margin: 5 }} />
+        <Progress percent={10} type="circle" size="small" style={{ margin: 5 }} aria-label="disk usage" />
+        <Progress percent={25} type="circle" size="small" style={{ margin: 5 }} aria-label="disk usage" />
+        <Progress percent={50} type="circle" size="small" style={{ margin: 5 }} aria-label="disk usage" />
+        <Progress percent={80} type="circle" size="small" style={{ margin: 5 }} aria-label="disk usage" />
     </React.Fragment>
 );
 ```
@@ -154,7 +162,7 @@ import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
     return (
         <>
             <div>
-                <Progress percent={percent} showInfo />
+                <Progress percent={percent} showInfo aria-label="disk usage" />
                 <Button
                     icon={<IconChevronLeft />}
                     theme="light"
@@ -187,7 +195,7 @@ import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
     return (
         <div>
             <div>
-                <Progress percent={cirPerc} type="circle" />
+                <Progress percent={cirPerc} type="circle" aria-label="disk usage" />
             </div>
             <Button
                 icon={<IconChevronLeft />}
@@ -221,9 +229,23 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <React.Fragment>
-        <Progress percent={75} showInfo type="circle" format={per => per + 'Days'} style={{ margin: 10 }} />
-        <Progress percent={100} showInfo type="circle" format={per => 'Done'} style={{ margin: 10 }} />
-        <Progress percent={50} type="circle" showInfo={false} style={{ margin: 10 }} />
+        <Progress
+            percent={75}
+            showInfo
+            type="circle"
+            format={per => per + 'Days'}
+            style={{ margin: 10 }}
+            aria-label="disk usage"
+        />
+        <Progress
+            percent={100}
+            showInfo
+            type="circle"
+            format={per => 'Done'}
+            style={{ margin: 10 }}
+            aria-label="disk usage"
+        />
+        <Progress percent={50} type="circle" showInfo={false} style={{ margin: 10 }} aria-label="disk usage" />
     </React.Fragment>
 );
 ```
@@ -238,29 +260,56 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <React.Fragment>
-        <Progress percent={50} strokeLinecap="round" type="circle" style={{ margin: 10 }} />
-        <Progress percent={50} strokeLinecap="square" type="circle" style={{ margin: 10 }} />
+        <Progress percent={50} strokeLinecap="round" type="circle" style={{ margin: 10 }} aria-label="disk usage" />
+        <Progress percent={50} strokeLinecap="square" type="circle" style={{ margin: 10 }} aria-label="disk usage" />
     </React.Fragment>
 );
 ```
 
 ## API 参考
 
-|属性 | 说明 | 类型 | 默认值 |
-|--- | --- | --- | --- |
-|className | 样式类名 | string |  |
-|direction | 条状进度条方向 `horizontal`、`vertical` | string | 'horizontal' |
-|format | 格式化函数，入参为当前百分比，return 的结果将会直接渲染在圆形进度条中心 | (percent: number) => ReactNode | (percent) => percent + '%' |
-|orbitStroke | 进度条轨道填充色<br/>**v1.0.0 后提供** | string | 'var(--semi-color-fill-0)' |
-|percent | 进度百分比 | number |  |
-|showInfo | 环形进度条是否显示中间文本，条状进度条后右侧是否显示文本 | boolean | false |
-|size | 尺寸,可选`default`、`small`(仅 type=circle 生效)、`large`(仅 type=line 生效) | string | 'default' |
-|stroke | 进度条填充色 | string | 'var(--semi-color-success)' |
-|strokeLinecap | 圆角`round`/方角`square`(仅在 type='circle'模式下生效) | string | 'round' |
-|strokeWidth | type 为`line`时，该属性控制进度条高度; type 为`circle`时，该属性控制进度条宽度 | number | 4 |
-|style | 样式 | CSSProperties |  |
-|type | 类型，可选`line`、`circle` | string | 'line' |
-|width | 环形进度条宽度 | number | size='default'时为 72，'small'为 24 |
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute)属性，用来给当前元素加上的标签描述, 用于提升可访问性<br/>**v2.2.0 后提供** | string |  |
+| aria-labelledby | [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute)属性，表明某些元素的 id 是当前元素的标签。它被用来确定控件或控件组与它们标签之间的联系, 提升可访问性<br/>**v2.2.0 后提供** | string |  |  |
+| aria-valuetext | [aria-valuetext](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute)属性，用于提升可访问性<br/>**v2.2.0 后提供** | string |  |  |
+| className | 样式类名 | string |  |
+| direction | 条状进度条方向 `horizontal`、`vertical` | string | 'horizontal' |
+| format | 格式化函数，入参为当前百分比，return 的结果将会直接渲染在圆形进度条中心 | (percent: number) => ReactNode | (percent) => percent + '%' |
+| id | id 标识<br/>**v2.2.0 后提供** | string |  |
+| orbitStroke | 进度条轨道填充色<br/>**v1.0.0 后提供** | string | 'var(--semi-color-fill-0)' |
+| percent | 进度百分比 | number |  |
+| showInfo | 环形进度条是否显示中间文本，条状进度条后右侧是否显示文本 | boolean | false |
+| size | 尺寸,可选`default`、`small`(仅 type=circle 生效)、`large`(仅 type=line 生效) | string | 'default' |
+| stroke | 进度条填充色 | string | 'var(--semi-color-success)' |
+| strokeLinecap | 圆角`round`/方角`square`(仅在 type='circle'模式下生效) | string | 'round' |
+| strokeWidth | type 为`line`时，该属性控制进度条高度; type 为`circle`时，该属性控制进度条宽度 | number | 4 |
+| style | 样式 | CSSProperties |  |
+| type | 类型，可选`line`、`circle` | string | 'line' |
+| width | 环形进度条宽度 | number | size='default'时为 72，'small'为 24 |
+
+## Accessibility
+
+### ARIA
+
+-   Progress 具有 `progressbar` role 来表示它是一个进度条组件。
+-   Progress 会自动将 `aria-valuenow` 设置为传递给组件的进度百分比（`percent`），以确保屏幕阅读器可以获取正确的百分比数值。另外，Progress 支持传入 `aria-valuetext`，当你传入时，根据 W3C 规范，`aria-valuetext` 将优先被屏幕阅读器使用消费，而不是 `aria-valuenow`
+-   Progress 支持传入 `aria-label`、`aria-labelledby`
+    -   当 Progress 外部存在关于 Progress 作用的描述元素时，你可以通过 aria-labelledby 显式指定某些元素的 id 是 Progress 的标签
+    -   否则你应当通过 aria-label 说明 Progress 所代表的具体数值含义
+
+```js
+// good case
+<p id="progressbar-label">Disk Usage</p>
+<Progress aria-labelledby="progressbar-label" percent={80} />
+
+// good case
+<Progress aria-label='Percent of disk usage' percent={80} />
+<Progress aria-label='Percent of file downloaded' percent={80} />
+
+// usage of aria-valuetext
+<Progress aria-label='Percent of disk usage' percent={80} aria-valuetext="Step 2: Copying files... "/> 
+```
 
 ## 设计变量
 

content/feedback/skeleton/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 64
+order: 65
 category: Feedback
 title:  Skeleton
 subTitle: Skeleton

content/feedback/skeleton/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 64
+order: 65
 category: 反馈类
 title: Skeleton 骨架屏
 icon: doc-skeleton

content/feedback/spin/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 65
+order: 66
 category: Feedback
 title: Spin
 subTitle: Spin

content/feedback/spin/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 65
+order: 66
 category: 反馈类
 title: Spin 加载器
 icon: doc-spin

content/feedback/toast/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 66
+order: 67
 category: Feedback
 title: Toast
 subTitle: Toast
@@ -409,6 +409,12 @@ HookToast
 -   `Toast.useToast` **v>=1.2.0**  
     When you need access Context, you could use `Toast.useToast` to create a `contextHolder` and insert to corresponding DOM tree. Toast created by hooks will be able to access the context where `contextHolder` is inserted. Hook toast has following methods: `info`, `success`, `warning`, `error`, `close`.
 
+## Accessibility
+
+### ARIA
+
+- The role of Toast is alert
+
 ## Design Tokens
 
 <DesignToken/>

content/feedback/toast/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 66
+order: 67
 category: 反馈类
 title: Toast 提示
 icon: doc-toast
@@ -410,6 +410,12 @@ HookToast ( >= 1.2.0 )：
 -   `Toast.useToast()`  
     当你需要使用 Context 时，可以通过 Toast.useToast 创建一个 contextHolder 插入相应的节点中。此时通过 hooks 创建的 Toast 将会得到 contextHolder 所在位置的所有上下文。创建的 toast 对象拥有与以下方法：`info`, `success`, `warning`, `error`, `close`。
 
+## Accessibility
+
+### ARIA
+
+- Toast 的 role 为 alert
+
 ## 设计变量
 
 <DesignToken/>

content/input/autocomplete/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 15
+order: 16
 category: Input
 title: AutoComplete
 icon: doc-autocomplete

content/input/autocomplete/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 15
+order: 16
 category: 输入类
 title: AutoComplete 自动完成
 icon: doc-autocomplete

content/input/button/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 16
+order: 17
 category: Input
 title:  Button
 subTitle: Button
@@ -238,25 +238,25 @@ function ButtonDemo() {
     return (
         <div>
             <strong>Default Status: </strong>
-            <Button icon={<IconCamera />}/>
+            <Button icon={<IconCamera />} aria-label="Screenshot" />
             <br/><br/>
             <strong>Disabled Status：</strong>
-            <Button icon={<IconCamera />}/>
+            <Button icon={<IconCamera />} aria-label="Screenshot"/>
             <br/><br/>
             <strong>With Type: </strong>
             <span className="btn-margin-right">
-                <Button type="primary" icon={<IconCamera />}/>
-                <Button type="secondary" icon={<IconCamera />}/>
-                <Button type="warning" icon={<IconCamera />}/>
-                <Button type="danger" icon={<IconCamera />}/>
+                <Button type="primary" icon={<IconCamera />} aria-label="Screenshot"/>
+                <Button type="secondary" icon={<IconCamera />} aria-label="Screenshot"/>
+                <Button type="warning" icon={<IconCamera />} aria-label="Screenshot"/>
+                <Button type="danger" icon={<IconCamera />} aria-label="Screenshot"/>
             </span>
             <br/><br/>
             <strong>Change Theme: </strong>
-            <Button icon={<IconCamera />} theme="solid" style={{ marginRight: 10 }}/>
-            <Button icon={<IconCamera />} theme="light"/>
+            <Button icon={<IconCamera />} theme="solid" style={{ marginRight: 10 }} aria-label="Screenshot"/>
+            <Button icon={<IconCamera />} theme="light" aria-label="Screenshot"/>
             <br/><br/>
             <strong>Change Icon Position: </strong>
-            <Button icon={<IconSidebar />} theme="solid" style={{ marginRight: 10 }}>Collpase</Button>
+            <Button icon={<IconSidebar />} theme="solid" style={{ marginRight: 10 }}>Collapse</Button>
             <Button icon={<IconChevronDown />} theme="solid" iconPosition="right">Expand Options</Button>
             <br/><br/>
         </div>
@@ -365,7 +365,7 @@ function ButtonDemo() {
         <div style={{ display: 'flex' }}>
             {sizes.map(size => (
                 <div style={{ marginRight: 10 }} key={size}>
-                    <ButtonGroup size={size}>
+                    <ButtonGroup size={size} aria-label="Operate button group">
                         <Button>Copy</Button>
                         <Button>Search</Button>
                         <Button>Cut</Button>
@@ -411,7 +411,7 @@ function ButtonDemo() {
         <div style={{ display: 'flex' }}>
             {types.map(type => (
                 <div style={{ marginRight: 10 }} key={type}>
-                    <ButtonGroup type={type}>
+                    <ButtonGroup type={type} aria-label="Operate button group">
                         <Button>Copy</Button>
                         <Button>Search</Button>
                         <Button>Cut</Button>
@@ -463,19 +463,19 @@ function SplitButtonDemo(){
 
     return (
         <div>
-            <SplitButtonGroup style={{marginRight:10}}>
+            <SplitButtonGroup style={{marginRight:10}} aria-label="Project operate button group">
                 <Button theme="solid" type="primary">SplitButton</Button>
                 <Dropdown onVisibleChange={(v)=>handleVisibleChange(1,v)} menu={menu} trigger="click" position="bottomRight">
                     <Button style={btnVisible[1]?{background:'var(--semi-color-primary-hover)',padding:'8px 4px'}:{padding:'8px 4px'}} theme="solid" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
-            <SplitButtonGroup style={{marginRight:10}}>
+            <SplitButtonGroup style={{marginRight:10}} aria-label="Project operate button group">
                 <Button theme="light" type="primary">SplitButton</Button>
                 <Dropdown onVisibleChange={(v)=>handleVisibleChange(2,v)} menu={menu} trigger="click" position="bottomRight">
                     <Button style={btnVisible[2]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="light" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
-            <SplitButtonGroup>
+            <SplitButtonGroup aria-label="Project operate button group">
                 <Button style={btnVisible[3]?{background:'var(--semi-color-fill-0)'}:null} theme="borderless" type="primary">SplitButton</Button>
                 <Dropdown onVisibleChange={(v)=>handleVisibleChange(3,v)} menu={menu} trigger="click" position="bottomRight">
                     <Button style={btnVisible[3]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="borderless" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
@@ -486,12 +486,20 @@ function SplitButtonDemo(){
 }
 ```
 
+## Accessibility
+
+### ARIA
+
+- `aria-label` is used to indicate the function of the button. For icon buttons, we recommend using this attribute
+- `aria-disabled` is synchronized with the disabled attribute, indicating that the button is disabled
+
 ## API Reference
 
 ### Button
 
 | Properties          | Instructions                                                                                                                                      | Type                             | Default   |
 | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------- |
+| aria-label          | Label of the button                                                                                       | string                            | -    |
 | block               | Set the button to the block level button                                                                                                          | boolean                          | false     |
 | className           | Class name                                                                                                                                        | string                           |           |
 | disabled            | Prohibited status                                                                                                                                 | boolean                          | false     |
@@ -514,6 +522,7 @@ function SplitButtonDemo(){
 
 | Properties | Instructions                                                                            | Type    | Default   |
 | ---------- | --------------------------------------------------------------------------------------- | ------- | --------- |
+| aria-label          | Label of the button group                                                                                      | string                            | -    |
 | disabled   | Disabled status                                                                         | boolean | false     |
 | size       | Button size, optional value: `"large"`,`"default"`,`"small"`                            | string  | "default" |
 | type       | Type, optional values: `"primary"`,`"secondary"`, `"tertiary"`, `"warning"`, `"danger"` | string  | "primary" |
@@ -521,6 +530,7 @@ function SplitButtonDemo(){
 ### SplitButtonGroup **V1.12.0**
 | Properties   | Instructions                                                            | Type      | Default     |
 | -----------  | --------------------------------------------------------------  | -------- | --------- |
+| aria-label          | Label of the button group                                                                                       | string                            | -    |
 | style     | Custom style                                  | CSSProperties   |        |
 | className     | Custom class name                                  | string   |        |
 

content/input/button/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 16
+order: 17
 category: 输入类
 title:  Button 按钮
 icon: doc-button
@@ -198,22 +198,22 @@ function ButtonDemo() {
     return (
         <div>
             <strong>默认状态：</strong>
-            <Button icon={<IconCamera />}/>
+            <Button icon={<IconCamera />} aria-label="截屏" />
             <br/><br/>
             <strong>禁用状态：</strong>
-            <Button disabled icon={<IconCamera />}/>
+            <Button disabled icon={<IconCamera />} aria-label="截屏"/>
             <br/><br/>
             <strong>复合类型：</strong>
             <span className="btn-margin-right">
-                <Button type="primary" icon={<IconCamera />}/>
-                <Button type="secondary" icon={<IconCamera />}/>
-                <Button type="warning" icon={<IconCamera />}/>
-                <Button type="danger" icon={<IconCamera />}/>
+                <Button type="primary" icon={<IconCamera />} aria-label="截屏"/>
+                <Button type="secondary" icon={<IconCamera />} aria-label="截屏" />
+                <Button type="warning" icon={<IconCamera />} aria-label="截屏" />
+                <Button type="danger" icon={<IconCamera />} aria-label="截屏" />
             </span>
             <br/><br/>
             <strong>更改主题：</strong>
-            <Button icon={<IconCamera />} theme="solid" style={{ marginRight: 10 }}/>
-            <Button icon={<IconCamera />} theme="light"/>
+            <Button icon={<IconCamera />} theme="solid" style={{ marginRight: 10 }} aria-label="截屏" />
+            <Button icon={<IconCamera />} theme="light" aria-label="截屏" />
             <br/><br/>
             <strong>更改图标位置：</strong>
             <Button icon={<IconSidebar />} theme="solid" style={{ marginRight: 10 }}>收起</Button>
@@ -371,7 +371,7 @@ function ButtonDemo() {
         <div style={{ display: 'flex' }}>
             {types.map(type => (
                 <div style={{ marginRight: 10 }} key={type}>
-                    <ButtonGroup type={type}>
+                    <ButtonGroup type={type} aria-label="操作按钮组">
                         <Button>拷贝</Button>
                         <Button>查询</Button>
                         <Button>剪切</Button>
@@ -422,19 +422,19 @@ function SplitButtonDemo(){
 
     return (
         <div>
-            <SplitButtonGroup style={{marginRight:10}}>
+            <SplitButtonGroup style={{marginRight:10}} aria-label="项目操作按钮组">
                 <Button theme="solid" type="primary">分裂按钮</Button>
                 <Dropdown onVisibleChange={(v)=>handleVisibleChange(1,v)} menu={menu} trigger="click" position="bottomRight">
                     <Button style={btnVisible[1]?{background:'var(--semi-color-primary-hover)',padding:'8px 4px'}:{padding:'8px 4px'}} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
-            <SplitButtonGroup style={{marginRight:10}}>
+            <SplitButtonGroup style={{marginRight:10}} aria-label="项目操作按钮组">
                 <Button theme="light" type="primary">分裂按钮</Button>
                 <Dropdown onVisibleChange={(v)=>handleVisibleChange(2,v)} menu={menu} trigger="click" position="bottomRight">
                     <Button style={btnVisible[2]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="light" type="primary" icon={<IconTreeTriangleDown />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
-            <SplitButtonGroup>
+            <SplitButtonGroup aria-label="项目操作按钮组">
                 <Button style={btnVisible[3]?{background:'var(--semi-color-fill-0)'}:{}} theme="borderless" type="primary">分裂按钮</Button>
                 <Dropdown onVisibleChange={(v)=>handleVisibleChange(3,v)} menu={menu} trigger="click" position="bottomRight">
                     <Button style={btnVisible[3]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="borderless" type="primary" icon={<IconTreeTriangleDown />}></Button>
@@ -445,12 +445,21 @@ function SplitButtonDemo(){
 }
 ```
 
+## Accessibility
+
+### ARIA
+
+- `aria-label` 用于表示按钮的作用，对于图标按钮，我们推荐使用此属性
+- `aria-disabled` 与 disabled 属性同步，表示按钮禁用 
+
+
 ## API 参考
 
 ### Button
 
 | 属性                | 说明                                                                                                       | 类型                            | 默认值    |
 | ------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------- | --------- |
+| aria-label          | 按钮的标签                                                                                       | string                            | -    |
 | block               | 将按钮设置为块级按钮                                                                                       | bool                            | false     |
 | className           | 类名                                                                                                       | string                          |           |
 | disabled            | 禁用状态                                                                                                   | boolean                         | false     |
@@ -472,6 +481,7 @@ function SplitButtonDemo(){
 
 | 属性     | 说明                                                                   | 类型    | 默认值    |
 | -------- | ---------------------------------------------------------------------- | ------- | --------- |
+| aria-label          | 按钮组的标签                                                                                       | string                            | -    |
 | disabled | 禁用状态                                                               | boolean | false     |
 | size     | 按钮大小，可选值：`large`、`default`、`small`                          | string  | "default" |
 | theme               | 按钮主题，可选值：`solid`（有背景色）、 `borderless`（无背景色）、 `light`（浅背景色）                     | string                          | "light"   |
@@ -480,6 +490,7 @@ function SplitButtonDemo(){
 ### SplitButtonGroup **V1.12.0新增**
 | 属性          | 说明                                                            | 类型      | 默认值     |
 | -----------  | --------------------------------------------------------------  | -------- | --------- |
+| aria-label          | 分裂按钮组的标签                                                                                       | string                            | -    |
 | style     | 自定义样式                               | CSSProperties   |         |
 | className     | 自定义类名                               | string   |         |
 

content/input/cascader/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 17
+order: 18
 category: Input
 title:  Cascader
 subTitle: Cascade

content/input/cascader/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 17
+order: 18
 category: 输入类
 title:  Cascader 级联选择
 icon: doc-cascader

content/input/checkbox/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 18
+order: 19
 category: Input
 title:  Checkbox
 subTitle: Checkbox
@@ -34,7 +34,7 @@ import React from 'react';
 import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-    <Checkbox onChange={checked => console.log(checked)}>
+    <Checkbox aria-label="Checkbox demo" onChange={checked => console.log(checked)}>
         Semi Design
     </Checkbox>
 );
@@ -48,6 +48,7 @@ import { Checkbox } from '@douyinfe/semi-ui';
     <Checkbox
         defaultChecked
         onChange={checked => console.log(checked)}
+        aria-label="Checkbox demo"
     >
         Semi Design
     </Checkbox>
@@ -64,12 +65,14 @@ import { Checkbox } from '@douyinfe/semi-ui';
     <>
         <Checkbox
             extra='Semi Design is a design system developed and maintained by IES Front-end Team and UED Team'
+            aria-label="Checkbox demo"
         >
             Semi Design
         </Checkbox>
         <br/>
         <Checkbox
             extra='Semi Design is a design system developed and maintained by IES Front-end Team and UED Team'
+            aria-label="Checkbox demo"
             style={{ width: 400 }}
         >
             Semi Design
@@ -86,9 +89,9 @@ import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <div>
-        <Checkbox Default Checked={false} with>UnChecked Disabled</Checkbox>
+        <Checkbox defaultChecked={false} disabled aria-label="Checkbox demo">UnChecked Disabled</Checkbox>
         <br />
-        <Checkbox defaultChecked disabled>Checked Disabled</Checkbox>
+        <Checkbox defaultChecked disabled aria-label="Checkbox demo">Checked Disabled</Checkbox>
     </div>
 );
 ```
@@ -104,7 +107,7 @@ import React from 'react';
 import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';
 
 () => (
-    <CheckboxGroup style={{ width: '100%' }} defaultValue={['A', 'B']}>
+    <CheckboxGroup style={{ width: '100%' }} defaultValue={['A', 'B']} aria-label="CheckboxGroup demo">
         <Checkbox value="A">A</Checkbox>
         <Checkbox value="B">B</Checkbox>
         <Checkbox value="C">C</Checkbox>
@@ -144,15 +147,16 @@ class App extends React.Component {
         ];
         return (
             <div>
-                <CheckboxGroup options={plainOptions} defaultValue={['semi']} onChange={onChange} />
+                <CheckboxGroup options={plainOptions} defaultValue={['semi']} onChange={onChange} aria-label="CheckboxGroup demo" />
                 <br/><br/>
-                <CheckboxGroup options={options} defaultValue={[]} onChange={onChange} />
+                <CheckboxGroup options={options} defaultValue={[]} onChange={onChange} aria-label="CheckboxGroup demo" />
                 <br/><br/>
                 <CheckboxGroup
                     options={optionsWithDisabled}
                     disabled
                     defaultValue={['Photography']}
                     onChange={onChange}
+                    aria-label="Checkbox demo"
                 />
             </div>
         );
@@ -176,7 +180,7 @@ import { CheckboxGroup } from '@douyinfe/semi-ui';
         { label: 'toutiao', value: 'toutiao' }
     ];
     return (
-        <CheckboxGroup options={options} direction='horizontal' />
+        <CheckboxGroup options={options} direction='horizontal' aria-label="CheckboxGroup demo" />
     );
 };
 ```
@@ -228,6 +232,7 @@ class App extends React.Component {
                         checked={this.state.checked}
                         disabled={this.state.disabled}
                         onChange={this.onChange}
+                        aria-label="Checkbox demo"
                     >
                         {label}
                     </Checkbox>
@@ -284,6 +289,7 @@ import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';
                     indeterminate={indeterminate}
                     onChange={onCheckAllChange}
                     checked={checkAll}
+                    aria-label="Checkbox demo"
                 >
                     Check all
                 </Checkbox>
@@ -293,6 +299,7 @@ import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';
                 options={plainOptions}
                 value={checkedList}
                 onChange={onChange}
+                aria-label="CheckboxGroup demo"
             />
         </div>
     );
@@ -311,7 +318,7 @@ import React from 'react';
 import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-    <CheckboxGroup type='card' defaultValue={['1', '3']} direction='vertical'>
+    <CheckboxGroup type='card' defaultValue={['1', '3']} direction='vertical' aria-label="Checkbox demo">
         <Checkbox value={'1'} disabled extra='Checkbox Description' style={{width:280}}>
             Checkbox Title
         </Checkbox>
@@ -338,7 +345,7 @@ import React from 'react';
 import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-    <CheckboxGroup type='pureCard' defaultValue={['1', '3']} direction='vertical'>
+    <CheckboxGroup type='pureCard' defaultValue={['1', '3']} direction='vertical' aria-label="Checkbox demo">
         <Checkbox value={'1'} disabled extra='Checkbox Description' style={{width:280}}>
             Checkbox Title
         </Checkbox>
@@ -364,7 +371,7 @@ import React from 'react';
 import { CheckboxGroup, Checkbox, Row, Col } from '@douyinfe/semi-ui';
 
 () => (
-    <CheckboxGroup style={{ width: '100%' }}>
+    <CheckboxGroup style={{ width: '100%' }} aria-label="Checkbox demo">
         <Row>
             <Col span={8}>
                 <Checkbox value="A">A</Checkbox>
@@ -386,12 +393,23 @@ import { CheckboxGroup, Checkbox, Row, Col } from '@douyinfe/semi-ui';
 );
 ```
 
+## Accessibility
+
+### ARIA
+- The role of Checkbox is `checkbox`, the role of CheckboxGroup is `list`, and its direct child element is `listitem`
+- `aria-label`: When using the Checkbox alone, if Children have no text, it is recommended to pass in the `aria-label` prop to describe the function of the Checkbox in one sentence, which will make the screen reader read out the content of this label. If you are using Form.Checkbox, you can use the label provided by Form without passing in `aria-label`
+- `aria-labelledby` points to the `addon` node, used to explain the role of the current Checkbox
+- `aria-describedby` points to the `extra` node, which is used to supplement the explanation of the current Checkbox
+- `aria-disabled` indicates the current disabled state, which is consistent with the value of the `disabled` prop
+- `aria-checked` indicates the current checked state
+
 ## API Reference
 
 ### Checkbox
 
 | PROPERTIES     | Instructions                                                 | type               | Default |
 | -------------- | ------------------------------------------------------------ | ------------------ | ------- |
+| aria-label     | Define label of the Checkbox  | string | - |
 | checked        | Specify whether the current Checkbox is selected (it is invalid when used in Group)                     | boolean            | false   |
 | defaultChecked | Whether Checked by default (it is invalid when used in Group)                                           | boolean            | false   |
 | disabled       | Disabled state                                               | boolean            | false   |

content/input/checkbox/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 18
+order: 19
 category: 输入类
 title: Checkbox 复选框
 icon: doc-checkbox
@@ -31,7 +31,7 @@ import React from 'react';
 import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-    <Checkbox onChange={checked => console.log(checked)}>Semi Design</Checkbox>
+    <Checkbox onChange={checked => console.log(checked)} aria-label="Checkbox 示例">Semi Design</Checkbox>
 );
 ```
 
@@ -40,7 +40,7 @@ import React from 'react';
 import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-    <Checkbox defaultChecked onChange={checked => console.log(checked)}>Semi Design</Checkbox>
+    <Checkbox defaultChecked onChange={checked => console.log(checked)} aria-label="Checkbox 示例">Semi Design</Checkbox>
 );
 ```
 
@@ -52,11 +52,11 @@ import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <>
-        <Checkbox extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
+        <Checkbox aria-label="Checkbox 示例" extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
             Semi Design
         </Checkbox>
         <br/>
-        <Checkbox extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 400 }}>
+        <Checkbox aria-label="Checkbox 示例" extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 400 }}>
             Semi Design
         </Checkbox>
     </>
@@ -73,9 +73,9 @@ import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <div>
-        <Checkbox defaultChecked={false} disabled>Unchecked Disabled</Checkbox>
+        <Checkbox defaultChecked={false} disabled aria-label="Checkbox 示例">Unchecked Disabled</Checkbox>
         <br />
-        <Checkbox defaultChecked disabled>Checked Disabled</Checkbox>
+        <Checkbox defaultChecked disabled aria-label="Checkbox 示例">Checked Disabled</Checkbox>
     </div>
 );
 ```
@@ -91,7 +91,7 @@ import React from 'react';
 import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-    <CheckboxGroup style={{ width: '100%' }} defaultValue={['A', 'B']}>
+    <CheckboxGroup style={{ width: '100%' }} defaultValue={['A', 'B']} aria-label="CheckboxGroup 示例">
         <Checkbox value="A">A</Checkbox>
         <Checkbox value="B">B</Checkbox>
         <Checkbox value="C">C</Checkbox>
@@ -129,15 +129,16 @@ import { CheckboxGroup } from '@douyinfe/semi-ui';
     ];
     return (
         <div>
-            <CheckboxGroup options={plainOptions} defaultValue={['抖音']} onChange={onChange} />
+            <CheckboxGroup options={plainOptions} defaultValue={['抖音']} onChange={onChange} aria-label="CheckboxGroup 示例" />
             <br/><br/>
-            <CheckboxGroup options={options} defaultValue={[]} onChange={onChange} />
+            <CheckboxGroup options={options} defaultValue={[]} onChange={onChange} aria-label="CheckboxGroup 示例" />
             <br/><br/>
             <CheckboxGroup
                 options={optionsWithDisabled}
                 disabled
                 defaultValue={['Photography']}
                 onChange={onChange}
+                aria-label="Checkbox 示例"
             />
         </div>
     );
@@ -161,7 +162,7 @@ import { CheckboxGroup } from '@douyinfe/semi-ui';
         { label: '今日头条', value: 'toutiao' }
     ];
     return (
-        <CheckboxGroup options={options} direction='horizontal' />
+        <CheckboxGroup options={options} direction='horizontal' aria-label="CheckboxGroup 示例" />
     );
 };
 ```
@@ -214,6 +215,7 @@ class App extends React.Component {
                         checked={this.state.checked}
                         disabled={this.state.disabled}
                         onChange={this.onChange}
+                        aria-label="Checkbox 示例"
                     >
                         {label}
                     </Checkbox>
@@ -270,6 +272,7 @@ import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';
                     indeterminate={indeterminate}
                     onChange={onCheckAllChange}
                     checked={checkAll}
+                    aria-label="Checkbox 示例"
                 >
                     Check all
                 </Checkbox>
@@ -279,6 +282,7 @@ import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';
                 options={plainOptions}
                 value={checkedList}
                 onChange={onChange}
+                aria-label="CheckboxGroup 示例"
             />
         </div>
     );
@@ -296,7 +300,7 @@ import React from 'react';
 import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-    <CheckboxGroup type='card' defaultValue={['1', '3']} direction='vertical'>
+    <CheckboxGroup type='card' defaultValue={['1', '3']} direction='vertical' aria-label="CheckboxGroup 示例">
         <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
             单选框标题
         </Checkbox>
@@ -323,7 +327,7 @@ import React from 'react';
 import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-    <CheckboxGroup type='pureCard' defaultValue={['1', '3']} direction='vertical'>
+    <CheckboxGroup type='pureCard' defaultValue={['1', '3']} direction='vertical' aria-label="CheckboxGroup 示例">
         <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
             单选框标题
         </Checkbox>
@@ -349,7 +353,7 @@ import React from 'react';
 import { Checkbox, CheckboxGroup, Row, Col } from '@douyinfe/semi-ui';
 
 () => (
-    <CheckboxGroup style={{ width: '100%' }}>
+    <CheckboxGroup style={{ width: '100%' }} aria-label="CheckboxGroup 示例">
         <Row>
             <Col span={8}>
                 <Checkbox value="A">A</Checkbox>
@@ -371,12 +375,23 @@ import { Checkbox, CheckboxGroup, Row, Col } from '@douyinfe/semi-ui';
 );
 ```
 
+## Accessibility
+
+### ARIA
+- Checkbox 的 role 为 `checkbox`，CheckboxGroup 的 role 为 `list`，它的直接子元素为 `listitem`
+- `aria-label`：单独使用 Checkbox 时，如果 Children 没有文本，建议传入 `aria-label` prop，用一句话描述 Checkbox 的作用，这会让屏幕阅读器读出这个标签的内容。如果你使用的是 Form.Checkbox，可以使用 Form 提供的 label 而无需传入 `aria-label`
+- `aria-labelledby` 指向 `addon` 节点，用于解释当前 Checkbox 的作用
+- `aria-describedby` 指向 `extra` 节点，用于补充解释当前 Checkbox 的作用
+- `aria-disabled` 表示当前的禁用状态，与 `disabled` prop 的值保持一致
+- `aria-checked` 表示当前的选中状态
+
 ## API参考
 
 ### Checkbox
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| aria-label | 定义 Checkbox 的作用 | string | - |
 | checked | 指定当前Checkbox是否选中（在Group中使用时无效） | boolean | false |
 | defaultChecked | 初始是否选中（在Group中使用时无效） | boolean | false |
 | disabled | 失效状态 | boolean | false |

content/input/datepicker/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 19
+order: 20
 category: Input
 title: DatePicker
 subTitle: Date Selector

content/input/datepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 19
+order: 20
 category: 输入类
 title: DatePicker 日期选择器
 icon: doc-datepicker

content/input/form/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 20
+order: 21
 category: Input
 title:  Form
 subTitle: Form
@@ -1813,7 +1813,22 @@ const { ErrorMessage } = Form;
 | onKeyChangeFnName | The callback function when the component value changes, generally 'onChange'                                                                                                                                                                                                                                                                                                | 'onChange' |
 | valuePath         | The path of the value attribute to the first parameter in the callback function, such as Radio's onChange (e.target. checked), then the value needs to be set to target .checked; Radio Group's onChange (e.target. value), which is' target .value '; if the first parameter is the value itself, there is no need to take the value down, the item does not need to be set |            |
 | withCursor        | Do you need to maintain a cursor for Input class components                                                                                                                                                                                                                                                                                                                 | false      |
-| shouldMemo        | Do you need memo (for form performance optimization to avoid Field being rerender when Formrerender), for custom components with internal states that may update and affect the UI, this item should be set false                                                 | true       |
+
+## Accessibility
+
+### ARIA
+
+- [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)、for
+  - Field component will automatically add label DOM. The for attribute of label is the same as `props.id` or `props.name` or `props.field`; the `id` attribute of label is determined by `props.id` or `props.name` or `props.field`, and the value format is `${props.field}-label`;
+  - When the props.labelPosition of the Form or Field is set to `inset`, there is no label tag at this time, but a div tag. The div tag corresponding to insetLabel will be automatically appended with `id`, the value is the same as the id of the above label, corresponding to the `aria-labelledby` of the Field component
+  - The Field component will be automatically appended with `aria-labelledby`, the value is the same as the id of the above label
+- [aria-required](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute)
+  - When the Field is configured with required fields (that is, props.rules contains require: true or props.label is configured with required: true), the Field component will be automatically appended with `aria-required = true` (except Form.Switch, Form.CheckboxGroup)
+- [aria-invalid](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute) 、[aria-errormessage](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage) 
+  - When the Field check fails, the Field component will be automatically added with the `aria-invalid` = true attribute, except for Form.CheckboxGroup.
+  - When the Field check fails, the Field component will be automatically appended with the `aria-errormessage` attribute, the value of which is the id of the DOM element corresponding to the errorMessage (format like: `${props.field}-errormessage`), except for Form.CheckboxGroup.
+- [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute)
+  - When the Field is configured with `helpText` or `extraText`, the Field component will be automatically added with the `aria-describedby` attribute, whose value is the id of the DOM element corresponding to helpText and extraText (format like: `${props.field}-helpText` , `${props.field}-extraText`)
 
 ## Design Tokens
 

content/input/form/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 20
+order: 21
 category: 输入类
 title:  Form 表单
 icon: doc-form
@@ -11,8 +11,7 @@ dir: column
 ## 表单(Form)
 
 -   **按需重绘**，避免了不必要的全量渲染, 性能更高
--   简单易用，**结构简洁**，避免了不必要的层级嵌套
-    **无需 Form.create()、无需 Form.item，无需 getFieldDecorator()**
+-   简单易用，**结构极简**，避免了不必要的层级嵌套
 -   在 Form 外部可方便地获取 formState / fieldState  
     提供在外部对表单内部进行操作的方法：formApi / fieldApi
 -   支持将自定义组件封装成表单控件，你可以通过 Form 提供的扩展机制（withField HOC）快捷接入自己团队的组件
@@ -2078,7 +2077,24 @@ const { ErrorMessage } = Form;
 | onKeyChangeFnName | 组件值变化时的回调函数，一般为'onChange'                                                                                                                                                                                                      | 'onChange' |
 | valuePath         | 值属性在回调函数中第一个参数的路径,如 Radio 的 onChange(e.target.checked)，那么该值需要设为 target.checkd；RadioGroup 的 onChange(e.target.value)，该值为'target.value'；若第一个参数就是值本身，无需再往下取值，该项不需要设                 |            |
 | maintainCursor    | 是否需要保持光标，用于 Input 类组件                                                                                                                                                                                                           | false      |
-| shouldMemo        | 是否需要 memo（用于表单性能优化，避免 Form rerender 时 Field 也被 rerender），对于有内部状态且内部状态可能会更新并影响 UI 的自定义组件，此项应该置为 false <br/>**v0.27.0 后提供** | true       |
+
+
+## Accessibility
+
+### ARIA
+
+- [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)、for
+  - Field 组件，会自动添加 label DOM。label 的 `for` 属性与 `props.id` 或 `props.name` 或 `props.field` 相同 ；label 的id 属性由 `props.id` 或 `props.name` 或 `props.field` 决定，值格式为 `${props.field}-label`;
+  - 当 Form 或者 Field 的 props.labelPosition 设置为 inset时，此时不存在 label 标签，而是 div 标签。insetLabel 对应的 div 标签会被自动追加 id，值与上述 label 的 id 相同，对应 Field 组件的 `aria-labelledby`
+  - Field 组件会被自动追加 `aria-labelledby`，值与上述 label 的id 相同
+- [aria-required](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute)
+  - 当 Field 配置了必填时（即 props.rules中包含 require: true 或 props.label配置了required: true），Field 组件会被自动追加  aria-required = true（Form.Switch、Form.CheckboxGroup 除外）
+- [aria-invalid](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute) 、[aria-errormessage](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage) 
+  - 当 Field 校验未通过时，Field 组件会被自动添加 `aria-invalid` = true 属性，Form.CheckboxGroup 除外。
+  - 当 Field 校验未通过时，Field 组件会被自动追加 `aria-errormessage` 属性，值为 errorMessage 所对应DOM元素的 id （格式: `${props.field}-errormessage`），Form.CheckboxGroup 除外。
+- [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute)
+  - 当 Field 配置了 `helpText` 或 `extraText` 时，Field 组件会被自动添加 `aria-describedby` 属性，值为 helpText、extraText 所对应DOM元素的 id （格式：`${props.field}-helpText` 、`${props.field}-extraText`）
+
 
 ## 设计变量
 <DesignToken/>

content/input/input/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 21
+order: 22
 category: Input
 title:  Input
 subTitle: Input

content/input/input/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 21
+order: 22
 category: 输入类
 title:  Input 输入框
 icon: doc-input

content/input/inputnumber/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 22
+order: 23
 category: Input
 title:  InputNumber
 subTitle: InputNumber
@@ -240,5 +240,11 @@ function Demo () {
 | blur()  | Move the focus. |
 | focus() | Get the focus.  |
 
+## Accessibility
+### ARIA
+
+- Added button role to the increase and decrease buttons to indicate that it is a button that can be clicked
+- Use aria-valuenow for the current value, aria-valuemax for the maximum acceptable value, and aria-valuemin for the minimum acceptable value
+
 ## Design Tokens
 <DesignToken/>

content/input/inputnumber/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 22
+order: 23
 category: 输入类
 title: InputNumber 数字输入框
 icon: doc-inputnumber
@@ -219,5 +219,13 @@ function Demo () {
 | blur()  | 移出焦点 |
 | focus() | 获取焦点 |
 
+
+## Accessibility
+
+### ARIA
+
+- 增减按钮添加了 button role，以表示是可以点击的按钮
+- 使用 aria-valuenow 表示当前值，aria-valuemax 表示可以接受的最大值，aria-valuemin 表示可以接受的最小值
+
 ## 设计变量
 <DesignToken/>

content/input/radio/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 23
+order: 24
 category: Input
 title: Radio
 subTitle: Radio
@@ -28,7 +28,7 @@ import React from 'react';
 import { Radio } from '@douyinfe/semi-ui';
 
 () => (
-    <Radio>Radio</Radio>
+    <Radio aria-label="Radio demo">Radio</Radio>
 );
 
 ```
@@ -45,7 +45,7 @@ import { Radio } from '@douyinfe/semi-ui';
 
 
 () => (
-    <Radio extra="Semi Design is a design system developed and maintained by IES Front-end Team and UED Team">
+    <Radio extra="Semi Design is a design system developed and maintained by IES Front-end Team and UED Team" aria-label="Radio demo">
         Semi Design
     </Radio>
 );
@@ -75,15 +75,15 @@ class App extends React.Component {
     render() {
         return (
             <div>
-                <Radio defaultChecked={false} disabled={this.state.disabled}>
+                <Radio defaultChecked={false} disabled={this.state.disabled} aria-label="Radio demo">
                     Disabled
                 </Radio>
                 <br />
-                <Radio defaultChecked disabled={this.state.disabled}>
+                <Radio defaultChecked disabled={this.state.disabled} aria-label="Radio demo">
                     Disabled
                 </Radio>
                 <div style={{ marginTop: 20 }}>
-                    <Button type="primary" onClick={this.toggleDisabled}>
+                    <Button type="primary" onClick={this.toggleDisabled} aria-label="Radio demo">
                         Toggle disabled
                     </Button>
                 </div>
@@ -120,7 +120,7 @@ class App extends React.Component {
     render() {
         return (
             <div>
-                <Radio checked={this.state.checked} mode="advanced" onChange={this.onChange}>
+                <Radio checked={this.state.checked} mode="advanced" onChange={this.onChange} aria-label="Radio demo">
                     Click Again to Uncheck
                 </Radio>
             </div>
@@ -154,7 +154,7 @@ class App extends React.Component {
 
     render() {
         return (
-            <RadioGroup onChange={this.onChange} value={this.state.value}>
+            <RadioGroup onChange={this.onChange} value={this.state.value} aria-label="RadioGroup demo">
                 <Radio value={1}>A</Radio>
                 <Radio value={2}>B</Radio>
                 <Radio value={3}>C</Radio>
@@ -211,17 +211,17 @@ class App extends React.Component {
     render() {
         return (
             <Space vertical spacing="loose" align="start">
-                <RadioGroup type="button" buttonSize="small" onChange={this.onChange1} value={this.state.value1}>
+                <RadioGroup type="button" buttonSize="small" onChange={this.onChange1} value={this.state.value1} aria-label="RadioGroup demo">
                     <Radio value={1}>Instant push</Radio>
                     <Radio value={2}>Timed push</Radio>
                     <Radio value={3}>Dynamic push</Radio>
                 </RadioGroup>
-                <RadioGroup type="button" buttonSize="middle" onChange={this.onChange2} value={this.state.value2}>
+                <RadioGroup type="button" buttonSize="middle" onChange={this.onChange2} value={this.state.value2} aria-label="RadioGroup demo">
                     <Radio value={1}>Instant push</Radio>
                     <Radio value={2}>Timed push</Radio>
                     <Radio value={3}>Dynamic push</Radio>
                 </RadioGroup>
-                <RadioGroup type="button" buttonSize="large" onChange={this.onChange3} value={this.state.value3}>
+                <RadioGroup type="button" buttonSize="large" onChange={this.onChange3} value={this.state.value3} aria-label="RadioGroup demo">
                     <Radio value={1}>Instant push</Radio>
                     <Radio value={2}>Timed push</Radio>
                     <Radio value={3}>Dynamic push</Radio>
@@ -243,7 +243,7 @@ import React from 'react';
 import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
-    <RadioGroup type='card' defaultValue={1} direction='vertical'>
+    <RadioGroup type='card' defaultValue={1} direction='vertical' aria-label="RadioGroup demo">
         <Radio value={1} extra='Radio description' style={{width:280}}>
             Radio Title
         </Radio>
@@ -269,7 +269,7 @@ import React from 'react';
 import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
-    <RadioGroup type='pureCard' defaultValue={1} direction='vertical'>
+    <RadioGroup type='pureCard' defaultValue={1} direction='vertical' aria-label="RadioGroup demo">
         <Radio value={1} extra='Radio description' style={{width:280}}>
             Radio Title
         </Radio>
@@ -338,19 +338,31 @@ class App extends React.Component {
     render() {
         return (
             <div>
-                <RadioGroup options={this.plainOptions} onChange={this.onChange1} value={this.state.value1} />
+                <RadioGroup options={this.plainOptions} onChange={this.onChange1} value={this.state.value1} aria-label="RadioGroup demo" />
                 <br />
                 <br />
-                <RadioGroup options={this.optionsWithDisabled} onChange={this.onChange3} value={this.state.value3} />
+                <RadioGroup options={this.optionsWithDisabled} onChange={this.onChange3} value={this.state.value3} aria-label="RadioGroup demo" />
                 <br />
                 <br />
-                <RadioGroup options={this.options} onChange={this.onChange2} value={this.state.value2} />
+                <RadioGroup options={this.options} onChange={this.onChange2} value={this.state.value2} aria-label="RadioGroup demo" />
             </div>
         );
     }
 }
 ```
 
+## Accessibility
+
+### Keyboard and Focus
+
+- Card type and button type Radio group can be selected by arrow switch
+
+### ARIA
+
+- `aria-label`: used to explain the role of Radio or RadioGroup
+- `aria-labelledby` points to the addon node, used to explain the content of Radio
+- `aria-describedby` points to the extra node, which is used to explain the content of Radio
+
 ## API Reference
 
 ### Radio
@@ -359,6 +371,7 @@ class App extends React.Component {
 | --- | --- | --- | --- |
 | addonClassName | classname of content wrapper<br/>**provided after v1.16.0** | string |  |
 | addonStyle | inline style of content wrapper<br/>**provided after v1.16.0** | object |  |
+| aria-label      | Label of Radio                                                            | string           | -  |
 | autoFocus | Automatically focus the form control when the page is loaded | boolean | false |
 | checked | Specify whether it is currently selected | boolean | false |
 | className | Class name | string |  |
@@ -375,6 +388,7 @@ class App extends React.Component {
 
 | PROPERTIES | Instructions | Type | Default |
 | --- | --- | --- | --- |
+| aria-label      | Label of RadioGroup                                                            | string           | -  |
 | buttonSize | The size of the button type radio， one of `small`、`middle`、`large` <br/>**Provided after v1.26.0** | string | `middle` |
 | className | Class name | string |  |
 | defaultValue | Options selected by default | string \| number | - |

content/input/radio/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 23
+order: 24
 category: 输入类
 title: Radio 单选框
 icon: doc-radio
@@ -25,7 +25,7 @@ import React from 'react';
 import { Radio } from '@douyinfe/semi-ui';
 
 () => (
-    <Radio>Radio</Radio>
+    <Radio aria-label="单选示例">Radio</Radio>
 );
 ```
 
@@ -40,7 +40,7 @@ import React from 'react';
 import { Radio } from '@douyinfe/semi-ui';
 
 () => (
-    <Radio extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统">
+    <Radio extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统" aria-label="单选示例">
         Semi Design
     </Radio>
 );
@@ -61,11 +61,11 @@ import { Radio, Button } from '@douyinfe/semi-ui';
     };
     return (
         <div>
-            <Radio defaultChecked={false} disabled={disabled}>
+            <Radio defaultChecked={false} disabled={disabled} aria-label="单选示例">
                 Disabled
             </Radio>
             <br />
-            <Radio defaultChecked disabled={disabled}>
+            <Radio defaultChecked disabled={disabled} aria-label="单选示例">
                 Disabled
             </Radio>
             <div style={{ marginTop: 20 }}>
@@ -97,6 +97,7 @@ import { Radio } from '@douyinfe/semi-ui';
             checked={checked}
             mode="advanced"
             onChange={toggle}
+            aria-label="单选示例"
         >
             允许取消选择
         </Radio>
@@ -119,7 +120,7 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
         setValue(e.target.value);
     }; 
     return (
-        <RadioGroup onChange={onChange} value={value}>
+        <RadioGroup onChange={onChange} value={value} aria-label="单选组合示例">
             <Radio value={1}>A</Radio>
             <Radio value={2}>B</Radio>
             <Radio value={3}>C</Radio>
@@ -138,7 +139,7 @@ import React from 'react';
 import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
-    <RadioGroup direction="vertical">
+    <RadioGroup direction="vertical" aria-label="单选组合示例">
         <Radio value={1}>A</Radio>
         <Radio value={2}>B</Radio>
         <Radio value={3}>C</Radio>
@@ -162,17 +163,17 @@ import { RadioGroup, Radio, Space } from '@douyinfe/semi-ui';
 () => {
     return (
         <Space vertical spacing='loose' align='start'>
-            <RadioGroup type='button' buttonSize='small' defaultValue={1}>
+            <RadioGroup type='button' buttonSize='small' defaultValue={1} aria-label="单选组合示例">
                 <Radio value={1}>即时推送</Radio>
                 <Radio value={2}>定时推送</Radio>
                 <Radio value={3}>动态推送</Radio>
             </RadioGroup>
-            <RadioGroup type='button' buttonSize='middle' defaultValue={1}>
+            <RadioGroup type='button' buttonSize='middle' defaultValue={1} aria-label="单选组合示例">
                 <Radio value={1}>即时推送</Radio>
                 <Radio value={2}>定时推送</Radio>
                 <Radio value={3}>动态推送</Radio>
             </RadioGroup>
-            <RadioGroup type='button' buttonSize='large' defaultValue={1}>
+            <RadioGroup type='button' buttonSize='large' defaultValue={1} aria-label="单选组合示例">
                 <Radio value={1}>即时推送</Radio>
                 <Radio value={2}>定时推送</Radio>
                 <Radio value={3}>动态推送</Radio>
@@ -193,7 +194,7 @@ import React from 'react';
 import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
-    <RadioGroup type='card' defaultValue={2} direction='vertical'>
+    <RadioGroup type='card' defaultValue={2} direction='vertical' aria-label="单选组合示例">
         <Radio value={1} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
             单选框标题
         </Radio>
@@ -217,7 +218,7 @@ import React from 'react';
 import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
-    <RadioGroup type='pureCard' defaultValue={2} direction='vertical'>
+    <RadioGroup type='pureCard' defaultValue={2} direction='vertical' aria-label="单选组合示例">
         <Radio value={1} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
             单选框标题
         </Radio>
@@ -290,16 +291,19 @@ class App extends React.Component {
                     options={this.plainOptions}
                     onChange={this.onChange1}
                     value={this.state.value1}
+                    aria-label="单选组合示例"
                 />
                 <RadioGroup
                     options={this.optionsWithDisabled}
                     onChange={this.onChange3}
                     value={this.state.value3}
+                    aria-label="单选组合示例"
                 />
                 <RadioGroup
                     options={this.options}
                     onChange={this.onChange2}
                     value={this.state.value2}
+                    aria-label="单选组合示例"
                 />
             </Space>
         );
@@ -307,6 +311,18 @@ class App extends React.Component {
 }
 ```
 
+## Accessibility
+
+### 键盘和焦点
+
+- 卡片式、按钮式 Radio 组可以通过箭头切换选中
+
+### ARIA
+
+- `aria-label`：用于解释 Radio 或 RadioGroup 的作用
+- `aria-labelledby` 默认指向 addon 节点，用于解释 Radio 的内容
+- `aria-describedby` 默认指向 extra 节点，用于补充解释 Radio 的内容
+
 ## API 参考
 
 ### Radio
@@ -315,6 +331,7 @@ class App extends React.Component {
 |----------------|-----------------------------------------------------------------------|------------------|--------|
 | addonClassName | 包裹内容容器的样式类名  **v1.16.0 后提供**                                 | string            |       |
 | addonStyle     | 包裹内容容器的内联样式  **v1.16.0 后提供**                                 | CSSProperties     |       |
+| aria-label      | Radio 的 label                                                            | string           | -  |
 | autoFocus      | 自动获取焦点                                                            | boolean           | false  |
 | checked        | 指定当前是否选中                                                         | boolean           | false  |
 | className      | 样式类名                                                                | string            |        |
@@ -333,6 +350,7 @@ class App extends React.Component {
 
 | 属性         | 说明                                                                                        | 类型                                                                      | 默认值       |
 | ------------ | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------ |
+| aria-label      | RadioGroup 的 label                                                            | string           | -  |
 |buttonSize|type='button'的radio的尺寸大小，可选值为：`small`、`middle`、`large` <br/>**v1.26.0 后提供** |string|`middle`|
 | className    | 样式类名                                                                                    | string                                                                    |              |
 | defaultValue | 默认选中的值                                                                                | string \| number                                                                       | -            |

content/input/rating/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 24
+order: 25
 category: Input
 title: Rating
 subTitle: Rating
@@ -178,5 +178,11 @@ import { IconLikeHeart } from '@douyinfe/semi-icons';
 | tooltips      | Customize prompted information for each item                                          | String[]                | -                                        |
 | value         | Controlled value                                                                      | number                  | -                                        |
 
+##Accessibility
+
+### ARIA
+
+- Rating has aria-checked to indicate whether it is currently selected, aria-posinset to indicate the position in the list, and aria-setsize to indicate the length of the list
+
 ## Design Tokens
 <DesignToken/>

content/input/rating/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 24
+order: 25
 category: 输入类
 title:  Rating 评分
 icon: doc-rating
@@ -155,5 +155,11 @@ import { IconLikeHeart } from '@douyinfe/semi-icons';
 | tooltips | 自定义每项的提示信息 | string[] | - |
 | value | 当前受控值 | number | - |
 
+## Accessibility
+
+### ARIA
+
+- Rating 具有 aria-checked 表示当前是否选中，aria-posinset 表示在列表的位置，aria-setsize 表示列表的长度
+
 ## 设计变量
 <DesignToken/>

content/input/select/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 25
+order: 26
 category: Input
 title: Select
 subTitle: Select
@@ -1375,6 +1375,15 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | open        | Manually open dropdown list     | v0.34.0 |
 | selectAll   | Manually select all options     | v1.18.0 |
 
+## Accessibility
+
+### ARIA
+
+- The role of the Select trigger is combobox, the role of the popup layer is listbox, and the role of the option is option
+- Select trigger has aria-haspopup, aria-expanded, and aria-controls properties, indicating the relationship between trigger and popup layer
+- When multiple selections are made, listbox aria-multiselectable is true, indicating that multiple selections are currently available
+- aria-selected is true when Option is selected; aria-disabled is true when Option is disabled
+
 ## Design Tokens
 
 <DesignToken/>

content/input/select/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 25
+order: 26
 category: 输入类
 title:  Select 选择器
 icon: doc-select
@@ -1396,6 +1396,16 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | deselectAll | 调用时可以手动清空所有已选项 | v1.18.0 |
 | selectAll | 调用时可以选中所有Option | v1.18.0 |
 
+## Accessibility
+
+### ARIA
+
+- Select trigger 的 role 为 combobox，弹出层的 role 为 listbox，可选项的 role 为 option
+- Select trigger 具有 aria-haspopup、aria-expanded、aria-controls 属性，表示 trigger 与弹出层的关系
+- 多选时，listbox aria-multiselectable 为 true，表示当前可以多选
+- Option 选中时，aria-selected 为 true；当 Option 禁用时，aria-disabled 为 true
+
+
 ## 设计变量
 <DesignToken/>
 

content/input/slider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 26
+order: 27
 category: Input
 title:  Slider
 subTitle: Slider
@@ -28,19 +28,19 @@ import { Slider } from '@douyinfe/semi-ui';
     <div>
         <div>
             <div>Default</div>
-            <Slider showBoundary={true}></Slider>
+            <Slider aria-label='Slider default' showBoundary={true}></Slider>
         </div>
         <br/>
         <br/>
         <div>
             <div>Range</div>
-            <Slider defaultValue={[20, 60]} range></Slider>
+            <Slider aria-label='Slider range' defaultValue={[20, 60]} range></Slider>
         </div>
         <br/>
         <br/>
         <div>
             <div>Disabled</div>
-            <Slider defaultValue={40} disabled></Slider>
+            <Slider aria-label='Slider disabled' defaultValue={40} disabled></Slider>
         </div>
     </div>
 );
@@ -259,5 +259,17 @@ import { Slider } from '@douyinfe/semi-ui';
 | onAfterChange  | Triggered when onmouseup is invoked, passed in current value as params                     | (value: number \| number[]) => void      | -       |- |
 | onChange       | Callback function when slider value changes                                                | (value: number \| number[]) => void      | -       |- |
 
+## Accessibility
+
+### ARIA
+
+- The element serving as the focusable slider control has `role` 'slider'.
+- The slider element has the `aria-valuenow` property set to a decimal value representing the current value of the slider.
+- The slider element has the `aria-valuemin` property set to a decimal value representing the minimum allowed value of the slider.
+- The slider element has the `aria-valuemax` property set to a decimal value representing the maximum allowed value of the slider.
+- If the slider is vertically oriented, it has `aria-orientation` set to vertical.
+- If the value of `aria-valuenow` is not user-friendly, e.g., the day of the week is represented by a number, support setting API `aria-valuetext` property to a string that makes the slider value understandable, e.g., "Monday". And you can use API `getAriaValueText(value)` to specify `aria-valuetext`.
+- Supporting API `aria-label` `aria-labelledby` to specify Slider label.
+
 ## Design Tokens
 <DesignToken/>

content/input/slider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 26
+order: 27
 category: 输入类
 title:  Slider 滑动选择器
 icon: doc-slider
@@ -246,5 +246,18 @@ import { Slider } from '@douyinfe/semi-ui';
 | onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 | (value: number \| number[]) => void | 无 |-|
 | onChange | 当 Slider 的值发生改变时的回调 | (value: number \| number[]) => void | 无 |-|
 
+## Accessibility
+
+### ARIA
+
+- Slider 可聚焦的控制元素 role 为 `slider`。
+- 元素的 `aria-valuenow` 属性为当前值的十进制数值。
+- 元素的 `aria-valuemin` 属性为最小允许值的十进制数值。
+- 元素的 `aria-valuemax` 属性为最大允许值的十进制数值。
+- 当 Slider 为纵向时，元素的 `aria-orientation` 属性为 'vertical'。
+- 当 `aria-valuenow` 的值不容易被理解时，支持通过 API `aria-valuetext` 传递一个字符串使其更友好。也可以通过 API `geAriaValueText(value)` 方法得到 `aria-valuetext` 的值。
+- 支持通过 API `aria-label` 或者 `aria-labelledby` 确定 slider 的标签。
+
+
 ## 设计变量
 <DesignToken/>

content/input/switch/index-en-US.md

@@ -1,8 +1,8 @@
 ---
 localeCode: en-US
-order: 27
+order: 28
 category: Input
-title:  Switch
+title: Switch
 subTitle: Switch
 icon: doc-switch
 width: 60%
@@ -10,24 +10,27 @@ brief: Switch is an interactive form used to switch two mutually exclusive state
 ---
 
 ## Demos
+
 ### How to import
 
 ```jsx import
 import { Switch } from '@douyinfe/semi-ui';
 ```
+
 ### Basic Usage
 
+You can monitor state changes through `onChange`, and set the selected state through `defaultChecked` or controlled `checked`.  
+Use `aria-label` to describe the specific function of the Switch
+
 ```jsx live=true
 import React from 'react';
 import { Switch } from '@douyinfe/semi-ui';
 
 () => (
     <div>
-        <Switch onChange={(v, e) => console.log(v)}>
-        </Switch>
-        <br/>
-        <Switch defaultChecked={true} onChange={(v, e) => console.log(v)}>
-        </Switch>
+        <Switch onChange={(v, e) => console.log(v)} aria-label="a switch for demo"></Switch>
+        <br />
+        <Switch defaultChecked={true} onChange={(v, e) => console.log(v)} aria-label="a switch for demo"></Switch>
     </div>
 );
 ```
@@ -40,20 +43,22 @@ import { Switch } from '@douyinfe/semi-ui';
 
 () => (
     <div>
-        <Switch size='small'></Switch>
-        <Switch defaultChecked={true} size='small'></Switch>
-        <Switch size='small' loading/>
-        <Switch size='small' loading defaultChecked={true} />
-        <br/><br/>
+        <Switch size="small" aria-label="a switch for demo"></Switch>
+        <Switch defaultChecked={true} size="small" aria-label="a switch for demo"></Switch>
+        <Switch size="small" loading aria-label="a switch for demo" />
+        <Switch size="small" loading defaultChecked={true} aria-label="a switch for demo" />
+        <br />
+        <br />
         <Switch></Switch>
         <Switch defaultChecked={true}></Switch>
         <Switch loading />
         <Switch loading defaultChecked={true} />
-        <br/><br/>
-        <Switch size='large'></Switch>
-        <Switch defaultChecked={true} size='large'></Switch>
-        <Switch size='large' loading/>
-        <Switch size='large' loading defaultChecked={true} />
+        <br />
+        <br />
+        <Switch size="large"></Switch>
+        <Switch defaultChecked={true} size="large"></Switch>
+        <Switch size="large" loading />
+        <Switch size="large" loading defaultChecked={true} />
     </div>
 );
 ```
@@ -66,9 +71,9 @@ import { Switch } from '@douyinfe/semi-ui';
 
 () => (
     <div>
-        <Switch disabled></Switch>
-        <br/>
-        <Switch disabled checked={true}></Switch>
+        <Switch disabled aria-label='a switch for demo'></Switch>
+        <br />
+        <Switch disabled checked={true} aria-label='a switch for demo'></Switch>
     </div>
 );
 ```
@@ -85,22 +90,26 @@ import { Switch } from '@douyinfe/semi-ui';
 
 () => (
     <div>
-        <Switch checkedText='on' uncheckedText='off' />
-        <Switch checkedText='｜' uncheckedText='〇' style={{marginLeft:5}}/>
-        <br/><br/>
-        <Switch defaultChecked checkedText='on' uncheckedText='off' />
-        <Switch defaultChecked checkedText='｜' uncheckedText='〇' style={{marginLeft:5}}/>
-        <br/><br/>
-        <Switch checkedText='on' uncheckedText='off' size='large' />
-        <Switch checkedText='｜' uncheckedText='〇' size='large' style={{marginLeft:5}}/>
-        <br/><br/>
-        <Switch defaultChecked checkedText='on' uncheckedText='off' size='large' />
-        <Switch defaultChecked checkedText='｜' uncheckedText='〇' size='large' style={{marginLeft:5}}/>
+        <Switch checkedText="on" uncheckedText="off" />
+        <Switch checkedText="｜" uncheckedText="〇" style={{ marginLeft: 5 }} />
+        <br />
+        <br />
+        <Switch defaultChecked checkedText="on" uncheckedText="off" />
+        <Switch defaultChecked checkedText="｜" uncheckedText="〇" style={{ marginLeft: 5 }} />
+        <br />
+        <br />
+        <Switch checkedText="on" uncheckedText="off" size="large" />
+        <Switch checkedText="｜" uncheckedText="〇" size="large" style={{ marginLeft: 5 }} />
+        <br />
+        <br />
+        <Switch defaultChecked checkedText="on" uncheckedText="off" size="large" />
+        <Switch defaultChecked checkedText="｜" uncheckedText="〇" size="large" style={{ marginLeft: 5 }} />
     </div>
 );
 ```
 
 Compared to setting the embedded text through checkedText and uncheckedText, we recommend placing the text description outside the Switch
+
 ```jsx live=true
 import React, { useState } from 'react';
 import { Switch, Typography } from '@douyinfe/semi-ui';
@@ -109,9 +118,11 @@ import { Switch, Typography } from '@douyinfe/semi-ui';
     const [open, setOpen] = useState();
     const { Title } = Typography;
     return (
-        <div style={{display:'flex', alignItems: 'center'}}>
-            <Title heading={6} style={{margin: 8}}>{open?'Open':'Closed'}</Title>
-            <Switch checked={open} onChange={setOpen}/>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Title heading={6} style={{ margin: 8 }}>
+                {open ? 'Open' : 'Closed'}
+            </Title>
+            <Switch checked={open} onChange={setOpen} />
         </div>
     );
 };
@@ -125,27 +136,21 @@ Whether the component is selected depends entirely on the incoming checked value
 import React from 'react';
 import { Switch } from '@douyinfe/semi-ui';
 
-class Demo extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            checked: true,
-        };
-        this.onChange = this.onChange.bind(this);
-    }
-    onChange(checked) {
-        this.setState({ checked });
-    }
-    render() {
-        return (
-            <>
-                <Switch
-                    checked={this.state.checked}
-                    onChange={this.onChange}>
-                </Switch>
-            </>
-        );
-    }
+() => {
+    const [checked, setChecked] = useState(true);
+
+    const onChange = (checked) => {
+        setChecked(checked);
+    };
+
+    return (
+        <Switch
+            checked={checked}
+            aria-label='a switch for demo'
+            onChange={onChange}
+        />
+    );
+
 }
 ```
 
@@ -170,20 +175,28 @@ import { Switch } from '@douyinfe/semi-ui';
 
 ## API reference
 
-| Properties     | Instructions                                              | Type                        | Default   | version|
-| -------------- | --------------------------------------------------------- | --------------------------- | --------- | ------ |
-| className      | The CSS class name of the wrapper element                 | string                      |           ||
-| checked        | Indicates whether currently selected, used with onchange  | boolean                     | false     ||
-| checkedText    | Content displayed when open, invalid when size is small   | React Node                  |           |0.25.0|
-| defaultChecked | Whether selected when component mounted                   | boolean                     | false     ||
-| disabled       | If true, the switch will be disabled.                     | boolean                     | false     ||
-| loading        | Turn on loading status                                    | boolean                     | false     |1.29.0|
-| onChange       | Callback function when changing                           | function (checked: boolean) |           ||
-| onMouseEnter   | A callback when the mouse moves in                        | function ()                 |           ||
-| onMouseLeave   | A callback when the mouse moves out                       | function ()                 |           ||
-| size           | Size, optional value `large`, `default`, `small`          | string                      | 'default' ||
-| style          | Inline style                                              | object                      | {}        ||
-| uncheckedText  | Content displayed when closed, invalid when size is small | React Node                  |           |0.25.0|
-
+| Properties | Instructions | Type | Default | version |
+| --- | --- | --- | --- | --- |
+| aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen | string |  | 2.2.0 |
+| aria-labelledby | [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute)attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. | string |  | 2.2.0 |
+| className | The CSS class name of the wrapper element | string |  |  |
+| checked | Indicates whether currently selected, used with onchange | boolean | false |  |
+| checkedText | Content displayed when open, invalid when size is small | React Node |  | 0.25.0 |
+| defaultChecked | Whether selected when component mounted | boolean | false |  |
+| disabled | If true, the switch will be disabled. | boolean | false |  |
+| loading | Turn on loading status | boolean | false | 1.29.0 |
+| onChange | Callback function when changing | function (checked: boolean) |  |  |
+| onMouseEnter | A callback when the mouse moves in | function () |  |  |
+| onMouseLeave | A callback when the mouse moves out | function () |  |  |
+| size | Size, optional value `large`, `default`, `small` | string | 'default' |  |
+| style | Inline style | object | {} |  |
+| uncheckedText | Content displayed when closed, invalid when size is small | React Node |  | 0.25.0 |
+
+## Accessibility
+### ARIA
+- Switch has a `switch` role, when checked is true, `aria-checked` will be automatically set to true, and vice versa.
+- As a form field, it should have a Label, which will be automatically brought on when you use Form.Switch.
+- If you use Switch alone, it is recommended to use `aria-label` to describe the current label function.
 ## Design Tokens
-<DesignToken/>
+
+<DesignToken/>

content/input/switch/index.md

@@ -1,14 +1,13 @@
 ---
 localeCode: zh-CN
-order: 27
+order: 28
 category: 输入类
-title:  Switch 开关
+title: Switch 开关
 icon: doc-switch
 width: 60%
 brief: 开关是用于切换两种互斥状态的交互形式
 ---
 
-
 ## 代码演示
 
 ### 如何引入
@@ -16,45 +15,53 @@ brief: 开关是用于切换两种互斥状态的交互形式
 ```jsx import
 import { Switch } from '@douyinfe/semi-ui';
 ```
+
 ### 基本
 
+你可以通过 `onChange` 监听状态变化，通过 `defaultChecked` 或受控的 `checked` 制定选中状态。  
+通过 `aria-label` 描述该 Switch 开关的具体作用
+
 ```jsx live=true
 import React from 'react';
 import { Switch } from '@douyinfe/semi-ui';
 
 () => (
     <div>
-        <Switch onChange={(v, e) => console.log(v)}>
-        </Switch>
-        <br/>
-        <Switch defaultChecked={true} onChange={(v, e) => console.log(v)}>
-        </Switch>
+        <Switch onChange={(v, e) => console.log(v)} aria-label="a switch for demo"></Switch>
+        <br />
+        <Switch defaultChecked={true} onChange={(v, e) => console.log(v)} aria-label="a switch for semi demo"></Switch>
     </div>
 );
 ```
 
 ### 尺寸
 
+你可以通过 size 指定尺寸
+
 ```jsx live=true
 import React from 'react';
 import { Switch } from '@douyinfe/semi-ui';
 
 () => (
     <div>
-        <Switch size='small'></Switch>
-        <Switch defaultChecked={true} size='small'></Switch>
-        <Switch size='small' loading/>
-        <Switch size='small' loading defaultChecked={true} />
-        <br/><br/>
-        <Switch></Switch>
-        <Switch defaultChecked={true}></Switch>
-        <Switch loading />
-        <Switch loading defaultChecked={true} />
-        <br/><br/>
-        <Switch size='large'></Switch>
-        <Switch defaultChecked={true} size='large'></Switch>
-        <Switch size='large' loading/>
-        <Switch size='large' loading defaultChecked={true} />
+        <Space style={{ marginBottom: 10, display: 'block' }}>
+            <Switch size="small" aria-label="a switch for demo"></Switch>
+            <Switch defaultChecked={true} size="small" aria-label="a switch for demo"></Switch>
+            <Switch size="small" loading aria-label="a switch for demo" />
+            <Switch size="small" loading defaultChecked={true} aria-label="a switch for demo" />
+        </Space>
+        <Space style={{ marginBottom: 10, display: 'block' }}>
+            <Switch></Switch>
+            <Switch defaultChecked={true} aria-label="a switch for demo"></Switch>
+            <Switch loading aria-label="a switch for demo" />
+            <Switch loading defaultChecked={true} aria-label="a switch for demo" />
+        </Space>
+        <Space>
+            <Switch size="large"></Switch>
+            <Switch defaultChecked={true} size="large"></Switch>
+            <Switch size="large" loading />
+            <Switch size="large" loading defaultChecked={true} />
+        </Space>
     </div>
 );
 ```
@@ -67,9 +74,9 @@ import { Switch } from '@douyinfe/semi-ui';
 
 () => (
     <div>
-        <Switch disabled></Switch>
-        <br/>
-        <Switch disabled checked={true}></Switch>
+        <Switch disabled aria-label="a switch for demo"></Switch>
+        <br />
+        <Switch disabled checked={true} aria-label="a switch for demo"></Switch>
     </div>
 );
 ```
@@ -77,8 +84,7 @@ import { Switch } from '@douyinfe/semi-ui';
 ### 带文本
 
 可以通过 `checkedText` 与 `uncheckedText` 设置开关时的文本  
-注意：此项功能在最小的开关(即 size='small'时)无效  
-
+注意：此项功能在最小的开关(即 size='small'时)无效
 
 ```jsx live=true
 import React from 'react';
@@ -86,22 +92,26 @@ import { Switch } from '@douyinfe/semi-ui';
 
 () => (
     <div>
-        <Switch checkedText='开' uncheckedText='关' />
-        <Switch checkedText='｜' uncheckedText='〇' style={{marginLeft:5}}/>
-        <br/><br/>
-        <Switch defaultChecked checkedText='开' uncheckedText='关' />
-        <Switch defaultChecked checkedText='｜' uncheckedText='〇' style={{marginLeft:5}}/>
-        <br/><br/>
-        <Switch checkedText='开' uncheckedText='关' size='large' />
-        <Switch checkedText='｜' uncheckedText='〇' size='large' style={{marginLeft:5}}/>
-        <br/><br/>
-        <Switch defaultChecked checkedText='开' uncheckedText='关' size='large' />
-        <Switch defaultChecked checkedText='｜' uncheckedText='〇' size='large' style={{marginLeft:5}}/>
+        <Switch checkedText="开" uncheckedText="关" />
+        <Switch checkedText="｜" uncheckedText="〇" style={{ marginLeft: 5 }} />
+        <br />
+        <br />
+        <Switch defaultChecked checkedText="开" uncheckedText="关" />
+        <Switch defaultChecked checkedText="｜" uncheckedText="〇" style={{ marginLeft: 5 }} />
+        <br />
+        <br />
+        <Switch checkedText="开" uncheckedText="关" size="large" />
+        <Switch checkedText="｜" uncheckedText="〇" size="large" style={{ marginLeft: 5 }} />
+        <br />
+        <br />
+        <Switch defaultChecked checkedText="开" uncheckedText="关" size="large" />
+        <Switch defaultChecked checkedText="｜" uncheckedText="〇" size="large" style={{ marginLeft: 5 }} />
     </div>
 );
 ```
 
-相比于通过chekedText与uncheckedText设置内嵌的文本，我们更推荐将文本说明放置在Switch外部
+相比于通过 chekedText 与 uncheckedText 设置内嵌的文本，我们更推荐将文本说明放置在 Switch 外部
+
 ```jsx live=true
 import React, { useState } from 'react';
 import { Switch, Typography } from '@douyinfe/semi-ui';
@@ -110,9 +120,11 @@ import { Switch, Typography } from '@douyinfe/semi-ui';
     const [open, setOpen] = useState();
     const { Title } = Typography;
     return (
-        <div style={{display:'flex', alignItems: 'center'}}>
-            <Title heading={6} style={{margin: 8}}>{open?'已开启':'已关闭'}</Title>
-            <Switch checked={open} onChange={setOpen}/>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Title heading={6} style={{ margin: 8 }}>
+                {open ? '已开启' : '已关闭'}
+            </Title>
+            <Switch checked={open} onChange={setOpen} aria-label="a switch for demo" />
         </div>
     );
 };
@@ -126,28 +138,15 @@ import { Switch, Typography } from '@douyinfe/semi-ui';
 import React from 'react';
 import { Switch } from '@douyinfe/semi-ui';
 
-class Demo extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            checked: true,
-        };
-        this.onChange = this.onChange.bind(this);
-    }
-    onChange(checked) {
-        this.setState({ checked });
-    }
-    render() {
-        return (
-            <>
-                <Switch
-                    checked={this.state.checked}
-                    onChange={this.onChange}>
-                </Switch>
-            </>
-        );
-    }
-}
+() => {
+    const [checked, setChecked] = useState(true);
+
+    const onChange = checked => {
+        setChecked(checked);
+    };
+
+    return <Switch checked={checked} aria-label="a switch for demo" onChange={onChange} />;
+};
 ```
 
 ### 加载中
@@ -171,20 +170,31 @@ import { Switch } from '@douyinfe/semi-ui';
 
 ## API 参考
 
-| 属性           | 说明                                     | 类型                      | 默认值    |版本|
-| -------------- | ---------------------------------------- | ------------------------- | --------- |--------- |
-| className      | 类名                                     | string                    |           |
-| checked        | 指示当前是否选中,配合 onChange 使用      | boolean                   | false     ||
-| checkedText    | 打开时展示的内容, size为small时无效 | ReactNode                 |           |0.25.0|
-| defaultChecked | 初始是否选中                             | boolean                   | false     ||
-| disabled       | 是否禁用                                 | boolean                   | false     ||
-| loading        | 设置加载状态                                 | boolean                   | false     |1.29.0|
-| onChange       | 变化时回调函数                           | function(checked:boolean) |           ||
-| onMouseEnter   | 鼠标移入时回调                        | function()                |           ||
-| onMouseLeave   | 鼠标移出时回调                        | function()                |           ||
-| size           | 尺寸,可选值`large`,`default`,`small`     | string                    | 'default' ||
-| style           | 内联样式     | object                    | ||
-| uncheckedText  | 关闭时展示的内容, size为small时无效 | ReactNode                 |           |0.25.0|
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute)属性，用来给当前元素加上的标签描述, 提升可访问性 | string |  | 2.2.0 |
+| aria-labelledby | [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute)属性，表明某些元素的 id 是某一对象的标签。它被用来确定控件或控件组与它们标签之间的联系, 提升可访问性 | string |  | 2.2.0 |
+| className | 类名 | string |  |
+| checked | 指示当前是否选中,配合 onChange 使用 | boolean | false |  |
+| checkedText | 打开时展示的内容, size 为 small 时无效 | ReactNode |  |  |
+| defaultChecked | 初始是否选中 | boolean | false |  |
+| disabled | 是否禁用 | boolean | false |  |
+| loading | 设置加载状态 | boolean | false | 1.29.0 |
+| onChange | 变化时回调函数 | function(checked:boolean) |  |  |
+| onMouseEnter | 鼠标移入时回调 | function() |  |  |
+| onMouseLeave | 鼠标移出时回调 | function() |  |  |
+| size | 尺寸,可选值`large`,`default`,`small` | string | 'default' |  |
+| style | 内联样式 | object |  |  |
+| uncheckedText | 关闭时展示的内容, size 为 small 时无效 | ReactNode |  |  |
+
+## Accessibility
+
+### ARIA
+
+-   Switch 具有 `switch` role，当 checked 为 true 时，`aria-checked` 将被自动设置为 true，反之亦然.
+-   作为表单控件应该带有 Label，当你使用 Form.Switch 时会自动被带上。
+-   如果你单独使用 Switch，建议使用 `aria-label` 描述当前标签作用。
 
 ## 设计变量
-<DesignToken/>
+
+<DesignToken/>

content/input/taginput/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 28
+order: 29
 category: Input
 title: TagInput
 subTitle: TagInput
@@ -384,6 +384,7 @@ class CustomRender extends React.Component {
                 style={{display: 'flex', alignItems: 'center', fontSize: 14, marginRight: 10}}
             >
                 <Avatar 
+                    alt='avatar'
                     src={data?data.avatar:'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg'} 
                     size="extra-small" 
                 />
@@ -452,6 +453,14 @@ class CustomRender extends React.Component {
 |blur() |Remove focus|1.19.0|
 |focus()|Get focus   |1.19.0|
 
+## Accessibility
+
+### ARIA
+
+- TagInput supports the input of `aria-label` to indicate the function of the TagInput;
+- TagInput will set `aria-disabled` and `aria-invalid` according to disabled and validateStatus props;
+- Both the input box and the clear button of TagInput have `aria-label` to indicate the function of the element.
+
 ## Design Tokens
 <DesignToken/>
 

content/input/taginput/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 28
+order: 29
 category: 输入类
 title: TagInput 标签输入框
 icon: doc-tagInput
@@ -384,6 +384,7 @@ class CustomRender extends React.Component {
                 style={{display: 'flex', alignItems: 'center', fontSize: 14, marginRight: 10}}
             >
                 <Avatar 
+                    alt='avatar'
                     src={data?data.avatar:'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg'} 
                     size="extra-small" 
                 />
@@ -451,6 +452,14 @@ class CustomRender extends React.Component {
 |blur() |移出焦点|1.19.0|
 |focus()|获取焦点|1.19.0|
 
+## Accessibility
+
+### ARIA
+
+- TagInput 支持传入 `aria-label` 来表示该 TagInput 作用；
+- TagInput 会依据 disabled 及 validateStatus props 来分别设置 `aria-disabled`、`aria-invalid`；
+- TagInput 的输入框和清空按钮均具有 `aria-label` 来表明元素作用。
+
 ## 设计变量
 <DesignToken/>
 

content/input/timepicker/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 29
+order: 30
 category: Input
 title: TimePicker
 subTitle: TimePicker

content/input/timepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 29
+order: 30
 category: 输入类
 title: TimePicker 时间选择器
 icon: doc-timepicker

content/input/transfer/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 30
+order: 31
 category: Input
 title: Transfer
 icon: doc-transfer
@@ -905,6 +905,13 @@ import { Transfer } from '@douyinfe/semi-ui';
 };
 ```
 
+## Accessibility
+
+### ARIA
+
+- Add `role` `search` to the search box
+- Add `role` `list` to the selected list on the right, add `role` `listitem` to the selected item
+
 ## API Reference
 
 ### Trasnfer Props

content/input/transfer/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 30
+order: 31
 category: 输入类
 title: Transfer 穿梭框
 icon: doc-transfer
@@ -907,6 +907,13 @@ import { Transfer } from '@douyinfe/semi-ui';
 };
 ```
 
+## Accessibility
+
+### ARIA
+
+- 搜索框添加 `role` `search`
+- 右侧选中列表添加 `role` `list`，选中项添加 `role` `listitem`
+
 ## API 参考
 
 ### Trasnfer Props

content/input/treeselect/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 31
+order: 32
 category: Input
 title:  TreeSelect
 subTitle: TreeSelect
@@ -1259,5 +1259,21 @@ function Demo() {
 - search(sugInput: string)
 For custom rendering of input box.
 
+## Accessibility
+
+### ARIA
+
+- TreeSelect will automatically set `aria-label` to 'TreeSelect', and also support users to set `aria-label` to indicate the function of the TreeSelect;
+- TreeSelect allows users to set `aria-describedby`, `aria-errormessage`, `aria-invalid`, `aria-labelledby`, `aria-required`, in addition, Form will automatically set these properties for Form.TreeSelect;
+- TreeSelect will set `aria-disabled`, `aria-checked`, `aria-selected`, `aria-level` for each child node to indicate node status and level;
+
+Demo:
+```typescript
+    <TreeSelect
+        /* other attributes */
+        aria-label='example treeSelect'
+    />
+```
+
 ## Design Tokens
 <DesignToken/>

content/input/treeselect/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 31
+order: 32
 category: 输入类
 title: TreeSelect 树选择器
 icon: doc-treeselect
@@ -1235,9 +1235,27 @@ function Demo() {
 | key | required且要求唯一 | string | - |
 | isLeaf| 是否为叶子节点 | boolean |-|
 
-## 设计变量
-<DesignToken/>
 
 ### Method
 - search(sugInput: string)
-如果需要自定义搜索框可以使用该方法。
+如果需要自定义搜索框可以使用该方法。
+
+## Accessibility
+
+### ARIA
+
+- TreeSelect 会自动设置 `aria-label` 为 'TreeSelect'，也支持用户自行设置 `aria-label` 来表示该 TreeSelect 作用;
+- TreeSelect 允许用户设置 `aria-describedby`、`aria-errormessage`、`aria-invalid`、`aria-labelledby`、`aria-required`，另外，Form 会为 Form.TreeSelect 自动设置这些属性;
+- TreeSelect 会自动为每个子节点分别设置 `aria-disabled`、`aria-checked`、`aria-selected`、`aria-level` 来表明节点状态及层级;
+
+示例:
+```typescript
+    <TreeSelect
+        /* other attributes */
+        aria-label='example treeSelect'
+    />
+```
+
+
+## 设计变量
+<DesignToken/>

content/input/upload/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 32
+order: 33
 category: Input
 title: Upload
 icon: doc-upload
@@ -1081,6 +1081,15 @@ import { IconUpload } from '@douyinfe/semi-icons';
 };
 ```
 
+## Accessibility
+
+The Upload component is an interactive control that can trigger file selection when clicking or dragging. After the file is selected, the status will be displayed in the file list.
+
+### ARIA
+
+- Add `role="button"` to clickable elements
+- Add `role="list"` to the file list and describe it with `aria-label`
+
 ## API Reference
 
 ---

content/input/upload/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 32
+order: 33
 category: 输入类
 title: Upload 上传
 icon: doc-upload
@@ -1068,6 +1068,15 @@ import { IconUpload } from '@douyinfe/semi-icons';
 };
 ```
 
+## Accessibility
+
+Upload组件是一个可交互的控件，在点击或拖拽时触发文件选择，文件选中后会在文件列表内展示状态。
+
+### ARIA
+
+- 为可点击元素添加 `role="button"`
+- 文件列表添加 `role="list"`，并用 `aria-label` 描述
+
 ## API 参考
 
 ---

content/navigation/anchor/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 33
+order: 34
 category: Navigation
 title:  Anchor
 subTitle: Anchor

content/navigation/anchor/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 33
+order: 34
 category: 导航类
 title:  Anchor 锚点
 icon: doc-anchor

content/navigation/backtop/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 34
+order: 35
 category: Navigation
 title: BackTop
 subTitle: BackTop

content/navigation/backtop/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 34
+order: 35
 category: 导航类
 title: BackTop 回到顶部
 icon: doc-backtop

content/navigation/breadcrumb/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 35
+order: 36
 category: Navigation
 title:  Breadcrumb
 subTitle: Breadcrumb
@@ -334,6 +334,11 @@ import { IconHome, IconArticle } from '@douyinfe/semi-icons';
 
 After **v>=1.16.0**, other props in Breadcrumb.Item are also supported correspondingly.
 
+## Accessibility
+
+- Breadcrumb supports the `aria-label` props to indicate the function of the Breadcrumb
+- Breadcrumb will set `aria-current='page'` for the current item
+
 ## Design Tokens
 <DesignToken/>
 

content/navigation/breadcrumb/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 35
+order: 36
 category: 导航类
 title:  Breadcrumb 面包屑
 icon: doc-breadcrumb
@@ -336,6 +336,11 @@ import { IconHome, IconArticle } from '@douyinfe/semi-icons';
 
 **v>=1.16.0** 之后 Route 支持 Breadcrumb.Item 上的相应属性。
 
+## Accessibility
+
+- Breadcrumb 支持传入 `aria-label` 来表示该 Breadcrumb 作用
+- Breadcrumb 会对当前项设置 `aria-current='page'`
+
 ## 设计变量
 <DesignToken/>
 

content/navigation/navigation/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 36
+order: 37
 category: Navigation
 title:  Navigation
 subTitle: Navigation

content/navigation/navigation/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 36
+order: 37
 category: 导航类
 title:  Navigation 导航
 icon: doc-navigation

content/navigation/pagination/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 37
+order: 38
 category: Navigation
 title:  Pagination
 subTitle: Pagination
@@ -201,6 +201,13 @@ import { Pagination } from '@douyinfe/semi-ui';
 | onPageChange       | A callback function for page number changes                                                                 | function(currentPage: number)                   |                     |              |
 | onPageSize Change  | Callback function when capacity changes per page                                                            | function(pageSize: number)                      |                     |              |
 
+## Accessibility
+
+### ARIA
+
+- `aria-label`: Labels the element such as previous, next, pages in the pagination.
+- `aria-current`: Indicates the current page.
+
 ## Design Tokens
 <DesignToken/>
 

content/navigation/pagination/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 37
+order: 38
 category: 导航类
 title:  Pagination 翻页器
 icon: doc-pagination
@@ -194,6 +194,13 @@ import { Pagination } from '@douyinfe/semi-ui';
 | onPageChange       | 页码变化的回调函数                                                                | function(currentPage: number)                   |                     |
 | onPageSizeChange   | 每页容量变化时的回调函数                                                          | function(pageSize: number)                      |                     |
 
+## Accessibility
+
+### ARIA
+
+- `aria-label`: 描述组件内页码、前一页、后一页等元素的标签
+- `aria-current`: 指向当前页的页码元素
+
 ## 设计变量
 <DesignToken/>
 

content/navigation/steps/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 38
+order: 39
 category: Navigation
 title: Steps
 subTitle: Steps
@@ -311,6 +311,13 @@ class App extends React.Component {
 }
 ```
 
+## Accessibility
+
+### ARIA
+
+- Steps and Step components support passing in the `aria-label` attribute to represent the description of Steps and Steps
+- Step component has an `aria-current` `step` attribute, indicating that this is a step in the step bar
+
 ## API reference
 
 ### Steps
@@ -334,12 +341,15 @@ Step in the step bar.
 
 | Parameters | Instructions | type | Default | Version |
 | --- | --- | --- | --- | --- |
+| aria-label | Container aria-label   | React.AriaAttributes["aria-label"] |  |   |
 | description | Detailed description of steps, optional | ReactNode |  | - |  |
 | icon | Type of step icon, optional | ReactNode |  | - |  |
+| role      | Container role  | React.AriaRole | -  |    |
 | status | Specify the state. When this property is not configured, the `current`of Steps is used to automatically specify the state. Optional: `wait`,`process`,`finish`,`error`,`warning` | string | wait |  |
 | style     | CSS Style                                                                          | CSSProperties |            |    |
 | title | Title | ReactNode |  | - |  |
 | onClick | Callback of click | function | - |  |
+| onKeyDown     | Callback ok keyDown  | function | -   |    |
 
 ## Design Tokens
 

content/navigation/steps/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 38
+order: 39
 category: 导航类
 title:  Steps 步骤
 icon: doc-steps
@@ -313,38 +313,48 @@ class App extends React.Component {
 }
 ```
 
+## Accessibility
+
+### ARIA
+
+- Steps、Step组件支持传入`aria-label`属性，来表示Steps和Step的描述
+- Step组件具有 `aria-current` `step` 属性，表示这是步骤条内的一步
+
 ## API 参考
 
 ### Steps
 
 整体步骤条。
 
-| 参数      | 说明                                                                          | 类型   | 默认值     | 版本    |
-| --------- | ----------------------------------------------------------------------------- | ------ | ---------- | ------ |
-| className | 类名                                                                          | string |            |    |
-| current   | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0          |    |
+| 参数      | 说明   | 类型   | 默认值     | 版本    |
+| --------- | ------- | ------ | ----- | ----- |
+| className | 类名  | string |    |   |
+| current   | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0  |    |
 | direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向      | string | horizontal |    |
-| hasLine   | 步骤条类型为basic时，可控制是否显示连接线                                             | boolean | true       | 1.18.0    |
-| initial   | 起始序号，从 0 开始记数                                                       | number | 0          |    |
-| status    | 指定当前步骤的状态，可选 `wait`、`process`、`finish`、`error`、`warning`           | string | process    |    |
+| hasLine   | 步骤条类型为basic时，可控制是否显示连接线  | boolean | true       | 1.18.0    |
+| initial   | 起始序号，从 0 开始记数   | number | 0   |    |
+| status    | 指定当前步骤的状态，可选 `wait`、`process`、`finish`、`error`、`warning`  | string | process    |    |
 | size      | 对于简单步骤条和导航步骤条，可选尺寸尺寸，值为`small`、`default`   | string  | `default` | 1.18.0  |
-| style     | 样式                                                                          | CSSProperties |            |    |
-| type     | 步骤条类型，可选 `fill`、`basic`、`nav`                                             | string | fill       | 1.18.0    |
-| onChange  | 改变步骤条的回调                                              | (index: number) => void | -       | 1.29.0    |
+| style     | 样式   | CSSProperties |   |    |
+| type     | 步骤条类型，可选 `fill`、`basic`、`nav`  | string | fill | 1.18.0    |
+| onChange  | 改变步骤条的回调 | (index: number) => void | -  | 1.29.0    |
 
 ### Steps.Step
 
 步骤条内的每一个步骤。
 
-| 参数        | 说明                                                                                                          | 类型              | 默认值 | 版本   |
-| ----------- | ------------------------------------------------------------------------------------------------------------- | ----------------- | ------ | ---- |
-| className | 类名                                                                          | string |            |    |
-| description | 步骤的详情描述，可选                                                                                          | ReactNode | -      |    |
-| icon        | 步骤图标的类型，可选                                                                                          | ReactNode | -      |    |
-| status      | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait`、`process`、`finish`、`error`、`warning` | string            | wait   |    |
-| style     | 样式                                                                          | CSSProperties |            |    |
-| title       | 标题                                                                                                        | ReactNode | -      |    |
-| onClick     | 点击回调                                                                                                          | function | -      |    |
+| 参数  | 说明  | 类型  | 默认值 | 版本  |
+| ---- | -------| ----- | ----- | ---- |
+| aria-label | 容器aria-label   | React.AriaAttributes["aria-label"] |  |   |
+| className | 类名   | string |  |   |
+| description | 步骤的详情描述，可选  | ReactNode | -  |    |
+| icon      | 步骤图标的类型，可选  | ReactNode | -  |    |
+| role      | 容器role  | React.AriaRole | -  |    |
+| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait`、`process`、`finish`、`error`、`warning` | string | wait  |  |
+| style  | 样式 | CSSProperties |  |   |
+| title   | 标题  | ReactNode | -  |   |
+| onClick     | 点击回调  | function | -   |    |
+| onKeyDown     | 回车事件回调  | function | -   |    |
 
 ## 设计变量
 <DesignToken/>

content/navigation/tabs/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 39
+order: 40
 category: Navigation
 title: Tabs
 subTitle: Tabs
@@ -560,6 +560,21 @@ style | style object | CSSProperties | None |
 tab | Tab page bar display text | ReactNode | None |
 closable | whether user can close the tab **>=2.1.0** | boolean | false |
 
+
+## Accessibility
+
+### ARIA
+- About role
+  - TabBar has a role of `tablist`
+  - Tab in TabBar has a role of `tab`
+  - TabPane has a role of `tabpanel`
+
+- aria-orientation: Indicates TabBar's orientation, can be `vertical` or `horizontal`. When tabPosition is `left`, aria-orientation will be `vertical`, when tabPosition is `top`, aria-orientation will be `horizontal`.
+- aria-disabled: When TabPane is disabled, the related Tab's aria-disabled will be set to true.
+- aria-selected: Indicates whether the Tab is selected.
+- aria-controls: Indicates the TabPane controlled by the Tab
+- aria-labelledby: Indicates the element labels the TabPane
+
 ## Design Token
 
 <DesignToken/>

content/navigation/tabs/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 39
+order: 40
 category: 导航类
 title: Tabs 标签栏
 icon: doc-tabs
@@ -585,6 +585,20 @@ style     | 样式对象         | CSSProperties             | 无     |
 tab       | 标签页栏显示文字 | ReactNode | 无     |
 closable  | 允许关闭tab **>=2.1.0**| boolean | false |
 
+## Accessibility
+
+### ARIA
+- 关于 role
+  - TabBar 对应的 role 为 `tablist`
+  - TabBar 中的 Tab 对应的 role 为 `tab`
+  - TabPane 对应的 role 为 `tabpanel`
+
+- aria-orientation: 表明 TabBar 的方向，有 `vertical` 和 `horizontal` 两种。当传入 tabPosition 为 left 时，aria-orientation 会被设置为 `vertical`，tabPosition 为 top 时，设置为 `horizontal`
+- aria-disabled: 当 TabPane 设置为 disabled 时，对应 Tab 的 aria-disabled 会被设置为 true
+- aria-selected: 表明 Tab 是否被选中
+- aria-controls: 指向 Tab 标签所控制的 TabPane
+- aria-labelledby: 指向设置 TabPane 标签的元素
+
 ## 设计变量
 
 <DesignToken/>

content/navigation/tree/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 40
+order: 41
 category: Navigation
 title:  Tree
 subTitle: Tree
@@ -1305,13 +1305,13 @@ import { Tree, Checkbox } from '@douyinfe/semi-ui';
         return (
             <li
                 className={className}
-                role="treenode"
+                role="treeitem"
                 onClick={isLeaf ? onCheck : onExpand}
                 onContextMenu={onContextMenu}
                 onDoubleClick={onDoubleClick}
             >
                 {isLeaf ? null : expandIcon}
-                {isLeaf ? <div onClick={onCheck}>
+                {isLeaf ? <div onClick={onCheck} role='checkbox' tabIndex={0} aria-checked={checkStatus.checked}>
                     <Checkbox
                         indeterminate={checkStatus.halfChecked}
                         checked={checkStatus.checked}
@@ -1416,7 +1416,7 @@ import { Tree } from '@douyinfe/semi-ui';
         return (
             <li
                 className={className}
-                role="treenode"
+                role="treeitem"
                 onClick={isLeaf ? onClick : onExpand}
             >
                 {isLeaf ? null : expandIcon}
@@ -1596,7 +1596,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
         return (
             <li
                 className={className}
-                role="treenode"
+                role="treeitem"
                 onClick={onClick}
                 style={style}
             >
@@ -1775,7 +1775,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
         return (
             <li
                 className={className}
-                role="treenode"
+                role="treeitem"
                 onClick={onClick}
                 style={style}
             >
@@ -1894,5 +1894,22 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 ### Ref Method
 - search(sugInput) => void
 
+
+## Accessibility
+
+### ARIA
+
+- Tree supports passing in `aria-label` to indicate the role of the Tree;
+- Tree will set `aria-disabled`, `aria-checked`, `aria-selected`, and `aria-level` for each child node to indicate the node status and level;
+- Tree will set `role` to `tree` and `treeitem` for corresponding parts.
+
+Demo:
+```typescript
+    <Tree
+        /* other attributes */
+        aria-label='example tree'
+    />
+```
+
 ## Design Tokens
 <DesignToken/>

content/navigation/tree/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 40
+order: 41
 category: 导航类
 title:  Tree 树形控件
 icon: doc-tree
@@ -1330,11 +1330,11 @@ import { Tree, Checkbox } from '@douyinfe/semi-ui';
         return (
             <li
                 className={className}
-                role="treenode"
+                role="treeitem"
                 onClick={isLeaf ? onCheck : onExpand}
             >
                 {isLeaf ? null : expandIcon}
-                {isLeaf ? <div onClick={onCheck}>
+                {isLeaf ? <div onClick={onCheck} role='checkbox' tabIndex={0} aria-checked={checkStatus.checked}>
                     <Checkbox
                         indeterminate={checkStatus.halfChecked}
                         checked={checkStatus.checked}
@@ -1439,7 +1439,7 @@ import { Tree } from '@douyinfe/semi-ui';
         return (
             <li
                 className={className}
-                role="treenode"
+                role="treeitem"
                 onClick={isLeaf ? onClick : onExpand}
             >
                 {isLeaf ? null : expandIcon}
@@ -1615,7 +1615,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
         return (
             <li
                 className={className}
-                role="treenode"
+                role="treeitem"
                 onClick={onClick}
                 style={style}
             >
@@ -1793,7 +1793,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
         return (
             <li
                 className={className}
-                role="treenode"
+                role="treeitem"
                 onClick={onClick}
                 style={style}
             >
@@ -1909,8 +1909,24 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 | itemSize | 每行的treeNode的高度，必传 | number | - |
 | width | 宽度值 | number\|string | '100%' |
 
+### Ref 方法
+- search(sugInput) => void
+
+## Accessibility
+
+### ARIA
+
+- Tree 支持传入 `aria-label` 来表示该 Tree 作用;
+- Tree 会自动为每个子节点分别设置 `aria-disabled`、`aria-checked`、`aria-selected`、`aria-level` 来表明节点状态及层级;
+- Tree 会自动为对应部分分别设置 `role` 为 `tree`、`treeitem`。
+
+示例:
+```typescript
+    <Tree
+        /* other attributes */
+        aria-label='example tree'
+    />
+```
+
 ## 设计变量
 <DesignToken/>
-
-### Ref 方法
-- search(sugInput) => void

content/order.js

@@ -3,6 +3,7 @@ const order = [
     'getting-started',
     'customize-theme',
     'dark-mode',
+    'accessibility',
     'changelog',
     'update-to-v2',
     'faq',

content/other/configprovider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 67
+order: 68
 category: Other
 title: ConfigProvider
 icon: doc-configprovider

content/other/configprovider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 67
+order: 68
 category: 其他
 title:  Configprovider 全局配置
 icon: doc-configprovider

content/other/locale/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 68
+order: 69
 category: Other
 title: LocaleProvider
 subTitle: LocaleProvider

content/other/locale/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 68
+order: 69
 category: 其他
 title:  LocaleProvider 多语言
 icon: doc-i18n

content/show/avatar/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 41
+order: 42
 category: Show
 title:  Avatar
 subTitle: avatar
@@ -83,10 +83,12 @@ import { Avatar } from '@douyinfe/semi-ui';
 () => (
     <div>
         <Avatar
+            alt="a cat"
             src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
             style={{ margin: 4 }}
         />
         <Avatar
+            alt="a cat"
             size="small"
             src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
             style={{ margin: 4 }}
@@ -252,6 +254,45 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui';
 );
 ```
 
+## Accessibility
+
+- `alt`：When using a picture avatar, please use the `alt` attribute to explain the content of the picture
+
+```jsx
+import React from 'react';
+import { Avatar } from '@douyinfe/semi-ui';
+
+() => {
+    return (
+        <>
+            {/* Good case */ }
+            <Avatar
+                alt="A cut cat"
+                src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                style={{ margin: 4 }}
+            />
+            <Avatar
+                alt="Jiang Pengzhi"
+                src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                style={{ margin: 4 }}
+            />
+            {/* Bad case: empty content */ }
+            <Avatar
+                alt=""
+                src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                style={{ margin: 4 }}
+            />
+            {/* Bad case: no need to include picture or image in alt */ }
+            <Avatar
+                alt="Picture of Jiang Pengzhi"
+                src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                style={{ margin: 4 }}
+            />
+        </>
+    );
+};
+```
+
 ## API Reference
 
 ---
@@ -260,7 +301,7 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui';
 
 | Properties   | Instructions                                                                                                                                                                              | type           | Default  |
 | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -------- |
-| alt          | Alternative text when the image cannot be displayed                                                                                                                                       | string         | -        |
+| alt          | Defines an alternative text description of the image.                                                                                                                                       | string         | -        |
 | className    | Class name                                                                                                                                                                                | string         | -        |
 | color        | Color of the avatar, one of `amber`, `blue`, `cyan`, `green`, `grey`, `indigo`, `light-blue`, `light-green`, `lime`, `orange`, `pink`, `rain`, `red`, `teal`, `violet`, `yellow`, `white` | string         | `grey`   |
 | hoverMask    | Avatar content overlay when hover                                                                                                                                                         | ReactNode     | -        |

content/show/avatar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 41
+order: 42
 category: 展示类
 title: Avatar 头像
 icon: doc-avatar
@@ -82,10 +82,12 @@ import { Avatar } from '@douyinfe/semi-ui';
 () => (
     <div>
         <Avatar
+            alt="a cat"
             src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
             style={{ margin: 4 }}
         />
         <Avatar
+            alt="a cat"
             size="small"
             src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
             style={{ margin: 4 }}
@@ -254,6 +256,44 @@ import { AvatarGroup, Avatar } from '@douyinfe/semi-ui';
 );
 ```
 
+## Accessibility
+
+- `alt`：使用图片头像时，请使用 `alt` 属性解释图片的内容
+
+```jsx
+import React from 'react';
+import { Avatar } from '@douyinfe/semi-ui';
+
+() => {
+    return (
+        <>
+            {/* Good case */ }
+            <Avatar
+                alt="一只可爱的猫咪"
+                src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                style={{ margin: 4 }}
+            />
+            <Avatar
+                alt="姜鹏志"
+                src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                style={{ margin: 4 }}
+            />
+            {/* Bad case */ }
+            <Avatar
+                alt=""
+                src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                style={{ margin: 4 }}
+            />
+            <Avatar
+                alt="姜鹏志的图片"
+                src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                style={{ margin: 4 }}
+            />
+        </>
+    );
+};
+```
+
 ## API 参考
 
 ---
@@ -262,7 +302,7 @@ import { AvatarGroup, Avatar } from '@douyinfe/semi-ui';
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| alt | 图像无法显示时的替代文本 | string | - |
+| alt | 图像的替代文本描述 | string | - |
 | className | 类名 | string | - |
 | color | 指定头像的颜色，支持 `amber`、 `blue`、 `cyan`、 `green`、 `grey`、 `indigo`、 `light-blue`、 `light-green`、 `lime`、 `orange`、 `pink`、 `purple`、 `red`、 `teal`、 `violet`、 `yellow` | string | `grey` |
 | hoverMask | hover 时头像内容覆盖层 | ReactNode | - |

content/show/badge/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 42
+order: 43
 category: Show
 title:  Badge
 subTitle: Badge

content/show/badge/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 42
+order: 43
 category: 展示类
 title:  Badge 徽章
 icon: doc-badge

content/show/calendar/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 43
+order: 44
 category: Show
 title:  Calendar
 subTitle: Calendar

content/show/calendar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 43
+order: 44
 category: 展示类
 title: Calendar 日历
 icon: doc-calendar

content/show/card/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 44
+order: 45
 category: Show
 title:  Card
 subTitle: Card
@@ -73,6 +73,7 @@ function Demo() {
                     title="Semi Doc" 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -183,6 +184,7 @@ function Demo() {
                     title="Semi Doc" 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -214,6 +216,7 @@ function Demo() {
                     title="Semi Doc" 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -258,6 +261,7 @@ function Demo() {
                     description="Easily manage your project icons and easily upload, update and share a series of project icons." 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -462,6 +466,7 @@ function Demo() {
                         avatar={
                             <Skeleton placeholder={<Skeleton.Avatar />} loading={loading}>
                                 <Avatar 
+                                    alt='Card meta img'
                                     size="default"
                                     src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                                 />
@@ -691,6 +696,12 @@ function Demo() {
 |style      |Meta style            |CSSProperties|-       |1.21.0 |
 |title      |title                 |ReactNode    |-       |1.21.0 |
 
+## Accessibility
+
+- Card supports the input of `aria-label` to indicate the function of the Card;
+- When Card loading, `aria-busy` will be turned on;
+- Card is a container-type component, and any elements inside the card need to follow their respective accessibility guidelines.
+
 ## Design Tokens
 <DesignToken/>
 

content/show/card/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 44
+order: 45
 category: 展示类
 title:  Card 卡片
 subTitle: 卡片
@@ -73,6 +73,7 @@ function Demo() {
                     title="Semi Doc" 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -183,6 +184,7 @@ function Demo() {
                     title="Semi Doc" 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -214,6 +216,7 @@ function Demo() {
                     title="Semi Doc" 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -258,6 +261,7 @@ function Demo() {
                     description="全面、易用、优质" 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -462,6 +466,7 @@ function Demo() {
                         avatar={
                             <Skeleton placeholder={<Skeleton.Avatar />} loading={loading}>
                                 <Avatar 
+                                    alt='Card meta img'
                                     size="default"
                                     src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                                 />
@@ -691,6 +696,12 @@ function Demo() {
 |style      |内联样式|CSSProperties|-     |1.21.0|
 |title      |标题   |ReactNode    |-     |1.21.0|
 
+## Accessibility
+
+- Card 支持传入 `aria-label` 来表示该 Card 作用；
+- Card loading 时，将开启 `aria-busy`；
+- Card 为容器型组件，卡片内部的任何元素需要遵循各自的可访问性指南。
+
 ## 设计变量
 <DesignToken/>
 

content/show/collapse/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 45
+order: 46
 category: Show
 title: Collapse
 subTitle: Collapse
@@ -149,6 +149,20 @@ import { IconCopy } from '@douyinfe/semi-icons';
 | reCalcKey | When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering. | string \| number |-| 1.5.0 |
 | style | inline CSS style | CSSProperties | - ||
 
+
+## Accessibility
+
+### ARIA
+
+- The `aria-label` of the component is'Collapse'
+- The button on the right side of the panel header is set to `aria-hidden=true`
+- The extra section `aria-label` of the panel header is set to'Extra of collapse header'
+- Panel header `aria-label` is'Collapse panel'
+- The interactive part of the panel header is set to the `aria-owns` value corresponding to the panel content
+- Panel content `aria-label` is set to'Collapse content'
+- The content of the panel is set with `aria-hidden`, and its value is automatically switched between true and false with the display of the panel content
+
+
 ## Design Tokens
 
 <DesignToken/>

content/show/collapse/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 45
+order: 46
 category: 展示类
 title: Collapse 折叠面板
 icon: doc-accordion
@@ -149,6 +149,22 @@ import { IconCopy } from '@douyinfe/semi-icons';
 | reCalcKey | 当 reCalcKey 改变时，将重新计算子节点的高度，用于优化动态渲染时的计算 | string \| number |无| 1.5.0  |
 | style     | 内联 CSS 样式                                                         | CSSProperties                 |  无  |    |
 
+
+## Accessibility
+
+### ARIA
+
+- 组件的 `aria-label` 为 'Collapse'
+- 面板 header 右侧按钮 设置了 `aria-hidden=true`
+- 面板 header 的 extra 部分  `aria-label` 设置为 'Extra of collapse header'
+- 面板 header `aria-label` 为 'Collapse panel'
+- 面版 header 可交互部分 设置了 `aria-owns` 值为对应面板内容
+- 面板内容 `aria-label`设置为 'Collapse content'
+- 面版内容 设置了 `aria-hidden` 随面板内容展现隐藏其值在 true 和 false 之间自动切换
+
+
+
+
 ## 设计变量
 
 <DesignToken/>

content/show/collapsible/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 46
+order: 47
 category: Show
 title: Collapsible
 subTitle: Collapsible
@@ -187,6 +187,30 @@ import { Collapsible, Button } from '@douyinfe/semi-ui';
 | motion | Toggle whether to turn on animation | Motion | `true` | - |
 | reCalcKey | When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering. | number \| string | - | 1.5.0 |
 | style | Style object | CSSProperties | - | 0.34.0 |
+| aria-controls | [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | string |-| 2.3.0|
+
+## Accessibility
+
+### ARIA
+
+- Collapsible has `id` props, the value passed in will be set as the id of the wrapper element, which can be used with other components' `aria-controls` to indicate the control relationship, see the usage example below.
+
+```jsx
+import Collapsible from './index';
+
+
+()=>{
+    const collapseId = 'myCollapsible';
+    const [visible,setVisible]=useState(false);
+    return <>
+        <Button onClick={()=>setVisible(!visible)} aria-controls={`${collapseId}`}>{visible?'hide':'show'}</Button>
+        <Collapsible isOpen={visible} id={collapseId}>
+            <div>hide content</div>
+        </Collapsible>
+    </>
+}
+
+```
 
 ## FAQ
 

content/show/collapsible/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 46
+order: 47
 category: 展示类
 title: Collapsible 折叠
 icon: doc-collapsible
@@ -218,6 +218,29 @@ import { Collapsible, Button } from '@douyinfe/semi-ui';
 | motion | 是否开启动画 | Motion | `true` | - |
 | reCalcKey | 当 reCalcKey 改变时，将重新计算子节点的高度，用于优化动态渲染时的计算 | number \| string | - | 1.5.0 |
 | style | 样式 | CSSProperties | - | 0.34.0 |
+| id | id | html id string type | - | 2.3.0 |
+## Accessibility
+
+### ARIA
+
+-   Collapsible 具有 `id` props，传入的值会被设置为 wrapper 元素的id, 可以配合其他组件的 `aria-controls` 指明控制关系, 见下方使用示例。
+
+```jsx
+import Collapsible from './index';
+
+
+()=>{
+    const collapseId = 'myCollapsible';
+    const [visible,setVisible]=useState(false);
+    return <>
+        <Button onClick={()=>setVisible(!visible)} aria-controls={`${collapseId}`}>{visible?'hide':'show'}</Button>    
+        <Collapsible isOpen={visible} id={collapseId}>
+            <div>hide content</div>
+        </Collapsible>
+    </>
+}
+
+```
 
 ## FAQ
 

content/show/descriptions/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 47
+order: 48
 category: Show
 title: Description
 subTitle: Descriptions

content/show/descriptions/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 47
+order: 48
 category: 展示类
 title: Descriptions 描述列表
 icon: doc-descriptions

content/show/dropdown/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 48
+order: 49
 category: Show
 title: Dropdown
 subTitle: Dropdown
@@ -415,6 +415,13 @@ function DropdownEvents() {
 }
 ```
 
+## Accessibility
+
+### ARIA
+
+- Dropdown.Menu `role` is set to `menu`, `aria-orientatio` is set to `vertical`
+- Dropdown.Item `role` is set to `menuitem`
+
 ## API Reference
 
 ### Dropdown