Técnica Scripts de cliente WCAG 2.2
SCR30Ofrecer un control que complete el texto de los enlaces a petición
Nombre oficial en el W3C: Usar scripts para cambiar el texto de los enlaces
En pocas palabras
Algunos enlaces solo se entienden por lo que los rodea, como varios «Leer más» en una lista de noticias. Esta técnica pone al principio de la página un control que, al activarlo, completa con JavaScript el texto de esos enlaces. Así cada persona elige entre enlaces cortos o enlaces que se entienden solos.
Por qué es importante
Muchas personas que usan lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) consultan una lista con todos los enlaces de la página. En esa lista, diez «Leer más» no dicen nada.
Otras personas prefieren textos cortos, porque oír el contexto en cada enlace les resulta repetitivo. Con esta técnica, cada cual elige la opción que le resulta más cómoda.
Cómo se hace
- Coloque cerca del principio de la página un botón o enlace con un texto que se entienda solo, como «Mostrar enlaces con texto completo».
- Marque los enlaces que necesitan contexto. Por ejemplo, con un atributo
data-que guarde el texto que falta. - Al activar el control, el script añade ese texto dentro de cada enlace. «Leer más» pasa a ser «Leer más sobre las ayudas al alquiler».
- Permita volver a la versión corta con el mismo control.
- Si es posible, recuerde la elección con una cookie o en el perfil de la persona. Así no tendrá que repetirla en cada página.
Cómo comprobarlo
- Compruebe que cerca del principio de la página hay un control para ampliar los enlaces y que su texto se entiende solo.
- Anote los enlaces cuyo destino no se entiende sin leer lo que los rodea.
- Active el control.
- Revise de nuevo esos enlaces. Ahora su texto, por sí solo, debe explicar adónde llevan. La lista de enlaces del lector de pantalla ayuda a verlo (en NVDA, Insert + F7).
Ejemplo
Un botón añade a cada «Leer más» el texto que explica su destino.
<button type="button" id="ampliar">Mostrar enlaces con texto completo</button>
<h2>Ayudas al alquiler</h2>
<p>Plazo abierto hasta el 30 de noviembre.
<a href="/ayudas-alquiler" data-extra=" sobre las ayudas al alquiler">Leer más</a></p>
<script>
document.getElementById('ampliar').addEventListener('click', function () {
document.querySelectorAll('a[data-extra]').forEach(function (enlace) {
enlace.textContent += enlace.dataset.extra;
});
}, { once: true });
</script>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 SCR30 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
Scripts del lado del cliente usados con HTML
Descripción
El propósito de esta técnica es permitir que los usuarios elijan que se añada información adicional al texto de los enlaces, de modo que los enlaces puedan entenderse fuera de contexto.
Algunos usuarios prefieren enlaces autocontenidos, en los que no haga falta explorar el contexto del enlace. Otros usuarios consideran que incluir la información de contexto en cada enlace resulta repetitivo y reduce su capacidad para usar el sitio. Entre los usuarios de tecnologías de asistencia, las opiniones que ha recibido el grupo de trabajo sobre qué opción es preferible han estado divididas. Esta técnica permite que los usuarios elijan el enfoque que mejor les funcione.
Se proporciona un enlace cerca del principio de la página que ampliará el texto de los enlaces de la página, de modo que no haga falta ningún contexto adicional para entender el propósito de ningún enlace. Siempre debe ser posible entender el propósito del enlace de ampliación directamente a partir de su texto.
Esta técnica amplía los enlaces únicamente para la vista actual de la página. También es posible, y en algunos casos sería recomendable, guardar esta preferencia en una cookie o en un perfil de usuario del lado del servidor, de modo que los usuarios solo tengan que hacer la selección una vez por sitio.
Ejemplos
Este ejemplo usa JavaScript para añadir información contextual directamente al texto de un enlace. La clase del enlace se utiliza para determinar qué texto adicional debe añadirse. Cuando se activa el enlace «Expand Links» (ampliar enlaces), se examina cada enlace de la página para ver si debe añadírsele texto adicional.
...
<script>
var expanded = false;
var linkContext = {
"hist":" version of The History of the Web",
"cook":" version of Cooking for Nerds"
};
function doExpand() {
var links = document.links;
for (var i=0; i<links.length; i++) {
var link = links[i];
var cn = link.className;
if (linkContext[cn]) {
span = link.appendChild(document.createElement("span"));
span.setAttribute("class", "linkexpansion");
span.appendChild(document.createTextNode(linkContext[cn]));
}
}
objUpdate = document.getElementById('expand');
if (objUpdate) {
objUpdate.childNodes[0].nodeValue = "Collapse links";
}
expanded = true;
}
function doCollapse() {
objUpdate = document.getElementById('expand');
var spans = document.getElementsByTagName("span");
var span;
// go backwards through the set as removing from the front changes indices
// and messes up the process
for (i = spans.length - 1; i >= 0; i--) {
span = spans[i];
if (span.getAttribute("class") == "linkexpansion")
span.parentNode.removeChild(span);
}
if (objUpdate) {
objUpdate.childNodes[0].nodeValue = "Expand links";
}
expanded = false;
}
function toggle() {
if (expanded) doCollapse();
else doExpand();
}
</script>
...
<h1>Books for download</h1>
<p><button id="expand" onclick="toggle(); type="button">Expand Links</button></p>
<ul>
<li>The History of the Web:
<a href="history.docx" class="hist">Word</a>,
<a href="history.pdf" class="hist">PDF</a>,
<a href="history.html" class="hist">HTML</a>
</li>
<li>Cooking for Nerds:
<a href="history.docx" class="cook">Word</a>,
<a href="history.pdf" class="cook">PDF</a>,
<a href="history.html" class="cook">HTML</a>
</li>
</ul>
...Ejemplo funcional de este código: Providing link expansions on demand (ampliar los enlaces a petición).
Pruebas
Procedimiento
- Comprobar que hay un enlace cerca del principio de la página para ampliar los enlaces.
- Comprobar que el enlace identificado en el paso 1 puede identificarse únicamente a partir del texto del enlace.
- Localizar los enlaces de la página que no puedan identificarse únicamente a partir del texto del enlace.
- Activar el control identificado en el paso 1.
- Comprobar que ahora el propósito de los enlaces identificados en el paso 3 puede identificarse únicamente a partir del texto del enlace.
Resultados esperados
- Las comprobaciones n.º 1, n.º 2 y n.º 5 son verdaderas.
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 SCR30 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.