<html>
  <head>
    <title>Ascii-Art Alt Text</title>
  </head>
  <body>
    <p>A proof of concept that should NEVER be used because it would be absolutely horrible for people that actually need alt text for accessibility. But who am I to tell you what to do?</p>
    
    <img src="https://s3.amazonaws.com/squishyface/images/church.jpg" alt="Boring Church Alt Tag">

    <p>Basic image, normal alt</p>
    
<img src="https://s3.amazonaws.com/squishyface/images/church-misspelled.jpg" alt="dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
dhdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
hhhhhhhhhhhddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddhdd
hhhhhhhhhhhhhhhhhhhhhhhddhhdddddddddddddddddddddddddddddddhdddddddddddddddddddddddhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhdhdddddddddddddddddhhddhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhdNdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhddNNdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhdddNMNhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hyhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhdddmMMNhhhhhhhhhhhhhhhhhhhhhhhhyhyyyyyyyyyyy
yyyyyyyyyyyyyyyyhyhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhyys+-sdmmmhhhhhhhhhyyyyyyyyyyyyyyyyyyyyyyyyyyy
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyhhhhhhyyyo`yd.+ddhhyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy+-ys:sdyyhyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy+-s/-sNhyhhhhhhyyyyyyyyyyyyyyyysssssssssssssss
sssssssssyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy:.``.sNmdmmddmmhyyssssssssssssssssssssssssssss
sssssssssssssssssssssssssssssssyssyysssssssssssyyyhhhh:``..sNmNNddddmdhyssssssssssssssssssssssssssss
ssssssssssssssssssssssssssssssssssssssssyyyhhhddddddddyhdo.sNNddhhhhdddhyssssssssssssssssssssooooooo
sssssssssssssssssssssssssssssssssyhhhddddddddddddddddddddo:sdddhhhhhhhddhyoooooooooooooooooooooooooo
ooooooooooooooooooooosossssssssyhdddh+ommmmmmmdddddddddddhdddhhhhhhhhhhdddyooooooooooooooooooooooooo
oooooooooooooooooooooooooooooydddddh:+o/mNNNNNNNNNmddddddddhhhhhhhhhhhhhdddsoooooooo++++++++++++++++
o++ooooooooooooooooooooooooyddddddy:os: .yNNNNNNNNmddddddhhhhhhhhdddhhhhhdddy+++++++++++++++++++++++
++++++++++++++++++++++++oyddddddds:ss..-  ommmmNNNmdddddhhhhhhhhdmmmdhhhhhdddy+++++++++/++//////////
+++++++++++++++++++++++yddddddddh+yo.`/:-  yyyyyyhdhysshhhhhhhhhdmmmddhhhhhdddy/////////////////////
/////////////////////oyhyyyysssoo++: .:--  syysssyhy/ /hhhhhhhhhddmmddhhhhhhhso+////////::::::::::::
//////////////////////:..``:.      ` .-.` `sysssssyys /hhhhhhhhhmNmmNdhhhhhhh:::::::::::------------
////////////////::::::-   `+/      ` ``   `syyssssyys-/hhhhhhhhhmNmmNdhhhhhhh-----------------------
/:::::::::::::::::::::-   .o:      . ``  ``sysssooyo-:/hhhhhhhhhmNNmNdhhhhhhh:---------------------:
++++++///+++++++++////-   .:-      ` `   `.syssoooy+  +hhhhhhhhhmNNNNdhhhhhhh----------------------:
yyysssyyssssssssssoooo-            ` .   `.ssoo++oy+  +hhhhhhhhhddddddhhhhhhh+/++++++///////////////
ssssssssssssssssssssso-              `   `.ssso++oy+  +hhhhhhhhhhhhhhhhhhdddd+osssooooo++++ooooooooo
yyyyyyyyyyyyyyssssssss:--..``.```` ```````-yysooosy+` ohhhhhhhhdddddddddddddmdddhhyyyssoossssyyyyyyy
ysssyysssssyyyyyyyyyyssssosssooo+--```.+//:hyyyyyhd+``ydddddmmmmNNNNNNNNNNMMNMMMMMMMMMNNmmmmdddhhyss
hhhyhyyyyyyhhhhhyyyyyyyyyyyyyyy+:.`./shmmd+dddmmmmmy+:ymdmmmmmdddddddddhdhhhhhhhyyyysssoooooooooooss
hhhhhhhhhhhhhhhhhhhhhyyyyyyyhyyyyyhhhhhyyyyyyssssssyyysssssyyyyyyyysyyssssssssssyyyyyyssyyssyyyyysss
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhyhhyyyyyyyhhhyhyyyyyyyyyyyyysyyyyyyyyssssssyyyyyyyyyysyyysssyssssssssss
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhyyyyhhhhhhhhyyhyyhhhhhhhhhyyhhhhyyyyyyysysssysssssssssssssssssso
dhhhhdhdhhhhhhhhhhhhhhhhhhhhhyyyyyyyhyhyhyhdddddhhhhhhhhddddhhhhhhhhhhyyhyhhhhyyyyyyyyyyyyssyyssssyy
dddddddddhdddddddhhhhhhhhhhhhhhhhhhhyhhhhhyhhhhhhhhhhhhhdddddddhhddhhhhhhhhhhhhhhhhhhhyyyyyyyyyyyyyy">
    <p>Image with broken src, ascii-art alt text</p>
    
  </body>
</html>
img {
  display: block;
  position: relative;
  width: 375px;
  height: 250px;
  border: 1px solid black;
}
img[alt] {
  display: block;
  overflow: hidden;
}

img:after {
  content: attr(alt);
  font-size: 6px;
  white-space: pre;
  font-family: courier, courier-new, monospace;
  font-weight: bold;
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.