Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

210
Vistas
How do I have a JavaScript bookmarklet display a tooltip on keyboard focus?

I have a JavaScript bookmarklet which copies alt attributes to title attributes to allow editors who don't use screen readers to audit their alt text. The alt text (or lack thereof) appears as a browser tooltip on hover.

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 */
})();

I would like to revise the bookmarklet to make it accessible to editors who can only use a keyboard. I am able to add focus to all images, but when I execute the bookmarklet on a page and tab the focus to an image, the tooltip doesn't appear.

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 */
})();

Is there any way to make the tooltip appear on focus?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda