# 20190707 a11y

これは2019年7月7日のTokyo WordPress Meetup、 Tokyo WordPress Meetup July 〜WordPressと写真〜 のためのドキュメントの一部です。
アクセシビリティと、写真の選び方についてのレポートです。

## 自己紹介
mimiです。
たぶんWebデザイナーです。
フロントエンド側のアレコレをイジるのが好きみたいです。
編み物と写真と珈琲とオヤツ作りが趣味。
イラストも描いたりします。

気がつけばWebの仕事を15年以上、
WordPress歴は10年以上になります。
宗派は Zsh / VS Code / npm / Vue / Figma とかですが、
最近のお気に入りは gridsome です。
WordPressの好きなところは OSS, GPL, REST API です。

ここのところは専ら自作テーマを使って、フリーランスで受託開発をしたりしています。

今日は写真を対象にしたアクセシビリティと、
Web媒体での写真の選び方についてお話します。

## アクセシビリティについて - Web上に写真を載せる時に気をつけたいこと

### 誰が訪れるか分からないWEB上の作法「アクセシビリティ」
Webの正式名称、World Wide Web というのは文字通り世界中に開かれているシステムです。
「誰もが閲覧できる」公開情報であるWebには「アクセシビリティ」という視点が必要です。

### アクセシビリティとは

> 使える人の範囲が広いことを「アクセシビリティが高い」といいます。
> WP ZoomUP #14『誰もが使える』デザインを生み出すために

アクセシビリティについては、それだけで本が何冊も出ているほどの検討項目があります。
サイト全体への配慮が必要なのですが、ここでは写真（画像）の扱いに絞ってお話します。

百聞は一見に如かずの通り、写真やイラストは情報を伝えるとても良い手段の一つですが、Webでは写真を閲覧出来ない環境へも配慮して公開するべきです。

そのため、例えば写真を掲載するために良く使われる **imgタグ** には **alt属性** で文字情報を補完することが出来るようになっています。

<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属性に何を入れるか？考え方のヒント
（中略）
### 埋め込み要素について
（中略）

---
## 写真の選び方について

Meetupのテーマが「WordPressと写真」なので、後半は写真そのものについても少しお話します。私がシンヤさんから与えてもらったテーマは **写真の選び方** です。

今日の発表者の方々と違って私は写真を趣味で少し撮る程度なので、どちらかというとWebデザイナー的な視点での写真の選び方と、ブログに掲載するための写真の選び方についてお話したいと思います。

### 写真の種類

Webに限らずとも、媒体に使われる写真には大きく2つの種類があります。

#### 1. 読む人に事実を説明するための写真

よくあるコーポレートサイトやお店のサイトなどでいうと、

- 経営者の近影写真
- レストランのメニューに使われる料理の写真

といった感じでしょうか。

そしてニュースサイトの写真がその最たるもの、と言いたい処ですが、意外とそうでないケースも多い気がします。

そうです、これらの写真の中にも、次に紹介する2つめの要素を含めることが出来ます。

#### 2. 読む人の心に訴えるための写真

ブログのアイキャッチ画像に良く用いられるのは、こちらになると思います。
コーポレートサイトでいうと、サイトのトップ部分に使われるような写真もこちらに当たるでしょう。
イメージ写真、キービジュアルなどと呼ばれるものです。

また、先述した同じ料理の写真や、経営者の写真であっても、こちらの意図で撮られた写真も存在します。

どちらを使うかはコンテンツの内容によって、リリースする側の意図によって変わっていきます。

事実だけを優先しても魅力の薄れたコンテンツになってしまうし、イメージばかりを優先しても情報がちゃんと伝わらなくなりますので、基本的に、この2つのバランスを考えながら写真を選びます。

### WEBに適した写真の見分け方

紙媒体と違って、様々な閲覧環境が想定されるWebでは特に「明るさ」と「鮮明度」が大事です。

そのため10年以上余り前に私が在籍していた制作会社では、クライアントから提供された写真は基本的に明度と彩度を最低10％以上上げるのが定石でした。

今は、そこまでしなくてもiPhoneの写真もとても画質が良く、簡単に沢山写真が取れて、閲覧環境もとてもキレイに映る環境が増えていますので、大事なのは大量の写真の中からどれを選ぶか、という点だと思われます。

#### 「明るさ」 - 画面全体が明るく写っているかどうか

（実例）
特に意図がない限りは、白トビのない程度の、より明るい方の写真を選びましょう。

#### 「鮮明度」 - 見せたいものにちゃんとピントが合っているか

（実例）
見せたい対象にちゃんとピントが合っているものを選びます。
ピントの微妙な違いだけで、写真の印象は全く異なります。