Day15 无障碍功能

无障碍网页是什麽

首先来介绍无障碍网页的概念，无障碍网页并不只是像我们生活中常听到的无障碍厕所、无障碍空间等给身心障碍人士使用的服务，而是泛指尽可能让更多人去浏览你的网站。因此除了上述提到的身心较不自由的族群以外，使用行动装置(平板、手机)、或是网速较低的也是无障碍网页的服务对象。

W3c针对无障碍网页，订出了详尽的规范文件Web Content Accessibility Guidelines，有兴趣和很闲的人可以研究一下(?
React针对这份文件，提出许多可以符合无障碍网页的相关HTML标签。

WAI-ARIA

React支援所有的**aria-.**标签，使用时须注意写法为连字符号结合，而非React常见的驼峰式命名。

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

Semantic HTML

Semantic HTML(行内文字语义化)是无障碍网页的基础，使用不同的HTML标签让连览器能正确读取网站内容，增加网站的曝光度的同时，一般使用者能更简单的造访网站。

有时候为了将react元素渲染到html架构里，常常会在外层包覆<div>标签，但这会让部分架构不合乎HTML规范，如（<ol>、<ul>、<dl>、<table>等），这时候可以使用React Fragment将数个HTML元素包在一起。
Fragment留待日後再做讲解。

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>
  );
}