Tengo un bookmarklet de JavaScript que copia los atributos alternativos en los atributos del título para permitir que los editores que no usan lectores de pantalla auditen su texto alternativo. El texto alternativo (o la ausencia del mismo) aparece como información sobre herramientas del navegador al pasar el mouse sobre ella.
JavaScript:
(function () { var imgs = document.getElementsByTagName("img"); for (i = 0; i < imgs.length; i++) { if (imgs.item(i).hasAttribute("alt")) { if (imgs.item(i).getAttribute("alt") == "") { imgs.item(i).setAttribute("title", " empty alt attribute "); imgs.item(i).style.border = "2px dotted black"; } else if (imgs.item(i).getAttribute("alt") == " ") { imgs.item(i).setAttribute("title", " space alt attribute "); imgs.item(i).style.border = "2px dotted orange"; } else { imgs.item(i).setAttribute("title", imgs.item(i).getAttribute("alt")); imgs.item(i).style.border = "2px dashed green"; } } else { imgs.item(i).setAttribute("title", " no alt attribute "); imgs.item(i).style.border = "2px solid red"; } } /* released under GPL 3.0 */ })();Me gustaría revisar el bookmarklet para hacerlo accesible a los editores que solo pueden usar un teclado. Puedo agregar foco a todas las imágenes, pero cuando ejecuto el bookmarklet en una página y presiono el foco en una imagen, la información sobre herramientas no aparece.
JavaScript:
(function () { var imgs = document.getElementsByTagName("img"); for (i = 0; i < imgs.length; i++) { if (imgs.item(i).hasAttribute("alt")) { imgs.item(i).setAttribute("tabIndex", "0"); if (imgs.item(i).getAttribute("alt") == "") { imgs.item(i).setAttribute("title", "*** empty alt attribute ***"); imgs.item(i).style.border = "2px dotted black"; } else if (imgs.item(i).getAttribute("alt") == " ") { imgs.item(i).setAttribute("title", "*** space alt attribute ***"); imgs.item(i).style.border = "2px dotted orange"; } else { imgs.item(i).setAttribute("title", imgs.item(i).getAttribute("alt")); imgs.item(i).style.border = "2px dashed green"; } } else { imgs.item(i).setAttribute("title", "*** no alt attribute ***"); imgs.item(i).style.border = "2px solid red"; } } /* released under GPL 3.0 */ })();¿Hay alguna manera de hacer que la información sobre herramientas aparezca enfocada?