アクセシビリティ向上のためにいつものコーディングにプラスワンしよう

昨今、Webサイトにおけるアクセシビリティの重要性はますます高まっています。
それに伴い、Webサイト制作においてもアクセシビリティを考慮したコーディングが求められる機会が増えてきています。
しかし、必ずしも難しく考える必要はありません。
今まで通りのコーディングにちょっとした配慮を加えるだけで、十分にアクセシビリティ対応が可能です。
今回は、私が最近意識しているアクセシビリティ対応のコーディング方法について解説します。

最初に。WAI-ARIAについて

WAI-ARIA（ウェイアリア）とは、Web Accessibility Initiative Accessible Rich Internet Applicationsの略で、W3Cが定めたアクセシビリティ向上のための仕様です。主に、スクリーンリーダーを使用するユーザーやキーボード操作を行うユーザーに対して、Webコンテンツの状態や動作を正しく伝える役割を持ちます。

例えば、アコーディオンやタブといったインタラクティブなUI要素の開閉状態や選択状態を、支援技術が正しく認識できるようにするために利用されます。
基本的にはHTMLに標準で備わっている要素を優先し、それでは対応できない場合にWAI-ARIAを補助的に活用するのが適切です。

通常のコーディングにちょっとしたWAI-ARIA対応やキーボード対応、スクリーンリーダー対応を加えるだけで、より多くのユーザーにとって快適な体験を提供できるようになります。

意味を持ったHTMLタグを使い分ける

HTML5から登場した「セマンティックなHTML（意味が明確なタグ）」を使うことで、ページの構造がより明確になり、支援技術にも正しく意味が伝わるようになります。
以下は、セマンティックなタグを使った基本的な構造の例です。

<div id="wrapper">
  <header>ヘッダー</header>
  <main>
    メインコンテンツ
  </main>
  <footer>フッター</footer>
</div>

スクリーンリーダー用のクラスを作る

スクリーンリーダー専用のクラスを作成しておくと、アクセシビリティの向上に役立ちます。
以下のようなクラスを追加します。

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

使用例：リンク先情報のスクリーンリーダー対応

デザイン上では別窓アイコンやPDFアイコンが表示されている場合でも、スクリーンリーダーではそのリンクの種類が分からないことがあります。
このような場合に、上記のsr-onlyクラスを使用しスクリーンリーダーにリンクの種類を伝えることができます。

<a href="https://www.mitchiri-neko.com/" target="_blank">みっちりねこ公式サイト<span class="sr-only">新しいウィンドウで開きます</span></a>
<a href="/pdf/hoge.pdf" target="_blank">サイト仕様書<span class="sr-only">新しいウィンドウでPDFを開きます</span></a>

キーボードフォーカス時にアウトラインを表示する

マウス操作時にはアウトラインを非表示にし、キーボードフォーカス時のみアウトラインを表示するようにします。

:where(:focus) {
  outline: none;
}

:where(:focus-visible) {
  outline: none;
}

:where(:focus-visible):is(button, a, input, textarea, [tabindex="0"]) {
  outline: 2px solid CanvasText;
  box-shadow: 0 0 0 2px Canvas;
}

ボタン（button）とリンク（a）を使い分ける

「ボタン（button）」と「リンク（a）」は、それぞれ役割が異なります。
ボタンは主にユーザーのアクションをトリガーするために使用し、リンクはページ間の遷移や外部サイトへのリンクに使用します。
※なんでこれを書いてるかっていうとなんでもかんでもaタグで実装していた時期があったからです。。

展開メニュー（アコーディオン）

展開メニューを作成する際は、WAI-ARIAを使って展開ボタンと展開コンテンツの関連付けを行い、要素の状態を正しく伝えるようにします。

<button aria-expanded="false" aria-controls="panel1" id="accordion-button">
  メニューを開く
</button>
<div id="panel1" aria-hidden="true">
  <p>アコーディオンの内容</p>
</div>

ポイント

• aria-expandedでボタンの開閉状態を示す。
• aria-controlsでボタンが制御する要素を指定する。
• aria-hiddenで非表示時に支援技術に認識されないようにする。

JavaScriptを使用して動作を追加する際は、aria-expandedとaria-hiddenの値を適切に切り替えましょう。
aria-hidden="true"だけでは要素は表示しているのでdisplay属性の切り替えも同時に行います。

.tabpanel[aria-hidden="true"] {
  display: none;
}

タブ切替

<div class="tabs">
  <div role="tablist">
    <button role="tab" aria-selected="true" id="tab1" aria-controls="panel1">タブ1</button>
    <button role="tab" aria-selected="false" id="tab2" aria-controls="panel2">タブ2</button>
  </div>
  <div id="panel1" role="tabpanel" aria-labelledby="tab1" aria-hidden="false">
    <p>タブ1の内容</p>
  </div>
  <div id="panel2" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">
    <p>タブ2の内容</p>
  </div>
</div>

ポイント

• role="tablist"を親要素に設定
• role="tab"でタブ要素を定義し、aria-selectedで選択状態を示す
• role="tabpanel"でタブの内容を定義し、aria-labelledbyで関連付け

JavaScriptを使用して動作を追加する際は、aria-selectedとaria-hiddenの値を適切に切り替えましょう。

アンカーリンクのキーボード対応をする

アンカーリンクを使用して、要素間のジャンプを実装する際は見た目だけではなくフォーカス位置も移動させましょう。
下記の例ではtabindex="-1”にしてからフォーカスを移動させその後tabindex属性を削除する、ということをしています。

$(this.scrollElm).animate({
  scrollTop: elem.offset().top - headerH
}, delay, "swing", function () {
  elem.attr("tabindex", "-1").focus().attr("tabindex", "");
});

スキップリンクを設置する

キーボード操作のユーザーが素早くコンテンツへ移動できるようにスキップリンクを設置しましょう。
キーボードフォーカス時にリンクを表示すると、さらに使いやすくなります。

<a href="#main-content" class="sr-only sr-only-focusable">メインコンテンツへスキップ</a>

aria-currentで現在位置を示す

ナビゲーションメニューにおいて、現在のページをスクリーンリーダーに伝えるためにaria-currentを使用します。

<li><a href="/">HOME</a></li>
<li><a href="/company/" class="is-current" aria-current="page">会社情報</a></li>
<li><a href="/product/">事業紹介</a></li>
<li><a href="/cotanct/">お問い合わせ</a></li>

aria-labelでスクリーンリーダー用のテキストを追加する

画像アイコンやピクトなど、見た目からの情報を支援技術に伝えるためにaria-labelを追加します。
aria-labelが読まれる際は、内部のテキストが読まれないことに注意しましょう。

<a href="pageTop" aria-label="ページトップにジャンプします"></a>

scopeで表の構造を明確にする

表（table）を使用するさいは、スクリーンリーダーに適切に情報を伝えられるようにするためにscope属性を設定しましょう。
scope は見出し（th）がどのデータ（td）に対応するのかを設定することができます。

<table>
  <thead>
    <tr>
      <th scope="col">商品名</th>
      <th scope="col">価格</th>
      <th scope="col">在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">りんご</th>
      <td>100円</td>
      <td>20個</td>
    </tr>
    <tr>
      <th scope="row">バナナ</th>
      <td>150円</td>
      <td>30個</td>
    </tr>
  </tbody>
</table>

ポイント

• scope="col"を指定すると、そのthが縦方向（列）の見出しであることを示す。
• scope="row"を指定すると、そのthが横方向（行）の見出しであることを示す。

画像のalt属性は方向性を決めておく

画像に対するalt属性の追加はユーザビリティにおいて重要な一部です。
特に、画像がコンテンツの一部である場合、適切な代替テキストを設定することで、スクリーンリーダーを使用するユーザーに対して内容を伝えることができます。

ただし、どのような内容のaltテキストを設定するか、その方針については事前に確認し、一貫した対応を取ることが大切です。
例えば、画像にキャプションがある場合、altは空にしておくべきか、それともキャプションとは別にaltを設定するべきか、といった点です。

日々のコーディングにプラスワンの配慮を加えることで、アクセシビリティ対応されたウェブページにすることができるんだ。
そんな風に思っていただければ幸いです。
より多くの人に優しい、そして検索BOTにも優しい（笑）サイトを1つでも多く作成していきたいですね。

参考リンク

• アクセシビリティにおける強調要素（strong・em）の使い分け

関連サービス

• フレンセルのWebアクセシビリティ診断サービス新しいウィンドウで開きます