The <ruby>, <rt>, and <rp> Elements
As defined in the HTML Living Standard, these elements are used for ruby annotations—small extra text attached to the main text to indicate pronunciation or meaning, common in Japanese (furigana) and Chinese (pinyin) typography.
漢 字
(Displays characters for "Kanji" with phonetic hints above them.)
<ruby>
Base Text <rp>(</rp><rt>Annotation</rt><rp>)</rp>
</ruby>
View HTML Living Standard: Ruby element
Roles of the Elements
<ruby>: The container for the entire annotation block.<rt>(Ruby Text): Marks the actual annotation (the hint). Browsers typically render this in a smaller font size above or beside the base text.<rp>(Ruby Parenthesis): Provides fallback punctuation (like parentheses) for browsers that do not support ruby rendering. This content is hidden in modern browsers.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Ruby annotations are a semantic relationship. Using these tags ensures that screen readers can distinguish between the primary text and the auxiliary hint. Without these tags, a screen reader might read "Kanji Kanji" or "Base Text Annotation" as a single confusing string. The <ruby> structure identifies the annotation's purpose programmatically.
The Necessity of <rp>
While almost all modern browsers support Ruby, <rp> remains a standard requirement for robust, accessible design.
If ruby is not supported, the text renders as: Base Text (Annotation).
Without <rp>, it would render as: Base TextAnnotation.
<!-- Robust Fallback Pattern -->
<ruby>
明日 <rp>(</rp><rt>ashita</rt><rp>)</rp>
</ruby>
Best Practices
- Language Declaration: Always ensure the
langattribute is set on the<html>tag or the<ruby>tag itself to help screen readers use the correct phonetic rules. - Contrast: Since
<rt>text is smaller, pay extra attention to WCAG SC 1.4.3 (Contrast). Small text requires a higher perception of clarity. - Avoid for non-linguistic hints: Do not use Ruby for general tooltips or "glosses" in English. Use
<dfn>or ARIA-based tooltips for those scenarios.