20190707_七夕Meetup_content02

# アクセシビリティ
title案: 「WordPress の投稿に写真を使っても見れない人がいます」
(内容20分、Q&A 5分、転換 5分)

~~## WEBに写真を載せるということ~~

~~### WEBサイトに画像データが表示される仕組み~~

## 誰が訪れるか分からないWEB上の作法「アクセシビリティ」

### WEBは文字通り世界中に開かれている媒体です。
誰もが閲覧できる公開情報には「アクセシビリティ」という視点が必要です。

### アクセシビリティとは
- 使える人の範囲が広いことを「アクセシビリティが高い」といいます
- アクセシビリティを高めるための方法として、典型例としてはアクセシビリティガイドラインでチェックするというものがあります
- いわゆるWCAG2.1とかJIS X 8341-3:2016とかというものです

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

### 写真のアクセシビリティを上げる方法
百聞は一見に如かずの通り、写真やイラストは情報を伝えるとても良い手段です。

### 音声ブラウザの読み上げ方

画像（alt属性が無い場合）: 画像ファイル名
画像（alt属性が有り、値が空の場合）: 無音
リンクされている画像（alt属性が無い場合）: URL
リンクされている画像（alt属性が有り、値が空の場合）: 無音

（デモ）

### WordPressは標準で空のaltタグが入るようになっています

altタグが入っているだけでも、ずいぶん印象が違います。ただしaltが無いと音声リーダーではその存在が消えてしきうことを念頭に置いてください。

### altの書き方の例

http://jis8341.net/jirei_sample/jirei_chapter_01.html

- alt属性値の最後に「写真」「様子」「風景」「画」と記述があり、それをスクリーンリーダーが読上げれば、その場所に写真が存在することに気づくことができます。
- 弱視で拡大して閲覧している人や、視野の狭い人は、カーソルを移動して、写真をモニターの見える場所に表示して閲覧します。
- 全盲の人も、写真の存在に気づけば、周りの人に、どんな写真か聞くことができます。
- 装飾が目的の画像であれば、写真であってもalt属性値を空にして問題ありません。
- 文章だけでも伝わるように構成していれば過剰な代替テキストは不要（「写真」でOK）。
- 文章のわかりやすさは「伝えるウェブ」で変換した結果を参考にしてみるといいかも。
- 風景写真は、見えなくても情景が伝わるようalt属性値を記述することが重要です。 難しい場合は、写真の背景から前景へと情景を書いていくことを心掛けると、イメージしやすい記述になります。

## TwitterやFacebookの埋込みについて

WordPressでは埋め込み要素がサポートされています。

しかし、iframe,embedといった要素はそもそもアクセシビリティが低いものです。
なので、アクセシビリティ的にはなるべくなら埋め込みは避けたほうが良いと考えます。

> フレームを使用する際には、title属性で名前を提供しておくべきである。ただし、フレームは他のアクセシビリティ上の問題を引き起こすことが多いため、フレームの使用自体は推奨しない。
https://waic.jp/docs/as/info/201406/H64-2.html

とはいえ、埋め込みたいことも多々あると思います。その場合はその前後にリンクを貼ってあげると親切かもしれません。

## background に写真を使う場合の考え方

背景画像として写真を使うケースは、完全にコンテンツではなく装飾として利用してい場合に限ります。テーマによってはもしかすると、アイキャッチ画像を背景画像としてレイアウトするものもありますが、そういうテーマを使う場合、あくまでもアイキャッチ画像は装飾として考えて、実際のコンテンツの中でフォローしてください。

WordPressのブロックでいうと、カバーブロックがこれに該当します。
カバーブロックの背景につかう写真はあくまで装飾なので、それを前提にコンテンツの中身を構成しないように気をつけましょう。（デモ？）

## 恐れないでください。
Webに公開されている、という事自体がアクセシビリティの第一歩です。

## 関連資料
音声ブラウザ読み上げ比較
http://jis8341.net/read-bro.html
音声ブラウザと相性の良いHTMLを作る(1) http://junnama.alfasado.net/online/2007/05/webhtml.html
富士通ウェブ・アクセシビリティ指針
54. すべての画像には、画像の内容を的確に示す alt属性をつける（画像の代替情報）。http://jp.fujitsu.com/webaccessibility/v2/54.html
代替テキスト（alt属性）の目的や役割を理解し、やさしいサイト作りを目指そう！ https://www.asobou.co.jp/blog/web/alt
総務省　ホームページのバリアフリー化の推進に関する調査結果の要旨（HTML版） http://www.soumu.go.jp/main_sosiki/hyouka/hyouka_kansi_n/ketsuka/33207_01.html
WP ZoomUP #14『誰もが使える』デザインを生み出すために https://paper.dropbox.com/doc/WP-ZoomUP-14-cLbMS6PectM3fZIizVvcM
https://www.youtube.com/watch?v=Cll6KeGpW2w

WebAIM: Creating Accessible Frames and Iframes
https://webaim.org/techniques/frames/

Creating Accessible Frames and Iframes
https://webaim.org/techniques/frames/

非テキストコンテンツ:達成基準 1.1.1 を理解する
https://waic.jp/docs/UNDERSTANDING-WCAG20/text-equiv-all.html