Writing Alt Text for Images with Styled Typography
This section is part of a 4-part series — Alternate text and captioning by team elly
You’ve probably heard the common saying, "A picture is worth a thousand words”. How could we then describe an image that is made up of words?
Styled Typography
Styled typography is an image composed of typography. It has been designed in a particular style with decorative effects (e.g. shadows, borders, etc.). Often, the text in the image has the exact meaning of the content of the image.
In this section, we will learn how to write alt text for these images:
- Be descriptive: When writing alt text for images with styled typography, ensure they are descriptive.
- Content is key: Shadows and other design effects are usually not mentioned in the alt text, because they are not relevant in describing the main message the image carries.
Consider the image below:
In this example, a descriptive alt text would be, A handwritten text on a lined notebook that reads “Dream anything then think what does it take?”
Consider another example below:
A suitable alt text can be: A cursive text that reads “Savour every Moment”
❗ If you are designing a website, it is more accessible to use CSS and web fonts for styling text, instead of using an image for text and adding alt text. CSS and web fonts allow one to easily resize, select and/or translate the text (using browser extensions), whereas, for an image, it is very difficult to do so. For example, if you are reading this online, try out this simple exercise: Try zooming into the two texts below. Notice how the image (left) becomes pixelated and blurry whereas the web font (right) remains clear? The former allows for easier resizing, text selection as well as easier translation to a different language (via browser add-ons/extensions).
Image:
Web font:
Elly
Logos
Another use case is writing alt text for logos. It is important to convey the spirit and look of your brand to viewers of all abilities. While text logos might be easy to read and decipher, adding alt text helps make the content to be communicated much clearer.
Below are the key things to keep in mind when crafting alt text for logos:
- Specify that the image is a logo: Most screen readers cannot tell if an image is a logo or not. Using the word “logo” helps users understand the image’s correct purpose.
- Include the text in the image: Like all other types of images, your alt text must include any written text in the logo so screen readers can read it.
- Alt text format: For logos, the format should be “[Organization name] logo.”
Let’s look at some examples!
Alt Text: Elly logo
Microsoft Corporation, Public domain, via Wikimedia Commons
Alt text: Microsoft logo
Summary
Most of the time you can simply copy the text directly, though you can choose to include additional details such as stylizations.
For logos, a rule of thumb is to just use the alt text “<Organization Name> logo”.
Thanks for reading my part in this series. I’m Princess Oviawe, a product designer and also an accessibility and open-source enthusiast. You can learn more about me on my website. Stay slaying 🌱
