Snaplog

【イベントレポ】大阪・アクセシビリティからはじめる、WebサイトのUXデザインに参加しました。

10月25日に大阪で開催されたアクセシビリティからはじめる、WebサイトのUXデザインに参加しました。

会場はデジタルハリウッド大阪校。
Webデザイナーの勉強をしていた母校での開催となりました。

アクセシビリティとは、“さまざまな利用者がさまざまな環境でアクセスできること”。

セミナー&ワークショップ形式

セミナーは3セッション。

• 1.マークアップからの取り組み~ボトムアップのアプローチ~
• 2.デザインからの取り組み~ビジュアルデザインとコンテンツ設計のアプローチ~
• 3.戦略からの取り組み~トップダウンのアプローチ~

各セッションでセミナー後にワークショップがありました。

各セッションごとにアクセシビリティについて考えることをポストイットに書き出していきます。

ポストイットの一部は質問として、最後に回答していただきました。

ワークの最中ですが、質問付箋紙が貼り出されました。シールで大阪分と名古屋分がマークされています。この質問はFacebookページでお答えする予定です。#a11ybooks pic./jMnE7RWDKM

— 岡本淳 (@orange_juno) October 25, 2015

ワーク中に疑問に思ったことをどんどん書き出せるので、
質問コーナーを設けるよりもやりやすかったです。

当日のスライドはこちら。

当日はあっという間に感じましたが、すごいボリューム！

スライド見るだけでも勉強になります。

勉強になったこと

勉強になったことや、こういう考えもあるんだと思ったことをいくつか。

空にするalt

imgタグのalt属性ですが、何かしら入れないとダメだと思ってました。
しかし、アクセシビリティの観点からあえて何も入れない場合もあるそうです。

事例として紹介されていた厚生労働省の大臣紹介ページ。

名前とプロフィール写真が掲載されていますが、写真のaltに名前を入れているせいで、
2回名前が読み上げられてしまいます。

また、アイコンなど装飾の画像のaltもテキスト入れると変な感じになってしまうことも。

altは適切につけられていないと全くアクセスできなくなるが、過剰にしすぎてもダメということでした。

意味ある画像はCSSではなくHTMLで

CSSで指定した画像はあくまで背景。

背景を非表示にしたり、識別しやすくするハイコントラストモードや印刷時は背景が出てこない場合があるそうです。
そのため、意味のある画像はHTMLで背景ではなく、前景に置く必要があります。

普段コーディングをするときは、特に気にせずやりやすいようにしてました。。

視覚に依存しない表現

NG例として紹介されたテキスト。

• ・赤になっている項目は必須です。
• ・詳細は右上の写真をクリック
• ・Sale！398 198

NG例は読み上げられても分からないものです。

どれもやってしまいがちだなぁ。。

カルーセルって必要？

Webサイトでよく使われるカルーセル。
よくメインビジュアルで使われていて、自動でスライドするやつです。

アクセシビリティの問題として、
読み終わる前にスライドしてしまう。
操作しようとして、誤操作してしまう。
動き続ける要素に注意を引かれ続けてしまう、などなど。

ぱっと見、動きがあってリッチなサイトにできるメリットはあるかもしれませんが、
アクセシビリティ的な観点や、そもそもカルーセルの1番目以外はあまり見られないという統計を考慮すると、
カルーセルってどうなんでしょうか？？

いらないんじゃない？という意見もけっこうあったと思います。

さいごに

アクセシビリティって重要ですが、
企業自体のアクセシビリティへの意識が低くて、普段の制作でなかなか取り入れられないこともあると思います。

そんなとき、どうすればいいかという質問で、
事あるごとにアクセシビリティの話題を出すとおっしゃっていたと思います。

ちなみに自分がいたグループでは「偉くなる」という意見もでました（笑）
社内で有無を言わせないぐらい偉くなったらいいということです。

アクセシビリティはD2Dという勉強会のグループで何度か勉強していますが、
まだまだ分からないことが多いです。

今回も知らないことをたくさん知れました。

幸い、今いる会社はアクセシビリティについて考えることもあるので、
もっと勉強していきたいと思います。

簡単にですが、イベントレポでした。

Pocket