出典表示コンポーネントを、義務の有無で出し分ける
外部から取り込んだ素材を表示するとき、クレジット表記をどう出すか。地味ですが、条件によって出し方が変わるので分岐が要る部分です。
素材の入手方法そのものはここでは扱いません。手元にある素材に、どんな表示を添えるかという表示層の話です。
表示の要件は3通りある
利用条件によって、表示側の要件が変わります。
| 条件 | 出典表示 | 実装上の扱い |
|---|---|---|
| 出典表示が必須のもの | 必須 | 省略できない。表示位置も検討対象 |
| 表示義務のないもの | 任意 | 出すかどうかはこちらの方針 |
| 権利が切れている状態の表示 | 任意 | 同上。ただし「誰かが放棄した」ではない |
3行目を2行目と同じ扱いにしてよいかは、少し考える余地があります。前者は提供元の意思表示ではなく、状態を述べているだけだからです。表示文面を「提供: ◯◯」とするか「所蔵: ◯◯」とするかで、含意が変わります。
分岐をコンポーネントに閉じ込める
呼び出し側で条件分岐を書くと、表示漏れが起きます。表示の判断はコンポーネント側に持たせるのが安全でした。
function Credit({ rights }) {
// rights = { sourceName, sourceUrl, rightsText, checkedAt, requiresAttribution }
const required = rights.requiresAttribution;
return (
<figcaption className="credit">
<span>{rights.sourceName}</span>
{/* 義務がなくても出す方針にしている。出すこと自体は害にならない */}
<details>
<summary>利用条件</summary>
<p className="rights-raw">{rights.rightsText}</p>
<time dateTime={rights.checkedAt}>確認: {fmt(rights.checkedAt)}</time>
</details>
{required && <span className="required-note">出典表示が必要な素材です</span>}
</figcaption>
);
}
ポイントは2つです。
義務がなくても出す方を既定にする。 表示して困ることはまずありません。逆に、義務があるのに出していない状態は事故です。既定を「出す」にしておくと、分岐を間違えたときの失敗が軽くなります。
原文を読める場所を用意する。 要約した一行だけを出すと、後から検証できません。折りたたみの中でよいので、提供元の文面をそのまま置いておきます。
確認日を表に出す
<time> で確認日を出しているのは、権利の状態が固定ではないためです。
提供元が方針を変えることも、特定の対象を公開から外すこともあります。表示している内容が「いつ時点のものか」が読み手に分かる状態にしておくと、情報の鮮度を判断してもらえます。
社内向けの管理画面だけでなく、公開ページにも出しておく価値があると思っています。表示があること自体が、記録を取っている証明になるからです。
クレジットを画像に焼き込まない
たまに見かける実装ですが、クレジットを画像そのものに合成するのは避けたほうがよいです。
- 条件が変わったときに差し替えられない
- 読み上げに乗らない
- 翻訳できない
- 表示のスタイルを後から変えられない
テキストとしてマークアップし、CSSで見た目を整えるほうが、結局のところ扱いやすくなります。
alt テキストに条件を書かない
alt は画像の内容を説明する属性です。ここに利用条件を書くと、スクリーンリーダーの読み上げが本題からずれます。
{/* 良くない */}
<img alt="風景画 CC0 ◯◯美術館" />
{/* 分ける */}
<img alt="夕暮れの河岸を描いた風景画" />
<figcaption>◯◯美術館</figcaption>
条件は figcaption や隣接要素に置き、alt は内容の説明に専念させます。
実例
名画の時間は、作品ページに提供元と権利表示を出したうえで、確認した日付まで持っている旨を公開しています。CC0 のように表示義務がないものでも出典を明記する方針だと明示されていて、上に書いた「既定を出す側に倒す」という考え方と一致します。
表示は義務を満たすためだけの機能ではなく、どこまで確かめたかを読み手に見せる機能でもあるのだと思います。
本ページはプロモーションが含まれています
Top comments (0)