What exactly is alt text, and why is it significant?
Alternative text is shortened to “alt text” in this sentence. It’s a short textual description of a picture that clarifies what the image looks like when it can’t be seen for any reason.
Your website’s accessibility and search engine optimization depend on well-written alt text (SEO).
Accessibility
People who are blind or visually impaired may view your picture material because screen readers read it in lieu of the images.
It may benefit those struggling with specific sensory processing or learning difficulties.
If the image file hasn’t loaded or the user has decided not to see pictures, it will be shown in browsers in its stead.
SEO
Search engines utilize excellent alt text to deliver search results because it gives a picture a description and semantic meaning. By providing search engines with more and better information to rank your website, compelling alt text helps them index your website higher.
The easier you make it for consumers to grasp your material, the simpler it is for search engine robots to comprehend.
Do you realize…
You have power over picture alt text on more than simply your website. Animated gifs and photos you publish to Twitter may now have alt text added.
The textual explanation will be available to those who use assistive technology such as screen readers and braille displays. Furthermore, even if you don’t use assistive technology, you may still access the alt text by clicking on the ‘ALT’ label, which displays the alt text in a modal window.
It’s a clever little tool that can increase accessibility (and searchability), but it doesn’t seem to be utilized in the industry. Never forget the alt text when you’re preparing to tweet a picture in the future!
Guidelines for creating “excellent” alt text
One of the simplest methods to make your website more accessible is to provide helpful alt text to photos. However, it’s not always simple to master and, if done incorrectly, might make accessibility worse. Wrong alt text, such as unpleasant or nonsensical language, is always preferable to no alt text.
The following advice will help you do it correctly:
- Be concise and precise
Without taking an editorial stance, describe the image’s content. Say what you observe rather than inferring a subject’s intentions or assumptions about their gender, race, or what’s going on out of frame.
Be specific about what you can see; describing your skin tone, your hair’s color or style, and other details can allow someone who cannot see the image to create a mental image.
The most fantastic advice I’ve heard is to imagine how you’d quickly communicate the picture to someone on the phone.
Though a complete statement is sometimes required, a few words will generally be enough. It’s advisable to stay under that character limit since screen readers often chop off alt text at approximately 125.
- Never begin with “Illustration of…” or “Picture of….”
When anything is accessible via alt text, a human or a computer can tell.
Think about how annoying it would be to use a screen reader on an image-heavy website and have it read: “Image of the theater” or “Image of the front of house area.” “Image of the outside signs,” “Image of the ticket office staff,” “Image of the theater,” “Image of the stage”…
However, it is beneficial to describe the sort of picture, such as a headshot, drawing, or chart.
- Don’t overuse terms.
If you can logically include one or two top keywords while describing a picture, that’s fantastic. This will benefit your SEO efforts. But only when done judiciously and naturally.
Although contextually ‘poor’ (unhelpful) alt text cannot be detected by search engines, keyword stuffing may result in a ranking penalty. Google can identify it! Therefore, describing photos that need alt text in a clear and detailed manner must be your main priority.
- Incorporate text into the picture.
Copy any text in a picture as part of your description.
- Avoid repetitions
If the alternative text would only duplicate the page’s content, it would be unhelpful.
- Avoid providing alt text for “decorative” photos.
Photographs of your venue or press stills from a performance are examples of “illustrative” pictures. They assist in providing context-relevant information. Page dividers and brand graphics are examples of “decorative” visuals. They beautify objects or aesthetically divide material on a website. If supplied with alt text, they won’t improve viewers’ comprehension of the website since they lack any contextual value or meaning.
Any graphics should ideally be inserted as code rather than as ‘content,’ However, if they must be posted as photos, omitting the alt text is OK since screen readers would pass over them, which is what we want in this situation.
You may decide to include a lengthier, more in-depth description of a picture in the alt text if it serves as the primary emphasis of your content or if the emotion it conveys enhances the material surrounding it.
When your content has a main visual component:
NASA’s Twitter posts describing photos captured by the James Webb Space Telescope in great detail are notable examples. These fantastic, fascinating, and intricate perspectives of the cosmos call for in-depth explanations.
For example, the following makes up just roughly one-third of the alt text for a picture of the Carina Nebula:
“A cloudscape producing a nebula runs along the bottom section of the picture, while an area that is quite clear runs along the top, separated by an undulating line. A starfield with many stars of various sizes is scattered throughout both areas. The tiniest of them are tiny, far-off, dim spots of light.”
Using alt text to convey emotion:
Images are able to express emotion in addition to providing particular, useful information. Within the arts, this is particularly true. To someone who cannot access the picture, for instance, describing the stage set, the clothing, the postures, and the facial expressions of the characters may fall short.
Is it a happy, joyful smile? Or is it blatantly concealing a profound and desperate sadness? Can such feelings be (sensibly) transferred into alt text? What emotions do you sense when you look at the image?
By being aware of context, you may sometimes enable yourself to produce more imaginative alt text. However, even while the first tip—be explicit and brief—still holds the majority of the time, some situations permit for more flexibility than the fundamental “best practice” standards imply.