デザインチームでWebアクセシビリティ対応に取り組んだ話

GMOグローバルサイン・HDのデザインチームではWebアクセシビリティの取り組みを行っています。
この記事では、これまでどういった活動を行ってきたのか、活動を行う中でどういった気付きがあったのかなどをまとめたいと思います。
これからアクセシビリティ対応を始められる方の参考になれば幸いです。

1．ガイドライン作成・共有

デザインチームには、ディレクター・デザイナー・コーダー・動画クリエイター・PdM・UIUXデザイナー・フロントエンジニアなどさまざまな職種の人間が在籍しています。当然、個々のWebアクセシビリティに関する知識は差があります。

まずは、この知識の差をなくすことと、Webアクセシビリティをチームの共通認識にすることを目指しました。

そこで行ったのが「Webアクセシビリティガイドライン」の作成です。
JIS X 8341-3:2016の1項目につき1ページずつ、概要・チェック方法・実装方法・参考URLなどをまとめたページをnotionで作成し、チーム内で共有できるようにすることがねらいです。

Webアクセシビリティガイドライン作成の流れ

・メンバーにJIS X 8341-3:2016の項目を割り振りる（1人あたり2️〜3個）
・割り振られた項目を各自理解した上でガイドラインを作成
・チーム全員が参加する定例MTGで作成したガイドラインを説明

約半年かけてガイドライン作成と共有を行いました。
この取り組みを通してメンバーの理解度が深まり、それまで漠然としていた
Webアクセシビリティへの対応方法が明確になりました。また、同じ認識を
持ってアクセシビリティについての会話・議論ができるようになったことも
大きな前進だったと思います。

2．チェックリスト作成・運用

続いて行ったのが、実案件でのサイト公開フローにWebアクセシビリティの対応を組み込むことです。

もともと運用していた「サイト公開前のチェックリスト」があったので、そこにWebアクセシビリティに関する項目を追加し、最低限のアクセシビリティ対応ができているかを公開前に確認するようにしました。チェックには外部のチェックツールも活用しています。
＞カラーコントラストチェッカー
＞The W3C Markup Validation Service

3．参考サイトの収集

今後のWebアクセシビリティ対応に向けて、A/AA準拠している他社サイトを研究しており、主に以下のポイントを見ています。
・コントラスト比の基準を満たしつつ自然で美しい配色
・キーボード操作にストレスを感じない
・音声読み上げを配慮したaltタグ設定
・動きのあるコンテンツの実装方法に工夫がある

この取り組みを始めた背景として、Webアクセシビリティとデザイン性を両立させること、特に、コントラスト比の基準を満たそうとするとデザイン性との両立が難しくなる印象を持っており、これらを両立させているサイトを参考サイトとして収集しています。

4．今後の取り組みについて

現在、チェックリストを使ってWebアクセシビリティ対応を行っていますが、今後はサイト公開時に自動でWebアクセシビリティのテストを実行できる仕組みの導入を進めています。

Webアクセシビリティとデザイン性の両立を追求し、使いやすく、かつ、美しいデザインを生み出せる組織になっていきたいと思います。

最後までお読みいただき、ありがとうございました。