Sometimes the people we exclude are the ones we did not realize were there. Screen readers are an essential tool for blind and visually-impaired people to use software and browse the Internet. In open source projects and communities, Markdown is a lightweight markup language used to format text. It is also used in many other places. Often you need to embed an image into whatever you are writing (a picture, a diagram, or some useful visual aid to get your point across). One of the lesser-known and used features of Markdown are alt tags for images.

Use alt tags for Markdown images

Often an embedded picture in Markdown looks something like this:

![Screenshot_2019-06-14.jpg](https://example.com/Screenshot_2019-06-14.jpg)

When you render the Markdown, you see your picture. However, you don’t see the Screenshot_2019-06-14.jpg string. You might wonder what its purpose is or why bother changing it at all. But imagine for a moment if instead of seeing your picture when you rendered your Markdown, you only saw Screenshot_2019-06-14.jpg where your picture should be. Screen reader users often encounter this problem.

So instead, describe your Markdown image so a person that uses a screen reader can also follow the conversation:

![A flowchart describing how user data flows from a publisher, to a proxy, and to a group of subscribers](https://example.com/Screenshot_2019-06-14.jpg "A flowchart describing how user data flows from a publisher, to a proxy, and to a group of subscribers")

It takes an extra few seconds of your time, but it is one small way you can help make a better Internet for everyone.

P.S. – The text wrapped in quotation marks between the parentheses adds the title HTML attribute to your image, so the text appears as a tooltip when you mouse over the image. The more you know!


Photo by Roman Kraft on Unsplash