Técnica HTML WCAG 2.2
H62Indicar la pronunciación con el elemento ruby
Nombre oficial en el W3C: Usar el elemento ruby
En pocas palabras
En algunos idiomas, como el japonés o el chino, una misma palabra escrita puede leerse de varias formas y significar cosas distintas. El elemento ruby añade junto al texto una pequeña nota con su pronunciación. Así quien lee sabe cómo se pronuncia y qué quiere decir.
Por qué es importante
En japonés, muchos caracteres (kanji) tienen varias lecturas. Quien está aprendiendo, los niños o las personas con dificultades de lectura pueden no saber cómo se pronuncia una palabra. Sin esa ayuda no entienden la frase.
El criterio 3.1.6 (nivel AAA) pide una forma de conocer la pronunciación cuando, sin ella, el significado es ambiguo. El elemento ruby pone la pronunciación junto al texto, visible para todos y marcada en el código.
Cómo se hace
- Rodee la palabra con
<ruby>. - Después de la palabra, escriba su pronunciación dentro de
<rt>. En japonés suele ir en hiragana. - Añada
<rp>con paréntesis alrededor delrt. Si el navegador no admite ruby, mostrará la pronunciación entre paréntesis. - Use ruby solo donde la pronunciación sea difícil o cambie el significado. No hace falta en cada palabra.
- Indique el idioma del texto con
lang, por ejemplolang="ja".
Cómo comprobarlo
- Localice las palabras cuya lectura es ambigua o difícil.
- Compruebe que en pantalla aparece su pronunciación encima o al lado.
- Con las herramientas del navegador (F12), compruebe que está marcada con
<ruby>y<rt>. - Compruebe que hay
<rp>con paréntesis para los navegadores sin soporte.
Ejemplo
El nombre de Tokio en japonés con su lectura en hiragana encima.
<p lang="ja">
<ruby>東京<rp>(</rp><rt>とうきょう</rt><rp>)</rp></ruby>に住んでいます。
</p>
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica H62 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
HTML
Descripción
El objetivo de esta técnica es usar la anotación ruby para proporcionar información sobre la pronunciación y el significado de una secuencia de texto cuyo significado viene determinado por su pronunciación.
Hay muchos idiomas en los que una secuencia de texto puede significar cosas distintas según cómo se pronuncie. Esto es habitual en las lenguas de Asia oriental, así como en hebreo, árabe y otros idiomas; también ocurre en inglés y en otras lenguas de Europa occidental.
La anotación ruby permite al autor anotar un «texto base», proporcionando una guía de pronunciación y, en algunos casos, también una definición. El ruby se usa habitualmente para textos en japonés y en otras lenguas de Asia oriental.
Hay dos tipos de marcado ruby: simple y complejo. El marcado ruby simple se aplica a una secuencia de texto, como una palabra o frase completa. Esta se conoce como texto «base» (elemento rb). La anotación ruby que indica cómo pronunciar el término (el elemento rt, o texto ruby) se muestra con una fuente más pequeña. (El término «ruby» procede de una fuente pequeña que se usaba con este fin en los textos impresos.) El texto ruby suele mostrarse encima del texto base o inmediatamente antes de él, es decir, justo encima del texto horizontal o justo a la derecha del texto vertical. A veces, en japonés se usa el ruby para dar el significado del texto en el lado del texto base opuesto (visualmente) al de la anotación fonética. El marcado ruby simple también ofrece una opción de «contenido alternativo» (fallback) para los agentes de usuario que no admiten marcado ruby (es decir, agentes de usuario que no admiten HTML).
El marcado ruby complejo permite dividir el texto base en unidades más pequeñas, cada una de las cuales puede asociarse con una anotación ruby independiente. El marcado ruby complejo no admite la opción de contenido alternativo.
La anotación ruby es poco habitual en idiomas como el hebreo, en los que las fuentes Unicode pueden incluir signos diacríticos que transmiten la pronunciación. También es poco habitual en inglés y en las lenguas europeas.
Nota: el motivo principal para indicar la pronunciación mediante ruby o cualquier otro medio es hacer que el contenido sea accesible para las personas con discapacidad que podrían leer y comprender el idioma del contenido si se les proporcionase información sobre la pronunciación. No es necesario proporcionar información sobre la pronunciación para las personas que no están familiarizadas con el idioma del contenido.
Ejemplos
Marcado ruby que proporciona información de pronunciación para una sigla
Este ejemplo usa la anotación ruby para dar la pronunciación de la sigla (acrónimo) formada por las primeras letras de las palabras Web Content Accessibility Guidelines. Las letras WCAG son la base (el elemento rb), y la información de pronunciación se muestra mediante el texto ruby (el elemento rt). El elemento de paréntesis ruby rp se usa para que los agentes de usuario que no admiten anotaciones ruby indiquen que el texto del elemento rt proporciona la información de pronunciación. La información de pronunciación se muestra entre paréntesis inmediatamente después del texto base. (Los agentes de usuario que admiten ruby no muestran los paréntesis.)
<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>
Anotación ruby para japonés
El siguiente es un ejemplo en japonés. En japonés, el ruby se usa para dar la lectura de los caracteres han (kanji). El elemento de paréntesis ruby rp se usa para que los agentes de usuario que no admiten anotaciones ruby indiquen que el texto del elemento rt proporciona la información de pronunciación. La información de pronunciación se muestra entre paréntesis inmediatamente después del texto base. (Los agentes de usuario que admiten ruby no muestran los paréntesis.)
<p>
<ruby>
<rb>慶應大学</rb>
<rp>(</rp>
<rt>けいおうだいがく</rt>
<rp>)</rp>
</ruby>
</p>
Pruebas
Procedimiento
Para cada secuencia de texto en la que se usa una anotación ruby para proporcionar información de pronunciación:
- Comprobar que un elemento
rtcontiene la información de pronunciación para cada secuencia de texto definida por el elementorb. - Si se usa marcado ruby simple, comprobar que el elemento
rpestá presente para indicar a los agentes de usuario que no admiten anotaciones ruby que el texto del elementortproporciona la información de pronunciación.
Resultados esperados
- Las comprobaciones n.º 1 y n.º 2 son verdaderas.
Recursos
- W3C Ruby Annotation (especificación de anotación ruby del W3C)
- CSS Ruby Annotation Layout Module (módulo de maquetación de anotaciones ruby de CSS)
- W3C Internationalization Techniques: "Using Ruby Markup" (técnicas de internacionalización del W3C: uso del marcado ruby)
-
HTML: el elemento
ruby -
HTML: el elemento
rp -
HTML: el elemento
rt
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica H62 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.