ruby 要素を使用する

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

XHTML 1.1 及び HTML5

訳注

XHTML 1.1 は Superseded Recommendation としてマークされ、廃止された仕様である。

これは達成基準 3.1.6: 発音 (十分な達成方法) に関する達成方法である。

解説

この達成方法の目的は、読み方の情報、及び意味が読み方によって決まる場合の連続するテキストの意味に関する情報を提供するために、ルビを振ることである。

多くの言語では、連続するテキストが読み方によって意味が異なる場合がある。これは、ヘブライ語、アラビア語、ほかの諸言語と同様に東アジア言語によくある。また、英語など西ヨーロッパ言語でも起こる。

コンテンツ制作者はRuby Annotationによって、読み方や、場合によっては定義を提供すべく、「ベーステキスト」に注釈を加えることができる。日本語など東アジア言語のテキストでは、ルビが当たり前に利用される。Ruby Annotationは XHTML 1.1 又は HTML5 のモジュールのひとつとして定義されている。

ルビのマークアップには単純と複雑の 2 種類がある。単純なルビのマークアップは完全な言葉やフレーズのようなテキストの実行が適用される。これは"ベース"テキスト (rb 要素) として知られている。ルビの注釈はどのように読むか示す用語 (rt 要素、または Ruby テキスト) を小さなフォントで表示している。("ルビ"という用語は、印刷でこの目的のために使用される小さい活字が由来)。ルビのテキストは通常、ベーステキストの上または直前に、つまり、横書きのテキストでは直上、縦書きのテキストでは右にレンダリングされる。日本語では、テキストの意味を提供するために、読み方のルビに対して (視覚的に) ベーステキストの反対側に、ルビを用いることもある。また、単純なルビのマークアップでは、ルビのマークアップをサポートしていないユーザエージェント (つまり、XHTML 1.1 又は HTML5 をサポートしていないユーザエージェント) のために、"フォールバック"オプションを提供している。

複合ルビマークアップでは、ベーステキストを小さな単位に分け、ルビ注釈を別々に関連づけることができる。複合ルビマークアップではフォールバックオプションはサポートされない。

読み方を伝える発音区別符号が Unicode フォントに含まれているヘブライ語などの言語では、ルビが用いられるのは稀である。また、英語やヨーロッパ言語でも珍しい。

注記: ルビ又は他の方法によって読み方を示す主な理由は、読み方さえ提供されていれば、コンテンツの書かれた言語を読み、理解することが可能な、障害のある利用者がコンテンツにアクセスできるようにするためである。ただし、そのコンテンツが書かれている言語に馴染みがない利用者のために、読み方を提供する必要はない。

事例

例 1: 頭文字語の読み方を提供するルビのマークアップ

この事例では、Web Content Accessibility Guidelines という複数の単語の 1 文字目をとって作った頭文字語 (頭字語) の読み方を提供するために、ルビを用いている。WCAG という文字がルビベース (rb 要素) であり、読み方をルビテキスト (rt 要素) として示す。ルビのカッコを指定する rp 要素は、ルビをサポートしていないユーザエージェントに対して、rt 要素で囲まれたテキストが読み方を提供していることを示すために用いられる。ベーステキストの直後にカッコ付きで読み方をレンダリングする (ルビをサポートしているユーザエージェントでは、カッコは表示されない)。

<p>When we talk about these guidelines, we often just call them
  <ruby>
    <rb>WCAG</rb>
    <rp>(</rp>
      <rt>Wuh-KAG</rt>
    <rp>)</rp>
  </ruby>.
</p>

例 2: 日本語のルビ注釈

次は、日本語の事例である。日本語では漢字の読み (ふりがな) を提供するのにルビが用いられる。ルビのカッコを指定する rp 要素は、読み方を提供する rt 要素のテキスト、つまりルビをサポートしていないユーザエージェントが利用し、ベーステキストの直後にカッコ付きで読み方をレンダリングする (ルビをサポートしているユーザエージェントでは、カッコは表示されない) 。

<p>
  <ruby>
    <rb>慶應大学</rb>
    <rp>(</rp>
    <rt>けいおうだいがく</rt>
    <rp>)</rp>
  </ruby>
</p>    

参考リソース

参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

手順

読み方を提供するためにルビ注釈が使用されている、連続するテキストについて:

  1. rb 要素で定義した連続するテキストに、rt 要素で読み方が指定してあることを確認する。
  2. 単純ルビマークアップを用いている場合、rp 要素があることを確認し、ルビ注釈をサポートしていないユーザエージェントに対して、rt 要素に囲まれたテキストが読み方を提供している。

期待される結果

  • #1 及び #2 の結果が真である。