Read on Twitter
I'm exploring ways to make images lacking alt-text more prominent.
Using the 'Stylus' browser extension to inject custom CSS, I've come up with a couple of approaches, which might be worth trying yourself to get a feel for how prevalent the problem is.
Using the 'Stylus' browser extension to inject custom CSS, I've come up with a couple of approaches, which might be worth trying yourself to get a feel for how prevalent the problem is.
First, a soft approach that just injects a big red border around images that are lacking an alt-text.
Here's the CSS for that effect:
div[aria-label="Image"] {
margin: 0 !important;
border: 20px solid #f00;
}
![First, a soft approach that just injects a big red border around images that are lacking an alt-text.Here's the CSS for that effect:div[aria-label="Image"] { margin: 0 !important; border: 20px solid #f00;}](https://pbs.twimg.com/media/EuYQ-ypXIAcZIDE.jpg "First, a soft approach that just injects a big red border around images that are lacking an alt-text.Here's the CSS for that effect:div[aria-label=\"Image\"] { margin: 0 !important; border: 20px solid #f00;}")
Here's the CSS for that effect:
div[aria-label="Image"] {
margin: 0 !important;
border: 20px solid #f00;
}
Second, a more blunt approach that shows what someone using a screen-reader would hear. The word "Image" and nothing else.
CSS in the following tweet.
CSS in the following tweet.
div[aria-label="Image"]{
background: #000;
margin: 0 !important;
}
div[aria-label="Image"]:after{
content:"Image";
color: #fff;
text-align:center;
font-size:50pt;
font-family:sans-serif;
padding:20px;
}
div[aria-label="Image"] *{
display:none;
}
background: #000;
margin: 0 !important;
}
div[aria-label="Image"]:after{
content:"Image";
color: #fff;
text-align:center;
font-size:50pt;
font-family:sans-serif;
padding:20px;
}
div[aria-label="Image"] *{
display:none;
}
If you want to make the alt-texts that *are* present more visible, I've also come up with some CSS for that, which looks like this:
CSS in next tweet.
CSS in next tweet.
div[data-testid="tweetPhoto"]:not([aria-label="Image"]) {
margin: 0 !important;
}
div[data-testid="tweetPhoto"]:not([aria-label="Image"]):after {
content: attr(aria-label);
background: rgba(0,0,0,.75);
color: #fff;
padding: 10px;
font-family: sans-serif;
}
margin: 0 !important;
}
div[data-testid="tweetPhoto"]:not([aria-label="Image"]):after {
content: attr(aria-label);
background: rgba(0,0,0,.75);
color: #fff;
padding: 10px;
font-family: sans-serif;
}
