El nombre accesible es el texto que el lector de pantalla lee en voz alta cuando el usuario llega a un elemento interactivo. Para un bot\u00f3n, es el texto que explica la acci\u00f3n. Para un enlace, es el texto que describe el destino.<\/p>\n
El criterio WCAG 4.1.2 exige que todos los componentes de interfaz de usuario tengan un nombre que la tecnolog\u00eda de asistencia pueda leer. Cuando a\u00f1ades Imagina a un usuario de lector de pantalla navegando con teclado. El lector anuncia \u00abenlace\u00bb pero no dice nada m\u00e1s. El usuario no sabe a d\u00f3nde lleva ni si le interesa. Tiene que hacer clic a ciegas o saltarse el elemento y perderse contenido potencialmente relevante.<\/p>\n Esto ocurre exactamente con elementos como Hay tres formas de aportar un nombre accesible a un comando ARIA:<\/p>\n 1. Texto visible en el interior del elemento<\/strong> \u2014 la m\u00e1s sencilla y la preferida:<\/p>\n 2. 3. El error m\u00e1s frecuente es el ancla vac\u00eda usada como ancla de p\u00e1gina. Es un patr\u00f3n muy com\u00fan en WordPress y constructores de p\u00e1ginas para crear puntos de navegaci\u00f3n interna:<\/p>\n La soluci\u00f3n m\u00e1s sencilla es eliminar el Otro error habitual: Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<\/div><\/div><\/div>role=\"link\"<\/code>, role=\"button\"<\/code> o role=\"menuitem\"<\/code> a un elemento, le est\u00e1s prometiendo a los lectores de pantalla que ese elemento es interactivo. Si no tiene nombre, el usuario llega a un elemento que sabe que puede accionar, pero no sabe para qu\u00e9 sirve.<\/p>\n\u00bfPor qu\u00e9 es importante?<\/h2>\n
<a id=\"content\" role=\"link\"><\/a><\/code>: el elemento existe en el DOM, es focusable, y el lector de pantalla lo anuncia como \u00abenlace\u00bb \u2014 pero no tiene ning\u00fan texto ni etiqueta que explique nada.<\/p>\nC\u00f3mo corregirlo<\/h2>\n
<!-- \u2705 El texto interior act\u00faa como nombre accesible -->\r\n<div role=\"button\">Enviar formulario<\/div>\r\n<div role=\"link\">Leer m\u00e1s sobre accesibilidad<\/div><\/code><\/pre>\naria-label<\/code><\/strong> \u2014 cuando no puedes a\u00f1adir texto visible, por ejemplo, un bot\u00f3n con solo un icono:<\/p>\n<!-- \u2705 aria-label proporciona el nombre accesible -->\r\n<div role=\"button\" aria-label=\"Cerrar ventana\">\u2715<\/div>\r\n<a role=\"link\" aria-label=\"Ir a la secci\u00f3n de contacto\"><\/a><\/code><\/pre>\naria-labelledby<\/code><\/strong> \u2014 cuando el nombre ya existe en otro elemento de la p\u00e1gina:<\/p>\n<!-- \u2705 aria-labelledby apunta al elemento que contiene el nombre -->\r\n<h2 id=\"titulo-seccion\">Servicios de accesibilidad<\/h2>\r\n<div role=\"link\" aria-labelledby=\"titulo-seccion\"><\/div><\/code><\/pre>\nErrores habituales<\/h2>\n
<!-- \u274c Ancla vac\u00eda sin nombre accesible -->\r\n<a id=\"content\" role=\"link\"><\/a><\/code><\/pre>\nrole=\"link\"<\/code> si el elemento no es un enlace real, sino solo un punto de anclaje:<\/p>\n<!-- \u2705 Ancla de navegaci\u00f3n sin rol interactivo -->\r\n<a id=\"content\"><\/a>\r\n\r\n<!-- O mejor, con un elemento no interactivo -->\r\n<div id=\"content\"><\/div><\/code><\/pre>\naria-label<\/code> vac\u00edo o aria-labelledby<\/code> apuntando a un elemento que no existe o que no tiene texto:<\/p>\n<!-- \u274c aria-label vac\u00edo \u2014 no proporciona ning\u00fan nombre -->\r\n<div role=\"button\" aria-label=\"\"><\/div>\r\n\r\n<!-- \u274c aria-labelledby apunta a un elemento inexistente -->\r\n<div role=\"menuitem\" aria-labelledby=\"elemento-que-no-existe\"><\/div><\/code><\/pre>\n