Voiceoverおためしページ:アイコンの読み上げいろいろ

       

このページでは特別にスクリーンリーダーモードへの変更ボタンを見えるようにしています。是非Voiceoverで聴き比べてみてください。

アイコンボックス

ここは説明用の段落です。「アイコンボックス」というパーツを使うと、アイコンを用いた直感的なメッセージ内容を伝えることができます。アイコンは画面の幅によって左または上に表示されます。「おすすめリンク集」ページや「学びのナビゲーター」ページなど、様々なところで使われています。

アイコンボックスひとつ目の本文です。これはインフォメーションマークがついている水色のボックスで、補足情報などを伝えるのに役立ちます。

アイコンボックスふたつ目の本文です。これはクエスチョンマークがついている黄色のボックスで、よくある疑問文や、導入の問いかけに使うと効果的です。

アイコンボックスみっつ目の本文です。これはエクスクラメーションマークがついている赤色のボックスで、注意が必要な情報を伝えることができます。

ここは段落です。上で紹介したものを含め、アイコンボックスには以下の種類があります。

  • インフォメーションマーク
  • クエスチョンマーク
  • エクスクラメーションマーク
  • 鉛筆のマーク
  • 吹き出しのマーク
  • OKを表すマルのマーク
  • NGを表すバツのマーク
  • GOODを表す、親指を立てたマーク
  • BADを表す、親指を下げたマーク
  • プロフィールを表す、人のシルエットマーク

見出しボックス

ここは説明用の段落です。「見出しボックス」というパーツを使うと、見出しと本文がセットになったエリアを作ることができます。ボックスは色付きの線で区切られ、見出し部分は線と同じ色で塗られています。更に、見出し文字の左側にアイコンを置くことができます。色による区切り・アイコン・見出しの三要素で情報のかたまりを表すことができます。「サイトマップ」や「学びのナビゲーター」ページで使われています。

見出しボックスの見出しです。

見出しボックスの本文です。見出しの左側には本のアイコンを置いてみました。

ここは段落です。見出しボックスにつけられるアイコンは52種類あったので、個別の解説は省略します。

タイトルとURLをコピーしました