アクセシビリティからはじめる、WebサイトのUXデザイン_参加しました

10月24日に名古屋で開催された”アクセシビリティからはじめる、WebサイトのUXデザイン”に参加しました。開催についての詳しい内容はconnpassのイベントページを見てください。Twitterでも当日のようすがわかります(大阪での開催も同じハッシュタグのようです)。
今回のセミナーはBAの太田さんの解説の後に、個人またはグループでワークショップ(主題に対して、アクセスしやすいアプローチ、運用のしやすいアプローチ、他のアプローチ、質問や意見を色分けしたポストイットに書いていく)をするという形式でインプットとアウトプット両方を行うセミナーでした。最初は何を基軸にアウトプットをしたらいいのか戸惑うこともありましたが、立場も経歴も違う方と意見共有ができたのは貴重でした。また、質問が浮かぶたびにポストイットに書くことができたので、セミナーのレベルに合うかどうかの心配もすることがなくてありがたかったです。最終的に取りまとめたポストイットをその場で見ることはできなかったですが、後でフォローがあるそうなので楽しみです。それを見たら新たな疑問や意見が出そう。

マークアップからの取り組み

アクセシビリティとはさまざまな利用者がさまざまな環境でアクセス可能であるということ。ブラウザの種類や支援支援ツールを選ばす、情報にアクセス可能な状態であること。そのためにはマシンリーダビリティを確保することが重要。
Webサイトで言えば、プレーンテキストに見出しなどの装飾を加えることで見た目は見出しとテキストの区別をつけることができる(ヒューマンリーダブル)が、そのままで機械は見出しと判断できない。HTMLでマークアップすることで、機械はテキストの役割を判別できるようになり(マシンリーダブル)さまざまなツールで利用しやすくなる。(ex:読上げツールの見出しをジャンプする機能は、HTMLで見出しを適切にマークアップしないと正確に使うことができない。)

Webサイトでは画像での表現は注意が必要。HTMLで度々言われる代替えテキストの書き方についてのポイント。

  • 代替えテキストは適切に付けられていないと情報にアクセスできなくなる。例えば、必要な文章情報を画像化した場合は内容を全部書かないとわからない。
  • 過剰なテキストを指定しない。キャプションなどのテキスト情報と重複する書き方をしない。
  • 意味のない装飾の場合はaltは空にする。(ex:検索アイコンに”虫眼鏡”と入れたりしない。逆に注意喚起のために”!”などのアイコンをつける場合はalt=”注意”と入れる必要がある。)

組織図やグラフなどの代替えテキストが悩ましい場合があるが、情報へのアクセスや運用のしやすさから考えると組織図やグラフなどに代替えテキストを入れるのは難しい。(組織図代替えテキスト例:潔くalt=”◯◯の組織図”だけ、とにかく全部書く、割り切ってpdfファイルを用意する、SVGにテキスト情報を入れるetc…)
そもそもそのようなコンテンツをどう取り扱うか、代替えテキスト以外の方法がないかどうか上流の工程で検討する必要がある。

また画像の扱いとしてcssの画像置換についての注意。cssの画像は背景として捉えられるため、ハイライトモードや印刷で消えてしまう。意味のある画像はHTMLに置く必要がある。

デザインからの取り組み

「わかりやすい」デザインとして、コントラスト、行間、文字の大きさ、ボタンのサイズや色、スタイルの一貫性を言われることがあるが、重要なポイントは以下のようなこと。

  • 視覚に依存せずテキストで示す(色に頼った表現、配置に頼った表現、文字の装飾に頼った表現はテキストやキャプションを追加する)
  • 文字は画像にせずテキストにする(テキストが画像だとハイコントラストにした場合に画像そのものの背景が邪魔をして、色が反転しない)
  • フォーカス表示を消さない
  • 閃光を使わない(cf.ポケモンショック)
  • 拡大できるようにする(スマホのスケールなどの拡大を禁止しない)

前項にあった代替えテキストが悩ましい例は、デザインまで遡ることで解決できる場合がある。例えば、グラフは図だけに頼らず元のデータも説明に加えるetc…や、画像は代替えテキストがなくてもキャプションでわかるようにすることでリッチなコンテンツ提案ができる。逆に普通にコンテンツを見る人にはaltの中身がわからないので、敢えて見える情報として表現することもひとつではないか。

デザインと切り離せないのインタラクションだが、アクセシビリティを考える上では注意が必要。カルーセルを主題にしたワークショップを通して、普段何気なく実装しているものにも、要件やコンテンツの質によって本当にその動きが必要かどうか考えることができた。カルーセルは横並びの情報を見せるには有効だが、自動に動くことが予期しない誤操作をまねいたり、読み終わる前に切り替わったりとアクセシビリティ上問題もある。アプローチとしてはストップボタンを設ける、自動再生させない、カルーセルにしないなど手段はあるが、そもそもカルーセルを設置するのはどうしてか、必要があるのか、元のコンテンツ設計が重要になってくる。

戦略からの取り組み

なんのためにサイトを作るのか、プロジェクトの目的を明確にするプロセスでアクセシビリティ方針(対象範囲、達成等級及び対応度)を作る必要がある。
WCAG2.0はアクセシビリティ確保のための達成基準を定めている。

  • A(どんなサイトも満たすべき最低限の基準、この基準を満たせないと支援技術を駆使しても全くアクセスできなくなる場合がある、25項目の基準、非テキストコンテンツにテキストを用意する、キーボードでも操作できるようにするetc…)
  • AA(望ましい基準、この基準を満たすと支援技術を使わなくても多くの環境でアクセスできるようになる、13項目の基準、最低限のカラーコントラスト、文字サイズetc…)
  • AAA(さらに発展的な基準、わかりやすい言葉を使うetc…全てを満たすのは難しい)

後々判断に迷うような曖昧な基準や、逆に厳しすぎる方針、限定的な条件にならないように気をつける。ガイドラインに適合させることが目的にならないように無理のない範囲で定める(目標とするレベル、適用範囲、期間etc…例外がでる場合は明確にする)。また、なぜアクセシビリティに取り組むか目的をを明文化することでブレないようにする。(良い例:ヤフー株式会社の「ウェブアクセシビリティ方針」GREE「ウェブアクセシビリティについて」

基本的にコンテンツはユーザーに向けて提供されているものだが、提供側の都合もある(必ずしも悪いわけではない)。アクセシビリティは制作の最初の段階から考える必要があるが、どのプロセスにも取り組むべきポイントはある。情報を100%届けよう思うのではなく、少しでも多くの人に多くの情報を伝えることが必要。Webに関わる以上誰にでも出来ることがあるし、少しでも意味のあること。

感想

今回のセミナーは、マークアップの実装段階からデザインプロセスへ、そして戦略からの取り組みへと工程を上流へ遡ることにポイントがあったと思う。2回のワークショップでも「そもそも画像を使用しないデザインにする必要があるのではないか」とか「そもそも最初の設計で横並びのコンテンツの見せ方を変えないと…」という考えがでたところで、次のセクションで解決の糸口を掴むという具合。(もし時間があれば、じゃあそもそものアクセシビリティ方針がこうだったらさっきのワークショップの結果はどうなっていたか…を考えるなどしたらワークフローの理解も深まったかもしれない。)

最後のワークの「自分の立場で何ができるのか」という部分では、課題も見えた(この課題こそが今回の主題だと思うけどどうだろう)。自分が上流工程に携わる場合はともかく、マークアップだけの作業の時はどうなのかということ。アクセシビリティは0か100じゃないという話、どのプロセスでもやれることはあると言われたように、「アクセシビリティに配慮しないサイトだからいいや」というのは違うと思う。上流の工程から携わるとしても、現状として企業が積極的にコストをかけてアクセシビリティに対応するプロジェクトよりもそうでないものの方が多いだろうし、個々の基準に頼る部分も多いだろう。そういう現状を体現したのが今日のワークショップだと思ってる。
じゃあ本当に何ができるかと言われたら、まだWCAG2.0への理解が足りてないし、WCAG2.0への理解だけでいいとも思わないし、求められた基準で作れるかどうか慣れも必要。勉強は必須だろうけど、難しく考えず、今日の実装のポイントを中心に理解を深めていけばいいのだと感じた。その上で、自分のコーディング基準(作ったことないけど)をアクセシビリティを盛り込んで明文化してみるのもいいのかもしれない(ただの思いつきだけど、整理していく意味ではいいのかも)。この勉強ブログでも実践できるところから取り入れていきたいです。
現状だったら自分が何ができるのか、ワークを通して考えることで現実的な課題と目標を得ることができたのは収穫でした。ポストイットのまとめも楽しみです。

最後に本題からはずれるけど、セミナーで使う事例ってどうやって見つけるんだろうと思った。悪い例(というのも失礼ですが)は非常にわかりやすかったし、逆に良い例も探しにくいんじゃないかなと思う。そういった例を見つけるコツを聞きたかった。(と、今思った。)

2件のフィードバック

    • 岡本様
      先日は有意義なセミナーを開催していただきまして、ありがとうございました。
      バタバタで書いたつたないレポートに丁寧なフォローアップをしていただき恐縮に存じます。
      いろいろなサイトを見て勉強してみたいと思っていたのでありがたいです。ぜひ参考にさせていただきます。ありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする