Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

213
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda