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