This is an unpublished editor’s draft that might include content that is not finalized. View the published version

Skip to content

Technique F999:Failure of Success Criterion 1.3.1 due to visible ruby annotations thatare not programmatically determinable

About this Technique

This technique relates to 1.3.1: Info and Relationships (Failure).

This failure applies to HTML.

Description

This document describes a failure that occurs when text is visually presented to convey ruby annotations without using appropriate semantic markup.

In the following example, an author intends to indicate the pronunciation of the Japanese phrase 見掛け倒し by annotating each of the kanji with み, か, and だお respectively.

The Japanese phrase 見掛け倒し with ruby annotations of み, か, and だお, each positioned above its respective kanji.

Examples

Example 1: Misuse of <abbr title> to convey ruby annotations

In this example, a well-meaning author has used <abbr> (i.e., abbreviation) elements and custom CSS to visually convey ruby annotations. This is a failure because assistive technologies cannot programmatically determine the structured ruby annotations that are visually presented. 

<abbr title="み">見</abbr><abbr title="か">掛</abbr>け<abbr title="だお">倒</abbr>し
abbr {
  position: relative;
  text-decoration: none;

  &::before {
    content: attr(title);
    position: absolute;
    inset-block-start: -1.1em;
    inset-inline-start: 50%;
    translate: -50%;
    font-size: 0.5em;
    white-space: nowrap;
  }
}

Failure example of misuse of <abbr title> to convey ruby annotations.

Example 2: Misuse of <sup> to convey ruby annotations

In this example, a well-meaning author has used <sup> (i.e., superscript) elements and custom CSS to visually convey ruby annotations. This is a failure because assistive technologies cannot programmatically determine the structured ruby annotations that are visually presented. 

<span class="annotated">見<sup>み</sup></span><span class="annotated">掛<sup>か</sup></span>け<span class="annotated">倒<sup>だお</sup></span>し
.annotated {
  position: relative;
  text-decoration: none;

  & > sup {
    position: absolute;
    inset-block-start: -1.1em;
    inset-inline-start: 50%;
    translate: -50%;
    font-size: 0.5em;
    white-space: nowrap;
  }
}

Failure example of misuse of <sup> to convey ruby annotations.

Example 3: Misuse of <span> to convey ruby annotations

In this example, an author has used <span> elements and custom CSS to visually convey ruby annotations. This is a failure because assistive technologies cannot programmatically determine the structured ruby annotations that are visually presented. 

<span class="annotated">見<span>み</span></span><span class="annotated">掛<span>か</span></span>け<span class="annotated">倒<span>だお</span></span>し
.annotated {
  position: relative;
  text-decoration: none;

  & > span {
    position: absolute;
    inset-block-start: -1.1em;
    inset-inline-start: 50%;
    translate: -50%;
    font-size: 0.5em;
    white-space: nowrap;
  }
}

Failure example of misuse of <span> to convey ruby annotations.

Tests

Procedure

For styled text that conveys information:

  1. Check if there is any styled text that conveys structural information.
  2. Check that in addition to styling, the proper semantic structure is used with the text to convey the information.

Expected Results

  • If check 1 is true and check 2 is false, this failure condition applies and the content fails this success criterion.
Back to Top