a11y tips #2: notas a pie de página accesibles

Qué son y para qué sirven las notas a pie de página

Una nota al pie de página (footnote, en inglés) es un recurso textual que ofrece información adicional, aclaratoria o bibliográfica. Su finalidad es permitir que las personas accedan al contenido complementario cuando lo necesiten, sin que este interfiera con la lectura del contenido principal.

Características de una nota a pie de página

• Referencia contextual clara: debe establecerse un vínculo visible y comprensible entre el marcador en el texto (generalmente un superíndice o un número) y la nota al pie.
• Navegación bidireccional: se debe permitir ir de la referencia en el texto a la nota y volver a la posición original.
• Contenido relevante y conciso: la nota debe ampliar o contextualizar el contenido sin introducir digresiones innecesarias.
• Si bien en documentos ofimáticos aparecen en el pie de la página en la que se invocan, en un sitio web lo más habitual es ubicarlas al final de la página.

Utilidad, uso previsto y consideraciones de diseño

• Aportan aclaraciones, fuentes o comentarios que enriquecen el contenido sin romper la fluidez de la lectura.
• Se utilizan habitualmente en documentos académicos, libros digitales, artículos extensos o ensayos críticos.

Se acostumbra a utilizar cuando se requiere:

• Incluir referencias bibliográficas sin interrumpir la argumentación principal.
• Aportar comentarios o explicaciones complementarias.

No debe utilizarse cuando:

• El contenido de la nota es esencial para comprender el texto y no debería estar separado.

Ten en cuenta que:

• Si las notas se implementan incorrectamente, pueden romper el flujo de lectura o dificultar el acceso a la información.
• La interacción con la nota no debe implicar acciones complejas que requieran demasiados clics.
• El uso de modales o elementos interactivos poco accesibles puede impedir que algunos usuarios accedan a las notas.

Requisitos de accesibilidad

• Los superíndices deben incorporar información semántica (aria-label) para que los lectores de pantalla puedan anunciar que se trata de una nota al pie, así como otros atributos y roles ARIA adicionales que se muestran más adelante.
• Navegación con teclado: las notas deben poder activarse usando solo el teclado.
• Debe existir un mecanismo claro y accesible para volver desde la nota al punto del texto donde fue invocada.
• Si se presentan en el pie de página o al final del documento, deben estar etiquetadas semánticamente como tal (por ejemplo, dentro de una <section> o <aside> con el rol adecuado).

Criterios de conformidad WCAG relacionados

• 1.3.1: Información y relaciones (nivel A).
• 2.1.1: Teclado (nivel A).
• 2.4.4: Propósito del enlace (nivel A).
• 4.1.2: Nombre, rol, valor (nivel A).

Código HTML y CSS

A continuación, se muestra un ejemplo de implementación de código en el que se utilizan los siguientes elementos, atributos y roles:

• El elemento <sup> permite representar texto en formato superíndice (para notas, fórmulas matemáticas, notación ordinal…). Aunque su aportación es fundamentalmente visual (presentación) tiene un propósito semántico claro.
• El indicador de la referencia –normalmente indicada mediante un número correlativo– es un enlace que apunta al identificador de un contenido dentro de la misma página. La referencia también debe contar con un identificador propio para permitir crear un enlace de vuelta al punto exacto del artículo desde el cual el lector ha saltado a la zona de notas. El rol doc-noteref forma parte de los Digital Publishing WAI-ARIA Roles o DPUB ARIA Roles, una extensión de ARIA pensada específicamente para mejorar la accesibilidad de publicaciones digitales como libros electrónicos, artículos académicos, periódicos y revistas, documentos técnicos o legales. doc-noteref es un rol específico para marcar una referencia a una nota.
• La propiedad aria-describedby hace referencia al identificador del elemento que describe el bloque de contenido dentro del que se encuentran las notas a las que apuntan las referencias del texto.
• La sección de las notas se marca utilizando un <aside>. El elemento <aside> indica contenido complementario al contenido principal (<article>), lo cual es precisamente lo que son las notas al pie. También se podría marcar con una <section>, aunque este elemento indica una sección temática independiente, no necesariamente «complementaria» o relacionada directamente con el contenido. Incluirlas dentro del elemento <footer> del artículo tampoco lo consideramos adecuado pues, de acuerdo con la especificación HTML, está pensado para incluir información de autoría, copyright, contacto, un mapa del sitio… Finalmente, un bloque <div> sería la peor opción de todas pues no cuenta con semántica propia. El elemento <aside> cuenta con el rol doc-endnotes que indica a las ayudas técnicas que la región contiene las notas al pie del documento. Finalmente, incluye la propiedad aria-labelledby para indicar el elemento que etiqueta esta región.
• Las notas forman parte de una lista ordenada (<ol>), pues se presentan como una secuencia numerada. Los lectores de pantalla reconocen las listas y las anuncian (por ejemplo, «Lista con 10 elementos. Elemento 1: Texto de la nota 1…»). Esto da contexto estructural adicional a los usuarios ciegos o con dificultades cognitivas, ya que se les informa del número de notas y de la posición en la que se encuentran.
• Cada nota es un elemento de lista (<li>) con su propio identificador (el que le permite ser enlazada). También se incluye para cada una un enlace que apunta al lugar de origen (referencia). Este enlace cuenta con la propiedad aria-label que puede utilizarse para proporcionar una descripción clara y significativa del propósito del enlace. Esto es especialmente útil cuando el texto ancla del enlace es simplemente un icono con una flecha, aunque puede ser redundante si el propósito del enlace queda claro con el texto ancla. No obstante, combinaciones como, por ejemplo, NVDA+Firefox, si encuentran un aria-label en un enlace, leen esta descripción en lugar del texto ancla. Finalmente, el propósito del rol doc-backlink es identificar un enlace que devuelve al lector desde una nota al pie (o nota final) al lugar original donde fue citada en el texto.
• Por lo que respecta a los estilos, se definen cambios sobre los elementos interactivos (referencias y notas) cuando reciben el foco o el usuario hace hover para facilitar la localización visual en la página.

Referencias y otros ejemplos

W3C (2025). Digital Publishing WAI-ARIA Module 1.1.