Introduction
この記事は Nikkei Advent Calendar の 4 日目の記事です。 Web チームの伊藤です。
この記事では、電子版フロントエンドを実装する上でアクセシビリティに配慮した実装を行った箇所を具体例を挙げて紹介します。
Web アクセシビリティについて
Web アクセシビリティは通常、「様々な利用者が Web サイトを使えるようにする」ものだと言われています。
具体的な手法としては、WCAG及びその達成方法集に則った実装を行うことが挙げられます。 独自にガイドラインを制定している会社もありますが、実際には、これらの基準をすべて満たすことは難しいでしょう。
比較的簡単に取り組めるところでは、Lighthouse のアクセシビリティスコアを上げることが考えられ、新規に実装する場合には、レビューなどで Lighthouse のスコアを上げる形になります。
本エントリでは、日経電子版で Lighthouse スコアだけでは表せないアクセシビリティ向上に取り組んだ例を紹介します。
フォローボタン
フォローボタンは、記事のトピックを「フォロー」することで Myニュースで閲覧することができるようにする機能です。 このボタンで行ったことは以下です。
aria-pressedの実装- Popover 実装
role: dialogの実装- キーボードトラップの実装
aria-pressed の実装
フォローボタンはクリックすると「フォロー済み」という表記に変わる2つの状態を持つトグルボタンです。
これを表現するため、html を <button type="button" aria-pressed="false"> のようにしておき、ボタンをクリックすると aria-pressed 属性の値を true に変えるという処理を入れています。
aria-pressed は button role で利用できる属性の1つで、これを利用することにより、普通のボタンにトグルボタンという意味を支援技術に伝えることができます。
ここでいう「支援技術」はスクリーンリーダーや音声ブラウザといった、障害者が Web を利用する際に用いるハードウェア・ソフトウェアを指します。
詳しくは W3C の aria-pressed の項を参照してください。
https://www.w3.org/TR/wai-aria-1.1/#aria-pressed
Popover 実装
フォロー機能は有料会員のみに提供しており、ログインしていないユーザには次の画像のような Popover を表示しています。
こういった Popover の実装時に行っているのが role: dialog と キーボードトラップです。
role: dialog
role: dialog はメインウィンドウの子ウィンドウであることを示す WAI-ARIA role です。
Popover 内はページのメインウィンドウとは別のコンテキストを持つ UI です。
それを明示するため、role: dialog を付けました。
以下に実装例を示します。
<div role="dialog" aria-labelledby="title">
<h2 id="title">タイトル</h2>
</div>
このように指定すると、NVDA といったスクリーンリーダーが「タイトル ダイアログ」と読んでくれるようになります。
詳しくは W3C の dialog の項を参照してください。
https://www.w3.org/TR/wai-aria-1.1/#dialog
キーボードトラップ
キーボードトラップはユーザがキーボードのみで Webページを操作できるようにすることを支援するために実装します。
ページ及びダイアログ内はナイーブに実装すれば Tab キーで遷移できるようにできますが、ダイアログ内の最後のリンクまたはボタンで Tab キーを押すと、ダイアログの外側のページにフォーカスが移ってしまいます。 このフォーカスの移動がダイアログ内に閉じるようにするのがキーボードトラップです。
「Enter」キーでボタンをクリックするとダイアログ内にフォーカスが移動し、「Tab」キーでダイアログ内を移動、「Esc」キーでダイアログを閉じるという一連の操作をキーボードのみで行えるようにすることをサポートします。
実際の動作は次の gif 画像のようになります。
詳しくは W3C の No Keyboard Trap の項を参照してください。
https://www.w3.org/TR/WCAG21/#no-keyboard-trap
余談ですが、実は Popover を閉じる処理は「Ctrl + [」でもできるようにしています。 私は vim でエスケープする時に「Esc」キーではなく「Ctrl+[」を使っていて、このほうがホームポジションを崩さずに入力できるので便利です。vimに慣れている方はぜひ試してみてください。
記事保存ボタンのメモ入力欄
各記事ページには記事をMyニュースに保存するボタンが付いています。
有料会員になると、ここから記事を保存するだけでなく、各記事にラベルをつける・メモを取るという機能が使えるようになります。 このメモ入力欄は次のような実装になっています。
<textarea aria-controls="memo">
</textarea>
<span id="memo" aria-live="polite">0/100文字</span>
テキストエリアで文字を入力すると、何文字入力されたかを JavaScript でカウントし、表示します。最大で100文字まで入力できるようになっています。
この実装を行うことで、NVDAなどのスクリーンリーダーが文字を入力するたびに「N文字／100文字」のように <span> の文字数表示を読み上げてくれるようになります。
aria-controls はどの要素によってコントロールされているのかを示す aria 属性です。
この属性に指定した id を持つ要素の変更を検知します。
aria-live はスクリーンリーダーが読み上げるタイミングを指定します。この例では "polite" という値を指定していますが、この値を設定した場合、ユーザがタイピングをやめたタイミングなど、ちょうど良いタイミングで読み上げを行うことを指示します。
その他、"off" と "assertive" という値があり、それぞれ、「通知しない（デフォルト）」「指定した要素が変更されたらすぐに読み上げる」ことを指示します。
詳しくは以下の W3C のドキュメントを参照してください。
https://www.w3.org/TR/wai-aria-1.1/#aria-controls https://www.w3.org/TR/wai-aria-1.1/#aria-live
終わりに
日経電子版では、先日トップページのデザインをリニューアルしました。 電子版トップページは毎日約100万ほどのアクセスがあり、利用するユーザも多様であることから、Web アクセシビリティに取り組む価値の高いサイトだと思っており、今後も継続してアクセシビリティの向上に取り組んで行きます。 一緒にアクセシビリティの向上に取り組んでみたい方、話を聞いてみたい方は 是非 JOBSからご連絡ください！
明日は山田さんによる「VRデバイスの技術検証 ～Quest 2を使ってみた～」です。
