The State of Image Accessibility on the Web
Nov 26, 2017 · 6 min read

People are always surprised to see my totally blind dad use a computer. In fact, every day he sits at the kitchen table, ear phones plugged in, clicking away at his Lenovo ThinkPad T460. Accessible technology like the Jaws screen reader on computers and Voiceover on the iPhone has allowed my father, Peichun Yang, to connect with the world in ways he never thought possible when he lost his vision in 1998. With his screen readers, he can read and send emails, browse the internet, and even find and waste hours on his favorite podcasts. However, while current accessible technology has opened the web for the blind, a lot of content on the web, like images, are still unusable due to websites skimping on their focus on accessibility.

How can websites make their images accessible?

Here is an example of alt text in an image tag in HTML. (Note: Medium actually doesn’t allow us to write custom alt text for this image)

alt: small white dog walking on red brick
<img src=”img/dog.jpg” alt=”small white dog walking on red brick”>

Issues arise when alt text is missing or incorrectly populated. For example, just yesterday my dad called me over for help because he had navigated to a corner of a website and could not figure out what was on the page. The page had only five large images, each with fancy 3D text that described a different Cyber Monday sale: “Cyber Monday 30% Everything….” Because none of the images had alt text, his screen reader only read “graphic, graphic, graphic….” This is an extreme example where missing alt text rendered a website useless for my dad, but in reality a non-trivial number of websites fail to write effective alt text for images. And, without alt text, the browsing experience of websites are worse if not impossible for the blind and visually impaired community.

We scraped 15 popular websites for images and alt tags to bring to light the current state of web image accessibility.

The state of affairs in alt text

alt: bar chart showing the percentage of images with alt tags per website. websites in the chart include,, and

What you are looking at is a bar chart that shows how well each website is doing in adding alt tags to images. Specifically, this chart tells us the percentage of images that possess an alt tag.

What this chart doesn’t capture is the amount of alt tags that are empty. On a website, alt tags on an image can be empty (alt=“”) if the image is a decorative element like a pattern background. We wanted to see how many alt tags for images on websites weren’t just empty, but actually provided content that is useful to the blind.

alt: bar chart showing the percentage of images with populated alt tags per website. websites in the chart include,, and

This chart shows the percentage of populated alt tags for each website, which is a better metric to use when looking at how accessible the images on a website are.

We found surprising variability in website accessibility just from our small sample of 15 websites. E-Commerce sites did very well in populating their alt tags, which is sensible as Google uses alt tags for SEO. On the other hand, specialized news websites have a lot of room to improve in making their images more accessible. Thankfully, larger news publishers are generally more responsible in properly populating their alt tags.

Websites like Reddit or wikiHow that are non-commerce and contain copious amounts of user generated content have an incredible lack of populated or extant alt tags. On such websites, content that is image-based is almost entirely inaccessible to the blind community.

For this pilot study, we decided to keep our sample size tiny and our analyses simple.

What can I do to make the web more accessible?

We understand that good alt-text is not a top priority for the majority of websites. But, we hope that we can inspire developers to consider spending time improving their alt-text. Here are a few quick tips to write more effective alt-text.

  • Don’t start alt-text with “photo of…” because a screen reader will say something along that lines before it reads the alt-text.
  • Alt-text is usually only a few words. Be succinct!
  • If an image is solely for decoration it is fine for the alt-text to be empty. Make sure you at least have alt=“” because if the alt tag is completely missing a screen reader will read the filename of the image.
  • If an image is used for navigation, make sure the alt-text provides the content and function of the image.

We’d also like to point out the irony that, although the entire purpose of this article is dedicated to web accessibility, Medium doesn’t make it easy for publishers to edit the alt text in posted images. Therefore, the images in this article don’t have alt text.

Further Reading


The A11Y Project

How we did it

After noting 15 of Peichun’s favorite websites, we built a crawler in Scrapy and politely crawled each of the websites up to depth 2 to avoid being rude (we also made sure to read the TOS for each website beforehand). For each website, we determined how many images we saw, and how many of those images had alt tags. Within the images that had alt tags, we wanted to see how many of those alt tags were actually just blank.

Ultimately, we were able to retrieve numerical alt tag statistics for every website. The raw numbers are right here:

alt: table showing raw data of counts of images with alt tags versus total images found per website. websites in the table include,, and

Limitations of this study

About Us

We are on a mission to ensure anyone, regardless of ability, can use software effectively. Here are our thoughts and lessons learned along the way. Follow us at

Written by

We are Kevin Yang, Will Hang, and James Liu, three Stanford undergrads who believe that technology can be more accessible to everyone with the help of AI

We are on a mission to ensure anyone, regardless of ability, can use software effectively. Here are our thoughts and lessons learned along the way. Follow us at