!important 04 -特盛!アクセシビリティスペシャル-
2017年6月3日に行われた「!important #04 -特盛!アクティビティスペシャル-」に参加してまいりました。
詳細は一昨日書いた part1 に書いてありますのでご覧にただければ幸いです。
昨日は2番めに登壇された神森さんのセッションについての感想も書いてますのでご覧いただけましたら幸いです。
今日は3番めに登壇された 澤田さん のセッションについて 感想を書いていきたいと思います。
SAWADA STANDARD DESIGN の澤田さんからはこんなテーマでお話いただきました。
より多くの人へ届けるために、Webコンテンツで「ちょっと」気をつけたいこと
澤田さんのお話しで最初に語られたのは、世の中にはいろいろな人がいるよね・・・って話。
例えば、タッチ操作が苦手な初心者や画像が苦手(今のところ)なGoogleBotクンのような方もいます。
自分とは違う人たちが少なからずいるということを想定することが大切だということがわかりました。
こんなツイートもありました。
いろんな人がいる。自分と違う状態の人がいるってことを知ることから。
デザインは想像力や広い社会性や日頃の観察力とかいるんだなーってぼんやり#important04— 俳人 我流(ウエスター) (@Garyuten) 2017年6月3日
そこで、ウェブサイトを作るにあたって大事なこととしてこのようなことを述べられました。
工夫すること。工夫ができる形式で作っておくこと。
そして、それが
アクセシビリティにすること
につながってくるということを学びました。
いろんな境遇にある方がいろんな状況の中で情報を必要としている
ので
あらゆる境遇にある様々な状況の方にもできるかぎり情報が届くように工夫する
ことが
大事!!!!
また、こんなこともおっしゃってました。
アクセシブルではない要素が一つでもあると情報が届きにくくなってしまう。
たしかに、そうですね。
想定できる限りの対策をしたつもりでもある一点でアクセシブルでない場合、その一点に該当する方には情報が届かないことになってしまいます。
位置関係に頼った文章は脳内で変換が起こる
たとえばある商品の購入を促すウェブページがあったとして
その賞品を購入するための「カートに入れる」ボタンが画面の右上にあったとします。
その場合に「購入したい方は右上のボタンを押してください」という文言が左下にあったとして
目が見えない方には音声リーダーでの情報しか届かず
「右上のボタン」が何を意味するかわからなくなってしまいます。
せめて「カートに入れるボタン」と言及がないといけません。
またレスポンシブウェブデザインではパソコンでは右上に出ていた文章が下に来ることも多いハズ。
そういった意味でも「上記の」とか「下記のように」とかいう表現を
「前述の」とか「後述する」とかいう表現に換えて配置上の位置関係ではなくあくまでも文章上のつながりで示すことが大事です。
また、写真についても3枚の写真が並べられているとして
「左は○○」
「中央は○○」
「右は○○」
という表現をしているとレスポンシブウェブデザインで上中下に配置されたりして中央はなんとなくわかったとしても健常者でも果たして右がどれなのか左はどれなのかさっぱりわからないことになります。
こういったことを避けるには写真には一枚ずつキャプションをつけることで 写真→説明 が一組ずつ配置されたどんな状態でもわかりやすい表現になります。
満員などのカラー表示は伝わらない
例えばカレンダー表示しているようなサイトで
満席を赤、残席わずかを黄色、空席ありを緑で表示しているようなところがあったとします。
これだと読み上げリーダーでは全く伝わりません。
また、白黒印刷したものを見た場合も黄色なのか緑なのかよくわからなくなっています。
こういう場合は例えば「満席は☓」「残席わずかは△」「空席ありは○」のように記号で表示するとわかりやすいです。
その他もいろいろありますが表現方法には気をつける必要がありそうです。
ちょっと気をつけてみることが第一歩になるかな・・・と思った次第です。
私の業務でいうと入力フォームなどの「必須」の表現に文字を赤にしたり「*(アスタリスク)」を使ったりする場合などありますが、それがなにを示しているのかわかりやすさを考えたら「必須」と日本語で示してあげるのが一番なのかな・・・と。
サイト内のメニュー名は統一する
当たり前のことなのですが、なかなか・・・・というのがこれ。
サイトの中で「会社までの地図」があったとしてそれが「会社概要」に入っているときがあります。
メインメニュー上は「会社概要」しかし、下のメニューでは「アクセス」、たまにでてくるサイドバーやコンテンツ内では「地図」など表記がちがっていると同じページを指している同じコンテンツとみなされない場合があり、それは「アクセシブルではない」状態と言えます。
ちょっとしたことに気をつける・・・いろいろな箇所で課題が出てきそうです。
alt属性について
!important の公式ツイッターでこうツイートされました。
【より多くの人へ届けるために、Webコンテンツで「ちょっと」気をつけたいこと】
澤田 望さんのセッション #important04
画像につけるalt属性はコンテンツ内容に合わせた的確な文章を入れる
写真であることを示す「写真:」を入れることもおすすめ。— !important '17/10/14 (@important_sem) 2017年6月3日
写真やイメージ画像に alt 属性を入れるっていうのは周知のことと思いますがその内容は前後の文章や場合によって的確な文言をいれる必要があります。
また、それが「写真」であることを示すように「写真:」を先頭に入れるのも有効だそうです。
ALT='' も解なり
(「解なし」も解なり)敢えてalt属性を空にする勇気も必要。
もちろん付けるのは必須。#important04— 俳人 我流(ウエスター) (@Garyuten) 2017年6月3日
このようなツイートもあるように alt属性にはあえて空欄にすることもあり、難しいなぁ〜と思いました。
無視して良いもの、例えば雰囲気画像とかイラストにはこういった対応も必要なのです。
altは記事の内容によっても異なる
同じ写真でも用途によって代替テキストはさまざま。
alt="写真:◯◯"
alt=""(無視してもいいイメージの場合)
alt="タイトル(背景:◯◯)"
電話の相手に伝えるように〜#important04— エモゼミ (@emo_semi) 2017年6月3日
さすがエモゼミさん、まとめてくださってありがとうございます。
「Webアクセシビリティのさらに外、アクセシビリティ全体のスコープで見るとWebに情報を乗せることそのものがものすごくアクセス性を高める行為」というのはハッとしたなあ。それも検索エンジンがあってこそ。ありがとう検索エンジン #important04
— keita kawamoto (@keita_kawamoto) 2017年6月3日
・・・確かに。
ありがとう検索エンジン!
澤田さんのセッションは実例が豊富で大変ためになりました。
・・・毎日ブログで振り返っているとやること覚えること盛りだくさんでこまりますwww
さすが、「特盛スペシャル」
澤田さん、ありがとうございました!!!