こんにちは。フロントエンド開発センター(UIT) 岡﨑です。"IU Web"というLINEが保有する膨大なデータを安全かつ効率的に利活用できるデータポータルのデザインとフロントエンド開発を担当しています。その傍らでUIT Accessibility TF(タスクフォース)に所属し、社内にアクセシビリティを啓蒙する活動を行っています。
Tech-Verse 2022とは？
LINEとヤフーが合同で開催する技術カンファレンスです。これまで両社がそれぞれ開催していたLINE DEVELOPER DAYとYahoo! JAPAN Tech Conferenceが1つになりました。3カ国語(日本語、英語、韓国)で合計88のセッションをLINE LIVEによるライブストリーミング配信を通じ、これまで各社の開発・研究が積み重ねてきた挑戦や得られた知見、そして現在活用している最先端の技術などを伝えることを目的としています。
技術的なチャレンジ
新規にTech-Verse 2022サイトを制作するにあたり、技術的なチャレンジとしてアクセシビリティ改善を盛り込むことに決めました。LINEプロダクトにおけるアクセシビリティに対する取り組みはまだ始まったばかりですが、オンラインの技術カンファレンスだからこそ誰にとっても障壁の無いアクセシブルなウェブサイトを提供したいと考えたからです。
| 言語 | 日本語、英語、韓国語 |
|---|---|
| セッション数 | 88本 |
| ストリーミング配信 | 87本×3言語=261本 |
| ターゲットデバイス | モバイル、タブレット、デスクトップ |
| チャレンジ | アクセシビリティへの配慮 |
*セッション数(88本)は、Opening Sessionおよび当日配信できずに事後公開になった1セッションを含む数値
アクセシビリティガイドライン
社内で策定したアクセシビリティガイドラインとチェックリストを共有、企画、デザイン、開発で合意形成し、それぞれが留意すべき点を伝え、理想的なスタートを切ることができました。ガイドラインはWCAGをベースに軽量で読みやすい形に構成し継続的に更新を続けています。詳細は割愛しますが以下に示す12のカテゴリーで構成されています。
- マークアップ全般
- 文書構造とナビゲーション
- デバイス
- 動的コンテンツ
- テキスト
- 画像化されたテキスト
- 画像
- アイコン
- 音声と動画
- リンクとボタン
- フォーム
- ログインまたはセッション
チェックリストは、設計・ビジュアルデザイン、ソースコード、プロダクトとフェーズごとに分かれています。それぞれの項目を全て確認すれば、ガイドラインへの達成基準を知ることができます。
企画・デザイン
カラー
アクセシビリティガイドライン
文字色と背景色のコントラスト比を十分に確保する。WCAG 2.1 レベルAAのコントラスト比を必須とする。
カテゴリーを識別するカラーはWCAG 2.1 レベルAAコントラスト比を満たすように調整しました。「大きいテキスト」は18.5px以上の太字 or 24px以上のいずれかです。「それ以外」では一部満たしてないカラーもありますが、これは実現可能な範囲をデザインチームと検討した結果の落とし所でした。
|
カテゴリ
|
背景色
|
前景色
|
コントラスト比
|
大きいテキスト
|
それ以外
|
|---|---|---|---|---|---|
|
|
#144ff0 | #ffffff | 6.16:1 |  |
|
|
|
#db5b4b | #ffffff | 3.74:1 | |
- |
|
|
#9329e5 | #ffffff | 5.38:1 | |
|
|
|
#08aa70 | #ffffff | 3.00:1 | |
- |
|
|
#0e9dcb | #ffffff | 3.13:1 | |
- |
|
|
#2a26c9 | #ffffff | 9.46:1 | |
|
|
|
#116954 | #ffffff | 6.61:1 | |
|
|
|
#6530d3 | #ffffff | 7.19:1 | |
|
|
|
#3a4052 | #ffffff | 10.31:1 | |
|
アクセシビリティガイドライン
色に依存した表現にしない。
色覚特性による見え方は以下のようになります。3型2色覚の場合は、緑(Blockchain)と水色(Server Side)の識別が困難です。
|
通常の見え方
|
1型2色覚(赤色盲)
|
2型3色覚(緑色盲)
|
3型2色覚(青色盲)
|
|---|---|---|---|
|
|
|
|
|
カード型のセッション情報は背景のカテゴリーカラーと共にテキストを添えました。これでカラーが無くても識別できるようになりました。
インタラクション
アクセシビリティガイドライン
5秒以上の自動で開始する動きを伴うコンテンツを作らない。
初期のデザインでは軸の周りをリングが常に回転している動画を検討していました。しかし、5秒以上の動きを伴うコンテンツはユーザーの集中力を妨げる可能性があるため、ユーザーが停止する機能の追加を検討しました。ところが、停止ボタンがデザインを妨げてしまうため、デザインを変更し5秒で停止するインタラクションに落ち着きました。
改善前のインタラクション
改善後のインタラクション
フロントエンド開発
キーボード操作
アクセシビリティガイドライン
マウスやタッチ操作と同様のことをキーボードのみで行えるようにする。
トップページはスクロールに応じて画面描画をJavaScriptで制御しています。そのため、タブキーを押したときにページ下部のセッションカードにフォーカスするものの、画面のスクロール位置はそれに応じて移動せず先頭のままとなっている問題が発生しました。フォーカスイベントを検知して、フォーカスされたカードが表示される位置までスクロール位置を移動させることで対応可能でしたが、すでに画面内にカードがある場合にも不自然に動いてしまうなどサイドエフェクトを生む恐れがありました。加えてキーボードの方向キーによる代替手段があること、他にも対応すべきデザイン調整やアクセシビリティ改善の作業があったことから、既知の問題に分類し対応限界としました。
ダークモード対応
ガイドラインにはありませんがダークモードに対応しました。以前、社内で働くロービジョンユーザーの方々にインタビューを行った際にダークモード使用率が高かったことから需要を感じたためです。スケジュール的にあまり余裕が無かったので、開発が主導となり基本的にCSSで表現できる範囲でダークモード対応を行いました。残念ながらダークモードに関するトラッキングイベントを仕掛けていなかったので使用率は不明です。
|
ライトモード
|
ダークモード
|
|---|---|
|
|
|
- ヘッダーに設けたLight/Darkスイッチを切り替えることでダークモードに変更できる
- ダークモード設定情報はLocal Storageに保存され次回以降も引き継がれる
- OS側でダークモード設定(prefers-color-scheme)をしている場合は自動的に継承される
- 優先順位は 1.スイッチ設定 2.OS設定
検索エンジンフレンドリー
アクセシビリティガイドライン
ブラウザーや支援技術、クローラーなどがHTMLの構文を正確に解析できるようにする。
アクセシビリティの対象は、ユーザーだけではなくクローラーも含まれます。文法的に正しく構造化されたセマンティックHTMLを効率よく届けるためにsitemap.xmlを作成し、Google Search Consoleに送信して効率的にインデクシングを促しました。インデックスカバレッジは初期の段階で90%を超え、Tech-Verse当日には100%を達成できました。タイトルの重複や間違ったcanonicalがあれば、Google Search Consoleで検出し修正することができます。これは検索エンジンに対するアクセシビリティ改善に繋がります。
| 実在するページ | 279 |
|---|---|
| インデクシングされたページ | 279 |
| インデックスカバレッジ | 100% |
動画
字幕(キャプション)対応
アクセシビリティガイドライン
音声を含む動画には、音声と同期したキャプションを提供する。
Tech-Verse 2022では、88本のセッションをライブストリーミング配信します。配信は同時に進行する6トラック×3言語の合計18チャンネル、リアルタイムな動画の字幕対応については技術的な検討が必要になりました。CLOVA Speech APIを用いて検討を始めました。
|
Type1：映像にテキスト含めて配信する方法
|
Type2：ウェブでテキストを表示する方法
|
|---|---|
|
|
|
議論を進めていくうちに、どちらの方法もそれなりの開発体制の構築並びに開発工数が必要で、実現が困難であることが分かったのです。動画の字幕対応は想像以上にコストと時間を要するもので、残念ながら動画への字幕対応は実現しませんでした。当初の見込み・見積もりが甘かったことを反省し、次回への課題として履歴を残しました。
まとめ
Tech-Verse 2022ウェブ制作の裏側で技術的なチャレンジとしてアクセシビリティの改善を行いました。
| ウェブサイト | https://tech-verse.me/2022/ |
|---|---|
| できたこと |
|
| できなかったこと |
|
ソースコードに対して57件のイシュー(下図)を起票し、前述のスクロールの1件(黄色部分)を除いてすべて修正しました。
アクセシビリティについて、すでに完成したものに対する対して改善を取り組むのではなく、案件のスタート時点から強く意識しながら進めるケースは今回が初めてでした。企画、デザイン、開発が一体となって取り組めたことは非常に有意義だったと感じています。
反省するところも多々あり、最終的に一部項目についてWCAG 2.1 レベルA水準に達することはできなかったものの、それでも多くの項目について問題箇所を発見し、アクセシビリティの改善に繋げることができました。
異なる職種間で認識の食い違いや、折り合いがつかず難航したところもありましたが、デザイン段階で問題となりそうな箇所を指摘できた点や、開発環境でのキーボード操作やスクリーンリーダーによるテストなど、これまで実施が難しかった対応をとることができた点は、LINEとしてのアクセシビリティ対応の次に繋がる第一歩になったのではないかと思います。