引用セクション

引用ブロック

引用ブロックのコンポーネントにはsu-quote-blockのクラス名を付与します。

blockquote要素と必要に応じてcite要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。文字のスタイルや背景の塗りが加わります。

引用された文章として表示するテキストです。本文とは異なる引用されたテキストであることが明示できるようスタイリングされ、他のセクションとは独立したブロックセクションとして表示されます。

<blockquote class="su-quote-block" cite="https://example.com/?ref=******">
  <p>引用テキスト</p>
  <cite aria-label="この引用は引用元からのものです" aria-hidden="true">引用元</cite>
</blockquote>

引用インラインテキスト

引用インラインテキスト用テキストのコンポーネントにはsu-quote-inlineのクラス名を付与します。

q要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。文字のスタイルや背景の塗りが加わります。

短い語句の引用として表示するテキストです。本文とは異なる引用されたテキストであることが明示できるようスタイリングされ、インラインセクションとして表示されます。

<q class="su-quote-inline" cite="https://example.com/?ref=******">引用テキスト</q>

アクセシビリティの支援

引用ブロック、引用インラインテキストはアクセシビリティの対応として、blockquote要素やq要素に対してcite属性を使って引用元のURLを設定し、aria-label属性を使って引用元の説明を追加することで、スクリーンリーダー使用時にも適切に引用内容を伝えることができます。引用元の説明がテキストと重複する場合にはaria-hidden属性を使って適切に説明できるようにします。

<blockquote class="su-quote-block" cite="https://example.com/?ref=******">
  <p>引用テキスト</p>
  <cite aria-label="この引用は引用元からのものです" aria-hidden="true">引用元</cite>
</blockquote>

...

<q class="su-quote-inline" cite="https://example.com/?ref=******">引用テキスト</q>