こんにちは。アクセシビリティ・エンジニアのSUGIです。

私はサイボウズでアクセシビリティの向上・啓発をしています。

2019年12月、デザイン＆リサーチグループの採用サイトをリニューアルしました！

今回は、アクセシビリティ強化について、
・なぜ行ったのか
・どう進めたのか
・どんな強化をしたのか
をレポートしたいと思います。

リニューアルした採用サイトはこちらです。ぜひごらんください。

リニューアル報告記事です。

なぜアクセシビリティ強化をした？

以前のサイトでは、十分なコントラスト比が確保されていなかったり、スクリーンリーダで閲覧することが考慮されていない設計になっていました。

コントラスト比が確保されていないと、文字の視認性がわるくなるため、ロービジョンや老眼の人がサイト閲覧に時間がかかったり、閲覧できない可能性があります。また、ロービジョンや老眼にかかわらず、暗い場所では見えづらくなるため、コントラスト比は重要になってきます。

スクリーンリーダで閲覧することが考慮されていないと、スクリーンリーダを使用して閲覧している全盲やロービジョンの人が、情報を入手できない可能性があります。スクリーンリーダは画面の文字情報を合成音声で読み上げるソフトウェアです。視覚情報とスクリーンリーダの読み上げの情報に差異がでてしまったり、そもそも読み上げられなかったりしては、情報の格差が生まれてしまいますし、間違った伝わり方をしてしまうかもしれません。

デザイン＆リサーチグループのことを知りたいと思っている方が、等しく情報を入手できる。そのためにアクセシビリティ強化をしました。

どうやって進めていった？

1. デザイナーがサイトのプロトタイプを作成

まずはプロトタイプ作成です。デザイナーのおーじさん、篠原さん、ニアさんが作ってくれました。

2. アクセシビリティチェック

サイト製作をしたデザイナーと、アクセシビリティチームの小林さんと私で、スクリーンリーダを使ってひととおりサイトを閲覧し、アクセシビリティの問題がないかをチェックしました。

3. アクセシビリティ改善項目リストを作成

2.を踏まえて、見つかったアクセシビリティの問題点を洗い出し、改善する場所、改善理由、改善案などについてまとめました。

4. コードレベルの修正

3.を元に、アクセシビリティチームとデザイナーとで、ひとつずつコードの修正を行いました。また、修正が適用されているか、レイアウト崩れなどが起きていないか、ブラウザで確認しました。

どんなアクセシビリティ強化を行った？

実際に行ったアクセシビリティ強化の一部を紹介します。

1. 画像の代替テキストの検討

問題点

画像の代替テキストが不十分だったため、視覚情報との差異が生じていました。

代替テキストとは、画像を説明するテキストのことです。画像を挿入する際、alt属性で代替テキストを指定することができます。代替テキストは、スクリーンリーダユーザが参照するほか、地下鉄など通信環境が悪く画像がダウンロードできないときにも表示されます。代替テキストがあることで、画像を見ることができない場合でも、画像の内容を把握することができます。

解決策

デザイナーの人と代替テキストの文言を検討しました。

その際、画像を配置することで、いったいなにを伝えたいのか、ということを考えました。画像を配置する時、それが装飾用でないかぎり、画像を見てもらうことで伝えたい情報があるはずです。代替テキストでは、伝えたい本質的な情報をわかりやすく記述することが求められます。

具体例を2つ挙げます。

上記の画像の代替テキストは、最初「リサーチをしている様子」でした。
しかし、この説明だけでは実際にどんなことをしているのか、あまりイメージがつきません。
そこでデザイナーの人と話した結果、この画像ではリサーチの活動内容を見せるものであり、ユーザーにヒアリングしている部分がその活動内容にあたります。
よって、修正後の代替テキストは、「写真：チームメンバーがユーザーにヒアリングしている様子」としました。

次の具体例です。

上記の画像の代替テキストは、最初「各チームメンバーのバストアップ」でした。たしかに写真の外観を説明できていますが、この説明文では、本質的に伝えたいことが伝わらないのではないでしょうか？この画像を選んだ背景として、なぜあえてバストアップにしたのかというところに答えがありそうです。

デザイナーと話した結果、この画像のポイントは各メンバーがそれぞれポーズを決めているところです。それぞれのメンバーが思い思いのポーズをとっていることで、メンバーの雰囲気を伝えようとしています。
よって、この画像の代替テキストは、「写真：チームメンバーそれぞれが思い思いのポーズをしている」としました。

代替テキストは非常に難しく奥が深いテーマです。画像を配置する時、「この画像で一番伝えたいことは何か」、「代替テキストはどうするか」ということを考えると良いのではと思います。

2. 構造情報の付加

問題点

CSSを駆使して、キーメッセージを太字にしたり丸で囲んだりして視覚的に強調表示している部分があります。

しかし、HTMLではpタグでマークアップされており、意味論的には強調されていませんでした。

意味論的な構造が適切にマークアップされていないと、プログラムが正しく解釈できません。視覚的にはキーメッセージは強調されていますが、プログラム的にはキーメッセージも他の文と全く同列な情報という扱いになります。つまり、視覚情報との差異が生じています。

よって、視覚情報を確認できない全盲のスクリーンリーダユーザにも強調しているという意味合いを伝えるために、HTMLのマークアップを修正する必要があります。

解決策

HTMLで正しい構造情報をマークアップしました。リストならul/ol、引用ならblockquote、ボタンならbuttonなど、HTMLタグで適切な構造情報を示すことは重要です。
汎用のpやspanやdivタグを使う前に、それよりも適切なタグでマークアップできないか考えましょう。

今回はキーメッセージの部分を見出しタグでマークアップしました。これにより、スクリーンリーダで読み上げたとき、見出であることを通知するため、重要なメッセージであることが伝わるようになります。

このように、CSSで視覚情報をデザインすると同時に、HTML側でも適切な構造情報を付加することは重要です。

3. アイコンのラベルの付加

問題点

メンバー紹介ページの各メンバーのSNSアイコンがスクリーンリーダユーザに伝わらない。

各メンバーのSNSアイコンはFont Awesomeを用いています。しかし、アイコンはスクリーンリーダユーザには伝わりません。アイコン部分を読まなかったり、「発音不能」と読んだりするため、それがSNSのアイコンであり、クリックすると各メンバーのSNSページに行けるということが伝わらないのです。

解決策

スクリーンリーダユーザが理解できるよう、アイコンにラベルを付加しました。
まず、aria-hidden属性を指定して、アイコンをスクリーンリーダが読まないようにしました。これでスクリーンリーダはアイコンを完全に読み飛ばします。

つぎに、スクリーンリーダがアイコンを識別するためのラベルを付加しました。Twitter Icon、Facebook Iconなどの文字列です。

最後に、付加したラベルを視覚的に見えないよう非表示にします。このラベルはスクリーンリーダユーザには必要ですが、それ以外の人には不必要だからです。スクリーンリーダユーザには読めるが、視覚的には見えなくするCSSを使いました。

アイコンは直観的に伝えることができるため多用されます。しかし、そのアイコンが意図して伝わらない場合がないかを考えてみることは大切です。形や色は適当か、ラベルがあるか、ラベルの文言はわかりやすいのかといったことです。

今回感じたこと

最後に、今回私がデザイナーと一緒にアクセシビリティ強化をして感じたことを3つ挙げたいと思います。

1. デザイナーの人の知見が高まる

アクセシビリティを考慮したデザインとは。そういう観点の知見を高めることができると思います。
特に、代替テキストや構造的なマークアップはすぐにでも実践することができます。

2. アクセシビリティチームとしても知見が高まる

アクセシビリティチームとしても、得られる知見は大きいです。
色合い、配置順、大きさなどひとつひとつに設計した意図があって、新たな発見があります。
また、自分が全盲のため、デザインのことはなかなか単独でチェックすることが難しい為、一緒にやることで初めて知ることができることは多いです。

3. 一緒にコミュニケーションをとりながら進める

1.と2.の相乗効果を得るためにも、一緒に話し合いながらできるといいと思います。

今回、アクセシビリティ強化はアクセシビリティチームだけでもできたかもしれません。しかし、そうした場合、もしかしたらデザイナーの意図したところを見落としてしまっていたかもしれませんし、なにより知見が広まりません。
今回のように共に話し合いながらやるのは双方にとってメリットが大きいと思いました。

制作物を作る上流からアクセシビリティを考慮したデザイン設計を考える。デザインとアクセシビリティ。分業せずに同時進行で進められるとよいのかなと感じています。