Saltar al contenido principal

Texto

Utiliza un diseño de texto que facilite la lectura y estructura el contenido de manera semántica.

Tipo de letra

Utiliza un tipo de letra:

  • Clara, sin ornamentos que puedan dificultar la comprensión.
  • Con formas bien diferenciadas, para evitar la confusión entre caracteres parecidos (ejemplo: l y 1).
  • Que incluya todos los caracteres y estilos de texto necesarios (ejemplo: existen fuentes sin tilde y sin ñ, lo cual es un problema para escribir en español).
  • Con suficiente espacio entre caracteres (kerning).
  • Con ascendentes y descendentes bien definidos (ejemplo: las líneas verticales de la letras b y p).

Nota: Un tipo de letra que sea fácilmente legible, no solo ayuda a las personas con trastornos de la lectura, sino en general a todos los usuarios.

Tamaño de fuente

Utiliza unidades relativas (em o rem) para el tamaño de fuente. De esta manera el usuario puede cambiar el tamaño de letra en su navegador.

Ejemplo: Tamaño de fuente con unidades rem.

CSS
html {
    font-size: 1.125rem;
}

h1 {
    font-size: 2rem;
}

En el ejemplo anterior se establece un tamaño de fuente para toda la página de 1.125 veces el tamaño definido en el navegador. Si el tamaño de fuente del navegador son 16px, entonces equivale a 18px. Para h1 indicamos 2 veces el tamaño base, en este caso serán 36px.

Nota: El zoom del navegador permite aumentar el tamaño del texto aunque se usen tamaños fijos (píxeles), pero afecta a todo el contenido de la página, no solo al texto.

Contraste

El contraste ente el color de texto y el color de fondo debe ser suficiente para que sea percibido por personas con sensibilidad reducida al contraste o en pantallas en blanco y negro.

Símbolo de contraste

Para comprobar el contraste puedes utilizar una herramienta para calcular el contraste del color.

Aviso: Los colores con un contraste demasiado alto, como negro puro sobre blanco, pueden dificultar la lectura a algunos usuarios.

Interlineado

El interlineado se refiere a la separación vertical entre las líneas del texto. El espacio recomendado es de 1.5 veces el tamaño de fuente.

Ejemplo: Interlineado definido a 1.5.

CSS
p {
    line-height: 1.5;
}

Longitud de línea

La longitud de línea debería estar entre los 45 y los 80 caracteres. Una longitud mayor puede ser un problema para algunos lectores a la hora de encontrar el inicio de la línea siguiente, y una longitud menor provoca saltos de línea demasiado frecuentes, dificultando la lectura.

Para limitar el ancho de página podemos utilizar la propiedad max-width con unidades relativas (rem). De esta manera, si el tamaño de fuente cambia en función del tamaño de pantalla, el ancho se ajustará proporcionalmente.

CSS
main {
    max-width: 40rem;
}

Nota: Es recomendable utilizar un diseño fluido, que permita al usuario cambiar el tamaño de la ventana para encontrar la longitud de línea que le resulte más cómoda.

Alineación

Hay que evitar justificar el texto, debido a que se crean grandes huecos vacíos entre las palabras que dificultan la lectura.

La solución es alinear el texto de la página a un lado, normalmente a la izquierda en los idiomas que se escriben de izquierda a derecha.

Encabezados

Los encabezados sirven para identificar las secciones de un documento e indicar su importancia relativa. El texto del encabezado debe ser claro y descriptivo.

Existen seis niveles de encabezado ( h1, h2, h3, h4, h5 y h6 ) y deben anidarse correctamente, es decir, respetando el orden lógico.

Los usuarios de lectores de pantalla utilizan a menudo los encabezados para navegar dentro de una página web.

Ejemplo

Título 1

Esta es la primera sección del documento.

Título 2

Esta es la primera subsección

Título 2

Y esta es la segunda subsección.

HTML
<h1>Título 1</h1>
<p>Esta es la primera sección del documento.</p>

<h2>Título 2</h2>
<p>Esta es la primera subsección</p>

<h2>Título 2</h2>
<p>Y esta es la segunda subsección.</p>

Aviso: Evita usar los encabezados para cambiar el tamaño del texto. Recuerda que HTML indica la estructura del contenido y que de la apariencia visual se encarga CSS.

Párrafos

Los párrafos nos permiten dividir el texto en fragmentos temáticos, facilitando así su lectura.

Es recomendable limitar los párrafos a una única idea principal, para que resulten más fáciles de comprender.

Ejemplo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</p>

Aviso: Evita el uso de párrafos vacíos para crear saltos de línea, los lectores de pantalla los leen como “en blanco”.

Listas

Las listas se utilizan para mostrar un conjunto de elementos consecutivos.

Listas no ordenadas

Las listas no ordenadas (ul) se utilizan cuando los elementos no tienen un orden específico.

Ejemplo
  • Peras
  • Manzanas
  • Melones
  • Sandías
HTML
<ul>
    <li>Peras</li>
    <li>Manzanas</li>
    <li>Melones</li>
    <li>Sandías</li>
</ul>

Listas ordenadas

Las listas ordenadas (ol) indican que los elementos siguen un orden progresivo o una secuencia.

Ejemplo
  1. Encender el ordenador
  2. Abrir el navegador
  3. Ir a la web de búsqueda
  4. Teclear el término a buscar
HTML
<ol>
    <li>Encender el ordenador</li>
    <li>Abrir el navegador</li>
    <li>Ir a la web de búsqueda</li>
    <li>Teclear el término a buscar</li>
</ol>

Listas de definición

Las listas de definición (dl) sirven para mostrar definiciones de palabras y se estructuran como término (dt) y definición (dd).

Ejemplo
HTML
Lenguaje de marcado para la elaboración de páginas web.
CSS
Lenguaje usado para definir y crear la presentación de páginas web.
YAML
Formato de serialización de datos legible por humanos.
HTML
<dl>
    <dt>HTML</dt>
    <dd>Lenguaje de marcado para la elaboración de páginas web.</dd>
    <dt>CSS</dt>
    <dd>Lenguaje usado para definir y crear la presentación de páginas web.</dd>
    <dt>YAML</dt>
    <dd>Formato de serialización de datos legible por humanos.</dd>
</dl>

Abreviaciones

Las abreviaciones incluyen tanto abreviaturas, por ejemplo: pág. (página) como siglas, por ejemplo: ONU (Organización de las Naciones Unidas).

El elemento HTML para indicar una abreviación es abbr. Y para indicar la descripción completa debemos incluir el atributo title.

Ejemplo

El PIB es el valor total de bienes y servicios producidos por un país durante un período determinado.

HTML
<p>El <abbr title="Producto Interior Bruto">PIB</abbr>
es el valor total de bienes y servicios producidos por un país
durante un período determinado.</p>

Aunque debido a las diferentes formas de interpretar el atributo title por parte de los navegadores y lectores de pantalla, se recomienda incluir la descripción completa de la abreviación, la primera vez que aparece en la página.

Ejemplo

El Producto Interior Bruto (PIB) es el valor total de bienes y servicios producidos por un país durante un período determinado.

HTML
<p>El Producto Interior Bruto (<abbr>PIB</abbr>)
es el valor total de bienes y servicios producidos por un país
durante un período determinado.</p>

Citas

Las citas pueden ser en línea, cuando aparecen dentro de un párrafo, o en bloque, cuando forman un párrafo.

Cita en línea

Ejemplo

El poeta dijo: En muchas ocasiones la lectura de un libro ha hecho la fortuna de un hombre, decidiendo el curso de su vida.

HTML
<p>El poeta dijo: <q>En muchas ocasiones la lectura de un libro
ha hecho la fortuna de un hombre, decidiendo el curso
de su vida.</q></p>

Cita en bloque

Ejemplo

El cuerpo humano es el carruaje; el yo, el hombre que lo conduce; el pensamiento son las riendas, y los sentimientos los caballos.

HTML
<blockquote><p>El cuerpo humano es el carruaje; el yo,
el hombre que lo conduce; el pensamiento son las riendas,
y los sentimientos los caballos.</p></blockquote>

Enfatizar texto

Existen dos elementos HTML para enfatizar las palabras:

HTML
<em>Cursiva</em>
<strong>Negrita</strong>

Idioma

Indicar el idioma ayuda a las aplicaciones de síntesis de voz, traducción y corrección de textos a presentar la información de forma correcta.

Identificamos el idioma mediante el atributo lang.

Ejemplo 1: Identifica el idioma de la página añadiendo el atributo lang a la etiqueta html.

HTML
<html lang="es">

Ejemplo 2: Marca los cambios de idioma usando el atributo lang en el elemento que engloba al texto.

HTML
<p>El lenguaje (<abbr lang="en" title="Hypertext Markup
Language">HTML</abbr>)...</p>

Nota: Los códigos de los idiomas siguen el estándar ISO 639.

Lenguaje

Utiliza un lenguaje simple y claro. Evita la jerga y los tecnicismos innecesarios, siempre que no se trate de textos dirigidos a profesionales o expertos en la materia.

Esto no solo ayuda a las personas con dificultades cognitivas, sino también a las que no dominan el idioma o no son especialistas en el tema.

Texto oculto

En algunas ocasiones queremos que un texto no sea visible pero que sea accesible para los lectores de pantalla.

Para ocultar un texto visualmente podemos usar la propiedad de CSS clip.

Nota: La propiedad clip define qué porción de un elemento es visible y solo se aplica sobre elementos con position: absolute o position: fixed.

Ejemplo 1: Código para ocultar texto.

CSS
.screenreader {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

Si queremos que el texto oculto sea visible al situar el foco sobre él, como en el caso de un enlace para saltar la navegación, podemos añadir los siguientes estilos.

Ejemplo 2: Código para hacer visible el texto oculto al enfocarlo.

CSS
.screenreader-focus:focus {
    clip: auto;
    height: auto;
    overflow: visible;
    position: static;
    width: auto;
}

Aviso: La propiedad clip está obsoleta y la recomendación oficial es utilizar clip-path. El problema es que clip-path aún no está ampliamente soportada por los navegadores.