What is alt text?
An alt text is an image description that provides a textual alternative to visual content on the Internet in general and, in our case, BRYTER Modules specifically. The main purpose of alternative text is to make the content of images, screenshots, and any other non-textual items accessible to all users, including but not limited to those who are visually impaired as well as those whose browser settings restrict visual content.
Why is alt text useful?
Users with visual or other (e.g., learning) disabilities may choose to use a screen reader, an assistive technology, to navigate and consume websites. A screen reader renders text and image content as speech or braille output.
As images convey a lot of information in a short amount of time, the goal is to create a similar experience for users relying on alt text to understand the image used in the BRYTER Module. This holds especially true when visual content is meant to support textual content rather than serving aesthetic or decorative purposes.
How to add alt text
- Enter an alt text during the uploading process of an image
- Edit an alt text in the editor
How to use alt text in your BRYTER Modules
Providing alt text is strongly recommended and there are a few Do's and Don'ts to help you get started:
General guidelines for writing helpful alt texts
- Be specific and keep it short
Generally, try to add informative and concise alt text to your visual content. Write alt text that explains why the image is included and what is depicted. Be as precise and concise in your language. Keep the alt text as short as possible and as detailed as needed. Note that some older screen readers may cut off after around 100-140 characters.
- Follow basic grammar rules
Use active voice, present tense, and punctuation in your alt text. In text-to-speech punctuation determines when pauses occur, creating a more pleasant experience for the user.
- Screen reader will automatically say "image"
Do not start an alt text with "image of" or "graphic of". Bear in mind that the screen reader will automatically say "image" when it reaches an image and then read the content.
If you offer Modules in several languages, the alt text should be translated alongside all other content.
- File name of the image
In most cases, a file name is not suited as alt text. Especially, when the file name is a random sequence of characters that hold no meaning to the image itself.
- Content credit
The name of the author, illustrator, UX designer, photographer, or anyone else who has worked on the content does not belong in the alt text and is typically placed in an image description or within the text itself.
- Avoid images that hold text
If possible, avoid images that hold text. If it is not avoidable, focus and describe only the things that are necessary to understand the image.
- Avoid alt text when image is purely decorative
If the content of the visual content does not provide any additional information to the user and is purely decorative you do not need to add an alt text. Instead, question why and whether or not the image needs to be included.