Chatwork プロダクト本部 プロダクトデザイン部の守谷です。ChatworkではUIデザイナーとして活動しながら、アクセシビリティに関する取り組みを進めています。
これまで、アクセシビリティ方針の策定プロセスと浸透・啓蒙についてまとめましたが、今回は方針をもとにしたWebサイトのアクセシビリティ対応について書いていきたいと思います。
アクセシビリティ方針を出したあとは、Webサイトのアクセシビリティ対応から始めました。
対応と一言で言っても、何から手をつけていいかわからないデザイナーも居たため、まずは方針で達成目標として定めた、JIS X 8341-3:2016の目標適合レベル「AA準拠」に対し「現状どの程度クリアできているのか」をチェックするところから始めました。
手順としては、まず、スプレッドシートに簡易的なチェックリストを作成し、それに沿ってピックアップしたページ（サンプル）がどれくらい準拠しているのか、デザイナー間で指差し確認をしました。チェックリストは私の方で用意し、初回は最低限のチェック方法やチェックポイントを提示しながら、全員で「できている？できていない？」と確認しながら進めました。
具体的なチェック方法を例に挙げると、文字色のコントラストの達成基準（1.4.3 コントラスト (最低限)）についてブラウザから確認をするには、ChromeのDevToolsなどを利用しひとつひとつの項目の背景色と文字色のコントラストについて、4.5:1を満たしているのか、を確認していくといった作業です。
ちなみに私たちが実際にチェックを進めた2017年当時、Chrome DevToolsにこういった機能はついていなかったので、実装しているHEX値をスタイルから拾いながらコントラスト比チェッカー（アプリやWebサービス）を駆使しながら進めました。
一通りのチェック項目に対し確認方法・改修事項を把握してもらった後、デザイナー全員に対し「一度任意のページをピックアップし、自分たちの力でチェックをしてみてね」という実践形式での、知識・認識のアップデートを促しました。
私たちが利用したチェックリストは、アクセシビリティ方針の「試験結果」項目の掲載にも対応する形となっています。チェックをおこなった後、そのままアクセシビリティ方針の更新に使えるようにする、という計画を前提としたチェックリストです。
ちなみに、私たちが用意していたのは、JISの項目に沿ったチェック項目ですが、現在はfreeeさんがより理解しやすいチェックリストを公開してくださっていますので、参照されると便利です。
アクセシビリティへの取り組みは、基本的に終わりはありません。新しいコンテンツを追加する、ページを増やす、デザインを変える。どんな更新であっても、何か変化が起きるたびに「伝わらない」「見えない」「使えない」状態にならないかをチェックする必要があります。
後から「修正」をおこなう場合には「追加工数」が掛かります。この点がよく言われる「アクセシビリティ対応は大変」であったり「工数がかかる」に当たりますが、最初から一定の基準に準拠できるようにデザイン・実装されれば「追加」にはなりません。
現在は、デザインをする前に基準を把握し準拠できているコンテンツを提供できるように、「なぜこういった基準が定義されているのか」背景を読み解く活動をデザイナー間で進めています。
この読み解き活動はアクセシビリティの理解を目的としているため、方針で指針としているJIS X 8341-3:2016（WCAG 2.0の一致規格）ではなく、さらに最新版となる基準のWCAG 2.1を参照しています。参加者それぞれで「WCAG 2.1 解説書」を読み解きながら、デザインにおいて重要なところを抽出／共有する形で進めています。
今回紹介したのはWebサイトへのアクセシビリティ対応の取り組みまでですが、プロダクトにもアクセシビリティ視点での改修を進められる体制を徐々に整備しているところです。そちらもまた別の機会にまとめたいと思います。