アクセシビリティガイドライン作成から社内公開までの流れとその後
目次
こんにちは、まおです。
以前参加した社外勉強会でアクセシビリティに感銘を受けてから、約2年が経ちました。アクセシビリティのことをほぼ知らなかった私が「やらねば！」と奮い立ち、はじめてWCAG（Web技術の標準化を行うW3Cで公開しているWebアクセシビリティガイドライン。世界中で使用されています。）や本を読み、社内の人にも知ってもらうため内部勉強会を実施してきました。
そして昨年、ついに社内でアクセシビリティガイドラインを公開しました！
今日はアクセシビリティガイドラインの作成の流れや運用状況を紹介します。そもそもアクセシビリティとは？という方は「アトラスがアクセシビリティに取り組む理由」もご覧ください。
アクセシビリティガイドライン作成の流れ
作成はデザインチーム年度目標の一つ「アクセシビリティの推進」の一環として行いました。公開までは以下のような流れで進めました。
1. WCAGのレベルA・AAを参考に、無理なくやれそうな項目を選出
WCAGの達成基準はAからAAAまでのレベルが定められています。Aは最低限守るべき基準。AAは守るのが望ましい基準です。AAAは発展的な基準であり、達成が困難なものもあります。まずは無理なく守れるものから初めていくことにして、AAまでの達成基準を対象としました。
2. デザインチームに展開して選出項目を確認
ガイドラインとして守れるか？自分たちが作っているサービスに当てはまるか？といった点で確認をしあいました。項目としてあがっていた「2.2.1 タイミング調整可能」や「2.3.1 3回の閃光、又は閾値以下」などを見送ることにしました。
3. 似ている達成基準は一つにまとめて項目名を作成
例えば「1.4.8 視覚的提示」と「1.4.12 テキストの間隔」は、同じテキストのことに関しての項目です。内容をまとめて「テキストの可読性を上げる」とし、社内ガイドライン用の項目名を作成しました。
4. 達成方法を作成
デザインチームで担当を振り分けて項目に対しての達成方法を作成しました。「デザイニングWebアクセシビリティ」が大変参考になりました。ありがとうございました。
5. デザインチームメンバーでレビュー
達成方法はわかりやすいか、文言の統一などをレビューしあいました。
6. DocBaseにて公開！
下書きのGoogleドキュメントからDocBaseにて公開をしました！
アクセシビリティガイドラインの一部を紹介
これが社内で公開しているアクセシビリティガイドラインです！UIや色などどいった見た目に関するデザイン編が14項目、HTMLやCSSを使う実装編が7項目あります。含まれる達成基準は全部で27項目です。
項目にはそれぞれ達成方法が1つ以上あります。解説を載せる場合は初心者にも意味が通じるよう簡潔に書くことを心がけました。HTMLやCSSが見本として書かれている項目もあります。画像やCSSは参考にしやすいよう、なるべくアトラスサイトやサービスサイトのものを使用しています。
公開後の運用
要望・修正・改善案シート
公開と同時に「要望・修正・改善案シート」を用意しました。質問や追加要望があればシートに記入してもらっています。公開後も修正を重ねており、構成変更や新たに項目を追加しています。
勉強会を実施
ガイドラインの説明と、サービスやブログなどの現状のアクセシビリティ状況をシステム開発部で実施しました。
アクセシビリティ推進度テスト
年度末にシステム開発部内での推進度と理解度を計るためテストを実施しました。内容はガイドラインの構成に関するものや、アクセシビリティ向上のメリットを答えてもらいました。結果は平均点70点と中々良い点数でした。
現在の向上状況
さて、肝心の向上状況です。ガイドラインを元に開発/修正を行ったプロジェクトは以下です。絶賛向上中のサイトもあり、ガイドライン全項目に応じているわけではありませんが、可能な箇所からアクセシビリティを高めています。
- SMOOSY 学会サイト
- EMサポートサイト
- Confit紹介サイト
- Confit デザインシステム（デザインシステムについてはこちら）
- 開発者ブログ（このサイトです）
改善点としては主に以下項目です。
最低限のコントラストを確保し、可視性をあげる
色のコントラストや文字サイズの基準を守ることで可視性をあげました。
実はアトラスカラーである萌黄色は白と相性が悪く、コントラスト比が2.3しかありません。可視性をあげるには4.5以上は欲しいところなのでデザイナー泣かせの萌黄色です。アトラスブランドは損なわないよう、見出しなどはコントラスト比が高い色を使用しています。
画像やアイコンは代替テキストで説明する
代替テキストで説明することでスクリーンリーダー利用者やネットワーク接続ができないときでも情報を提供できるようになりました。代替テキストは簡単なようで実は奥深き世界です。適切な説明を入れられるようにしていきたいです。
また、意味をもたない装飾画像やアイコンにはaria-hidden属性を付与しています。
リンクは目的を理解できる文言にする
スクリーンリーダーの機能でリンクだけ一覧化したときでも、何に対してどういう操作・挙動をするのか明確に分かるようにしています。例えば「もっと読む」というリンクを改善するのであれば「記事をもっと読む」というようになります。フォームであれば送信ボタン文言も「更新」「送信」ではなく、「更新する」「送信する」としています。
ガイドラインの今後
アクセシビリティに関する勉強会では「ガイドラインは運用後の方が難しい」という話をたびたび聞いていました。まさにその通りだなと肌で実感しています。公開して終わりではありませんし、運用を続けて成果物の一定の品質を確保していかなければいけません。
今後は、向上状況シートのテンプレートを作成したので各サービスの状況を見えるようにしていきたいです。ガイドラインの解説文を簡潔にするなど全体のシンプル化も図ります。
Webの本質はアクセシビリティ！それではまた！
