こんにちは、みみです。
これは2019年7月7日のTokyo WordPress Meetup、 Tokyo WordPress Meetup July 〜WordPressと写真〜 のためのドキュメントの一部です。
今回はアクセシビリティと写真の選び方について、というお題をいただいてお話をしてきました。
私がアクセシビリティやら写真について人前で何かを語るなんて大変烏滸がましい心地なのですが、ドキュメントの下調べから開催準備まで、とても学びが多くて、楽しく有難い体験でした。ご一緒してくださった皆さま本当にありがとうございます。
以下、発表資料代わりに記事として公開しておきます。
1. アクセシビリティについて
Web上に写真を載せる時に
気をつけたいこと
誰が訪れるか分からないWEB上の作法「アクセシビリティ」
Webの正式名称、World Wide Web というのは文字通り世界中に開かれているシステムです。基本的に 「誰もが閲覧できる」公開情報であるWebには「アクセシビリティ」という視点が必要です。
アクセシビリティとは
使える人の範囲が広いことを「アクセシビリティが高い」といいます。
WP ZoomUP #14『誰もが使える』デザインを生み出すために
アクセシビリティについては、それだけで本が何冊も出ているほどの検討項目があります。写真だけでなく、サイト全体への配慮が必要なのですが、ここでは写真（画像）の扱いに絞ってお話します。
百聞は一見に如かずの通り、写真やイラストは情報を伝えるとても良い手段の一つですが、Webでは写真を閲覧出来ない環境へも配慮して公開するべきです。
そのため、例えば、写真を掲載するために良く使われる imgタグ には alt属性 で文字情報を補完することが出来るようになっています。
imgタグの例
<img src="img-tag-sample.jpg" alt="これはimgタグのサンプルです" />画像ファイルの音声ブラウザでの読み上げられ方
alt属性が実際に活用されるシーンとして代表的なものが音声ブラウザによる読み上げです。
音声ブラウザ（スクリーンリーダー）とは
全盲や弱視などの視覚障害があるユーザーがWebコンテンツを利用する際に使用するブラウザで、合成音声によってWebページを読み上げる。
音声ブラウザ｜用語集｜エー イレブン ワイ［WebA11y.jp］
最近はスクリーンリーダーと呼ばれる、OSに標準装備されているものも多いです。お手持ちの携帯電話にも搭載されているものが多いでしょう。
Alt属性があるかどうかで、下の表のように音声ブラウザの読み上げ方が変わります。
| alt属性の有無 | 読み上げ方 |
|---|---|
| 画像（alt属性が無い場合）: | 画像ファイル名 |
| 画像（alt属性が有り、値が空の場合）: | 無音 |
| リンクされている画像（alt属性が無い場合）: | URL |
| リンクされている画像（alt属性が有り、値が空の場合）: | 無音 |
参照 :
– 音声ブラウザ読み上げ比較 – 情報バリアフリーポータルサイト
– 音声ブラウザと相性の良いHTMLを作る(1)。 | Junnama Online
WordPressだと何もしなくても空のalt属性が入るようになっています。
alt属性が入っているだけでも、ずいぶん印象が違います。
ただし表のように、alt属性の中身が空だと音声ブラウザではその存在が消えてしまうことを念頭に置いてください。
altに何を入れるか？考え方のヒント
コンテンツとしての写真には文字情報を追加しましょう。
- alt属性値の最後に「写真」「様子」「風景」「画」と記述があり、それをスクリーンリーダーが読上げれば、その場所に写真が存在することに気づくことができます。
- 弱視で拡大して閲覧している人や、視野の狭い人は、カーソルを移動して、写真をモニターの見える場所に表示して閲覧します。
- 全盲の人も、写真の存在に気づけば、周りの人に、どんな写真か聞くことができます。
装飾が目的の画像であれば、写真であってもalt属性値を空にして問題ありません。
そもそも、文章だけでも伝わるように構成していれば過剰な代替テキストは不要になります（「写真」でOK）。
風景写真の場合
風景写真は、見えなくても情景が伝わるようalt属性値を記述することが重要です。 難しい場合は、写真の背景から前景へと情景を書いていくことを心掛けると、イメージしやすい記述になります。
参照: alt属性の良い事例(つけ方・書き方)｜情報バリアフリーポータルサイト
埋め込み要素について
WordPressでは埋め込み要素がサポートされています。
しかし、iframe,embedといった要素はそもそもアクセシビリティが低い要素です。なので、なるべくなら埋め込み要素は避けたほうが良いと考えます。
フレームを使用する際には、title属性で名前を提供しておくべきである。ただし、フレームは他のアクセシビリティ上の問題を引き起こすことが多いため、フレームの使用自体は推奨しない。
アクセシビリティ・サポーテッド（AS）情報：H64-2
とはいえ、正直、埋め込みたいことも多々あると思います。その場合はその前後にリンクも併せて貼ってあげると親切かもしれません。
例えば、こんな感じで、キャプションを付けるなどすると良いかもです。
埋め込み要素に関してはまだ私も調査中で、ベターな方法があれば知りたいです。
2. 写真の選び方について
Webに適した写真を考える
Meetupのテーマが「WordPressと写真」なので、後半は写真そのものについても少しお話します。担当のテーマは 写真の選び方 です。
私は写真を趣味で少し撮る程度なので、どちらかというとWebデザイナー的な視点で、サイトやブログに掲載するための写真の選び方についてお話したいと思います。
媒体に掲載する写真を選ぶことは、読み手（ユーザー）に何を伝えたいか、そのメッセージを選ぶことに等しいと言えます！
ブログ記事のための写真の選び方
折角、時間をかけて書き上げたブログ記事やサイトの印象を左右するかなり大事な部分です。
写真の種類
Webに限らずとも、媒体に使われる写真には大きく2つの種類があります。
1. 読む人に事実を説明するための写真
よくあるコーポレートサイトや飲食店のサイトなどでいうと、
- 経営者の近影写真
- レストランのメニューに使われる料理の写真
といった感じでしょうか。
そしてニュースサイトの写真がその最たるもの、と言いたい処ですが、意外とそうでないケースも多い気がします。
そうです、これらの写真の中にも、次に紹介する2つめの要素を含めることが出来ます。
2. 読む人の心に訴えるための写真
ブログのアイキャッチ画像に良く用いられるのは、こちらになると思います。
コーポレートサイトでいうと、サイトのトップ部分に使われるような写真もこちらに当たるでしょう。
イメージ写真、キービジュアルなどと呼ばれるものです。
また、先述したように同じ料理の写真や、経営者の写真であっても、こちらの意図で撮られた写真も存在します。
どちらを使うかはコンテンツの内容によって、リリースする側の意図によって変わっていきます。
事実だけを優先しても魅力の薄れたコンテンツになってしまうし、イメージばかりを優先しても情報がちゃんと伝わらなくなりますので、基本的に、この2つのバランスを考えながら写真を選びます。
WEBに適した写真の見分け方
紙媒体と違って、様々な閲覧環境が想定されるWebでは特に「明るさ」と「鮮明度」が大事です。
そのため10年以上前に私が在籍していた制作会社では、写真データには基本的に明度と彩度を最低10％以上アップしてアンシャープマスクを1-3回が定石でした。
撮ったままの写真 
彩度とアンシャープマスクで加工した写真
今は、そこまでしなくてもiPhoneの写真もとても画質が良く、簡単に沢山写真が取れて、閲覧環境もとてもキレイに映る環境が増えていますので、大事なのは大量の写真の中からどれを選ぶか、という点だと思われます。
「明るさ」 – 画面全体が明るく写っているかどうか
先ずは写真の明るさをみましょう。
特に意図がない限りは、より明るい方の写真を選びましょう。あとこのようにギャラリーなどで、複数の写真を並べる際は明度にあまりばらつきが無いようにしたほうが、違和感がなく見やすくなります。
「鮮明度」 – 見せたいものにちゃんとピントが合っているか
次に、ピントの位置に注目します。
見せたい対象にちゃんとピントが合っているものを選びます。
ピントの微妙な違いだけで、写真の印象は全く異なります。
（実例は全く微妙ではないですが…）
もちろん、コンテンツの雰囲気や表したい心地などによって、必ずしも常に明るくピントのはっきりした写真がベストというわけではありませんし、これは非常に初歩的なお話ですが、写真の選び方の参考になれば幸いです。
