bookmarklet that writes twitter alt texts to the tooltip and blurs images that don't have an alt text

_0_visualize-twitter-alt-texts-bookmarklet.md

save this as a bookmark:

make sure the javascript: part stays in place - your browser might remove it for security reasons when pasting!

javascript:(({excludeQueries:a,defaultAltTexts:b,disableBlur:c})=>{window.visualizeAltTextInterval?(clearInterval(window.visualizeAltTextInterval),delete window.visualizeAltTextInterval,document.getElementsByTagName("img").forEach(a=>{a.title="",a.parentNode.style.filter=null})):window.visualizeAltTextInterval=window.setInterval(()=>{const d=a.map(a=>":not("+a+")").join(""),e=([a,d])=>{a.title=d,a.style.zIndex="1",d&&!b.includes(d)||c||(a.parentNode.style.filter="blur(15px)")};Array.from(document.querySelectorAll("img"+d)).map(a=>[a,a.alt]).forEach(e),Array.from(document.querySelectorAll("video"+d)).map(a=>[a,a.getAttribute("aria-label")]).forEach(e)},100)})({excludeQueries:["#partner_id_sync_pixel"],defaultAltTexts:["Image","Bild"],disableBlur:false})

^^^

or copy this code into your browser's address bar:

manually add javascript: in front before pasting it!

(({excludeQueries:a,defaultAltTexts:b,disableBlur:c})=>{window.visualizeAltTextInterval?(clearInterval(window.visualizeAltTextInterval),delete window.visualizeAltTextInterval,document.getElementsByTagName("img").forEach(a=>{a.title="",a.parentNode.style.filter=null})):window.visualizeAltTextInterval=window.setInterval(()=>{const d=a.map(a=>":not("+a+")").join(""),e=([a,d])=>{a.title=d,a.style.zIndex="1",d&&!b.includes(d)||c||(a.parentNode.style.filter="blur(15px)")};Array.from(document.querySelectorAll("img"+d)).map(a=>[a,a.alt]).forEach(e),Array.from(document.querySelectorAll("video"+d)).map(a=>[a,a.getAttribute("aria-label")]).forEach(e)},100)})({excludeQueries:["#partner_id_sync_pixel"],defaultAltTexts:["Image","Bild"],disableBlur:false})

^^^

_1_visualize-twitter-alt-texts-bookmarklet.js

visualizeAltTexts = ({ excludeQueries, defaultAltTexts, disableBlur }) => {
  if (window.visualizeAltTextInterval) {
    clearInterval(window.visualizeAltTextInterval)
    delete window.visualizeAltTextInterval
    document.getElementsByTagName('img').forEach(img => {
      img.title = ''
      img.parentNode.style.filter = null
    })
  } else {
    window.visualizeAltTextInterval = window.setInterval(() => {
      const nots = excludeQueries.map(q => ':not(' + q + ')').join('')
      const setTitleAndBlur = ([element, altText]) => {
        element.title = altText
        element.style.zIndex = '1'
        if (!altText || defaultAltTexts.includes(altText)) {
          if (!disableBlur) {
            element.parentNode.style.filter = 'blur(15px)'
          }
        }
      }
      Array.from(document.querySelectorAll('img' + nots))
        .map(img => [img, img.alt])
        .forEach(setTitleAndBlur)
      Array.from(document.querySelectorAll('video' + nots))
        .map(video => [video, video.getAttribute('aria-label')])
        .forEach(setTitleAndBlur)
    }, 100)
  }
}

visualizeAltTexts({
  excludeQueries: ['#partner_id_sync_pixel'],
  defaultAltTexts: ['Image', 'Bild'],
  disableBlur: false
})