Markdown与HTML转换工具 | Markdown and HTML conversion tool

适用于Markdown与HTML代码转换，可正向或反向转换。Markdown整形，以标准Markdown格式输出。

---
id: accessibility
title: 无障碍辅助功能
permalink: docs/accessibility.html
---

## 为什么我们需要无障碍辅助功能？ {#why-accessibility}

网络无障碍辅助功能（Accessibility，也被称为 [**a11y**](https://en.wiktionary.org/wiki/a11y)，因为以 A 开头，以 Y 结尾，中间一共 11 个字母）是一种可以帮助所有人获得服务的设计和创造。无障碍辅助功能是使得辅助技术正确解读网页的必要条件。

React 对于创建可访问网站有着全面的支持，而这通常是通过标准 HTML 技术实现的。

## 标准和指南 {#standards-and-guidelines}

### WCAG {#wcag}

[网络内容无障碍指南（Web Content Accessibility Guidelines，WCAG）](https://www.w3.org/WAI/intro/wcag) 为开发无障碍网站提供了指南。

下面的 WCAG 检查表提供了一些概览：

- [Wuhcag 提供的 WCAG 检查表（WCAG checklist from Wuhcag）](https://www.wuhcag.com/wcag-checklist/)
- [WebAIM 提供的 WCAG 检查表（WCAG checklist from WebAIM）](https://webaim.org/standards/wcag/checklist)
- [A11Y Project 提供的检查表（Checklist from The A11Y Project）](https://a11yproject.com/checklist.html)

### WAI-ARIA {#wai-aria}

[网络无障碍倡议 - 无障碍互联网应用（Web Accessibility Initiative - Accessible Rich Internet Applications）](https://www.w3.org/WAI/intro/aria) 文件包含了创建完全无障碍 JavaScript 部件所需要的技术。

注意：JSX 支持所有 `aria-*` HTML 属性。虽然大多数 React 的 DOM 变量和属性命名都使用驼峰命名（camelCased），但 aria-* 应该像其在 HTML 中一样使用带连字符的命名法（也叫诸如 hyphen-cased，kebab-case，lisp-case)。

```javascript{3,4}
<input
  type="text"
  aria-label={labelText}
  aria-required="true"
  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>
```

## 语义化的 HTML {#semantic-html}
语义化的 HTML 是无障碍辅助功能网络应用的基础。
利用多种 HTML 元素来强化您网站中的信息通常可以使您直接获得无障碍辅助功能。

- [MDN 的 HTML 元素参照（MDN HTML elements reference）](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)

有时，语义化的 HTML 会被破坏。比如当在 JSX 中使用  `<div>`  元素来实现 React 代码功能的时候，又或是在使用列表（`<ol>`， `<ul>` 和 `<dl>`）和 HTML `<table>` 时。
在这种情况下，我们应该使用 [React Fragments](/docs/fragments.html) 来组合各个组件。

举个例子，

```javascript{1,5,8}
import React, { Fragment } from 'react';

function ListItem({ item }) {
  return (
    <Fragment>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </Fragment>
  );
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <ListItem item={item} key={item.id} />
      ))}
    </dl>
  );
}
```

Markdown to HTML

Markdown 测试代码：Markdown、标题引用、图片引用、Code引用

# Markdown标题一级h1

## Markdown代码整形锚点 {#markdown-html}

Markdown and HTML conversion tool，也被称为 [**Markdown与HTML转换工具**](https://www.onexin.net/markdown.php)

以下是几个常用的Markdown代码：

# 标题内容，表示设置标题，一级标题对应 1 个 # 号，二级对应 2 个，依此类推，共可设置 6 级标题；
**内容** ，表示加粗；
*内容* ，表示斜体；
> 内容，表示开始引用；
* 内容，表示开始生成无序列表（*可用+或-），数字加英文句号生成有序列表；
[显示文本](链接地址)，表示插入超链接
![图片描述](图片链接地址)，表示插入图片
--- ，表示空白行生成分割线，需连用三个或三个以上的减号

注：测试代码来源于 https://zh-hans.reactjs.org/docs/accessibility.html

Markdown与HTML转换工具 v3.0

Markdown 测试代码：Markdown、标题引用、图片引用、Code引用

以下是几个常用的Markdown代码：