BRYTER offers features to enable authors to build fully accessible modules to promote accessibility and inclusivity. When inserting images, write brief image descriptions (alternative text) for end users.
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. The chief purpose of alternative text is to make the content of images, screenshots, and any other non-textual items accessible to all end 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 beneficial?
End users with visual or other (e.g., learning) disabilities may 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 little time, the goal is to create a similar experience for end users relying on alt text to understand the image used in the BRYTER module. That holds especially true when visual content supports 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 brief.
Generally, try to add informative and concise alt text to your visual content. Write alt text that explains why to include the image and what it depicts. Be as precise and concise in your language. Keep the alt text as short as possible and as detailed as needed. Note that 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.
-
A screen reader will automatically say "image."
Do not start an alt text with "image of" or "graphic of." The screen reader will automatically say "image" when it reaches an image and then read the content.
-
Translations
If you offer modules in several languages: Translate the alt text alongside all other content.
-
The file name of the image
In most cases, a file name is ill-suited as alt text, especially when the file name is a random sequence of characters holding 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. It 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 necessary to understand the content.
-
Avoid alt text when an image is purely decorative.
If 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 to include the image.