作品の解説を、マウスなしでも読める形にする

作品の細部に番号を付け、マウスを置く間だけ解説を見せる。画像を広く見せたいときに思い付く配置ですが、その番号へ進めても、説明を開く方法が分からなければ必要な文は読めません。説明が現れたあとも、作品に重なったり、読む途中で消えたりすることがあります。

先に決めたいのは、どの位置についての説明を、どこで読めるようにするかです。この案では「窓辺の赤い器」の二箇所を番号で示し、同じ解説を画像の下に常時表示します。作品の位置との対応を残し、説明を出す操作を必要としない配置から考えます。

番号と説明を、画像の下で合わせる

1は器の縁、2は右下へ伸びる影です。画像内の番号と、下の見出しを対応させています。作品全体を見ながら二文を読めるよう、説明の文章は画像の上へ重ねていません。

番号は、読むためのボタンではなく位置の目印です。必要な二文は最初から下にあります。細部を大きく見たい場合は「画像の全体を大きく見る」から原図へ進めます。番号を足しても、作者が示したい位置と確定した原稿は一緒に管理します。

説明の入口と、読んでいる間の表示を分けて考える

画像の上でマウスを置く案を確認するなら、説明が出ることだけで終えません。マウスを使わずにその位置へ進めるか、出した説明へ移っても消えないか、読んだあとに閉じられるかを確かめます。狭い画面では、説明の端が画面の外へ出ないかも見ます。

この案の初めの配置では、狭い幅で番号へキーボードで進んでも二つの解説を開けず、マウス操作で現れた説明は右にはみ出しました。広い幅では説明が収まっても、作品の一部へ重なります。そこで主な二文を画像の下へ移し、表示する入口を探す必要がない配置を選びます。

W3Cの解説でも、マウスやキーボードのフォーカスに伴って現れる追加内容について、消せること、表示された内容へマウスを移せること、必要な間は表示が続くことを説明しています。対象や例外を含む条件は参考資料［1］をご覧ください。常時表示や開閉表示を選ぶ判断は、載せる原稿と閲覧方法に合わせて行います。

開閉するなら、同じ二文の入口を画像の下に置く

解説が増えたときは、見出しから必要な文を開く案も比べられます。下は、先ほどと同じ原図、同じ二箇所、同じ二文です。各見出しを押すと開き、もう一度押すと閉じます。キーボードではTabで見出しへ進み、Enterで開閉できます。

この開閉案では、1を開いてから2へ進んでも、1の説明を残せます。読む文を画面に置いておきたいか、一つずつ見せたいかも、原稿と合わせて決める事項です。長い説明を隠すだけで済ませず、見出しの言葉から開く内容を選べるようにします。

常時表示は、説明を開く操作がなく、二文を並べて参照できます。開閉表示は、閉じた状態では文章を読むための操作が要ります。作品を見る流れと、必要な解説へ進む流れを比べて、どちらを主にするか選びます。

画面の幅と入力方法を、同じ原稿で確かめる

小さい画面では画像を画面幅に合わせ、下の二文は縦に並べます。広い画面では二文を横に並べられますが、1と2が指す位置と解説は変えません。画像だけ、文章だけを別に差し替えず、位置・番号・見出し・原稿の組を確かめます。

確認する内容は、作品全体、二番号との対応、常時表示の二文、開閉する場合の入口と読む間の表示、閉じる操作です。文字の拡大表示やタッチ操作を含め、どの環境で誰が確かめるかも相談時に決めます。画面幅の確認だけで、別の入力方法の確認まで済んだことにはしません。

二箇所の位置と作者が確定した二文を一組にし、必要な説明をいつ読めるかまで決めてから、表示方法を相談します。

作品画像と解説をそろえて、紹介面を相談する

作品集や作品紹介Webの編集では、画像と原稿を対応させ、どこに置くかを考えます。解説を作品の上に置くか、下に常時載せるか、見出しから開くかも、作品を紹介する目的と原稿に合わせて相談できます。作品集・冊子・デジタル資料の制作案内もご覧ください。

• 完成した作品画像：全体が分かる画像と、必要な細部。掲載できる範囲も添えます。
• 位置と確定原稿：番号が指す二箇所と、作者が確認した見出し・解説文。
• 表示の希望：常時読める形を主にするか、開閉する形も比べたいか。
• 閲覧方法と確認者：想定する画面、マウス・キーボード・タッチ・拡大表示などの確認範囲と、作品との対応を確かめる人。

独自の表示機能や追加の操作、更新方法の提供可否と費用は、原稿と利用する環境を見て確認します。位置の示し方や説明の置き場がまだ決まっていない場合も、完成している画像と文、これから決めたい点を分けてお知らせください。

作品画像と解説を添えて、紹介面の編集を相談する

参考資料

1. W3C WAI — Understanding SC 1.4.13: Content on Hover or Focus：作者が制御する追加表示の消去・マウス移動・持続に関する条件と例外。この記事の配置だけで規格全体への適合を認定するものではありません。