WAI-AREAを利用してアクセシビリティ向上

最近すごく重要視されてるアクセシビリティについて学習した内容書いていこうと思います。
主にキーボード操作とセマンティクスに集中して書いていきたいと思います。

普段フロントエンドを担当していることもありますので、form内のタグやarea-*についても改めて知ることができました。
中には、a11yってゆうキーワードが入ったプラグインやlintなども見かける方も多くいらっしゃるかと思います。
自分もa11yに対応しているプラグインを探すようにしていますし、なければ実装しています。

特に、Vue.jsやReact.jsに対応したプラグインも数多く存在していますし、React.jsはこういったページを設けていますし、推薦プラグインも紹介されています。ご存知な方もいらっしゃるとでしょう。

今回僕が学習したのは、主にシンプルな内容です。

アクセシビリティが必要な理由

アクセシビリティはアクセス可能とゆう意味になります。体が健常者に比べ不自由な方向けだけのように思われますが、実際は違います。健常者でも体が不自由にあってしまう時があるかと思います。
例えば、マウスを使って細かい作業がしづらくなってしまうなど。
全員を同一に思い同じ機会を与えるものになります。とある場所では法律になっているそうです。

セマンティック HTML(意味的 HTML)

ボタンを実装するにあたって、意味がわかるのは

<div>ボタン</div>
<p>ボタン</p>

<button>ボタン</button>

場合によっては変わるかと思いますが、大体が後者になるかと思います。
後者ではフォーカスがあたりますので、キーボード操作だけで操作することができます。
他にも

<a href="#">アンカー</a>

があります。
まだまだたくさんあります。form内のタグはほとんどキーボードによる操作が可能になっていますし、
様々なプラグインでさらに利用しやすくしてます。
主にwebサービスに利用しやすいかと思います。
bootstrapや
react-hooks-formなど

セマンティックにスポットをあてると以下かと思います。

<header>
　ヘッダータグ
 <nav>ナビゲーション</nav>
</header>
 <main>
  <section>各セクション</section>
  <article>独立した括り</article>
　<aside></aside>
 </main>
<footer>ヘッダータグ</footer>

代表的でよく利用するタグかと思います。

WAI-ARIAが必要な理由

支援技術がwebページの内容を正しく詳細にしれるようにするもので、適切な情報を閲覧者に伝えるため。

大きく分類すると、各要素の「Role (役割)」「State (状態)」「Property (特性)」

Roles (役割)
　何をするのかを定義します。
Property (特性)
　要素の性質を定義
State (状態)
　要素の現在の状態を定義

以下が一覧になります。
https://momdo.github.io/wai-aria/states_and_properties.html
https://accessible-usable.net/2014/04/entry_140415.html

以上になります。