Joel VannerAlt text, short for alternative text (referred to as alternative description in Blackboard Learn), is a short textual description of an image or visual element designed to make it accessible.
Alt Text in Accessibility
Alt text is crucial in making digital content accessible to individuals with disabilities, particularly those who are blind or visually impaired. It ensures everyone can engage with images, graphics, and other visual elements on a webpage. Without descriptive alt text, individuals who rely on screen readers or other assistive technologies may miss out on crucial visual information that conveys meaning or context within the content.
Implementing alt text is a simple yet impactful practice. Alt text descriptions are integrated into a website or page’s HTML code and can easily be added in a Learning Management System (LMS) like Blackboard. This allows you to implement accessibility features without needing in-depth coding knowledge.
Alt text in HTML looks like this:
<img src="image-of-cat.jpg" alt="A gray cat sitting on a windowsill during sunset.">Right-clicking an image in Blackboard and selecting “Image…” will open the “Insert/edit image” dialogue box, where you would enter alt text in the “Alternative description” area.
Screen Readers
Screen readers are assistive technology tools designed to help individuals who are blind or visually impaired interact with digital content by converting text and other information displayed on a screen into speech or braille. Users can hear the information through synthesized speech or, if using a refreshable braille display, they can feel it as braille. The screen reader works by interpreting the content of a webpage or document and speaking the information in a way that a user can understand and navigate.
When a screen reader encounters an image, it looks for the alt text in the HTML code. If a webpage contains an image of a cat:
- And the alt text is “A gray cat sitting on a windowsill during sunset,” the screen reader will vocalize that description.
- And there is no alt text, the screen reader may skip the image entirely or say “image,” which provides no meaningful information to the user.
Note: Screen readers are not able to read text displayed within an image, unless included in the alt text.
Quinnipiac offers Blackboard Ally in our Blackboard Learn environment. Ally automatically checks course materials against accessibility standards and guides instructors on how to improve the accessibility of their course content. Students can use Ally to generate course materials in accessible alternative formats like audio and electronic braille. Learn more about Ally at Quinnipiac on IT’s MyQ site →
Learn how to add alt text to images in Blackboard Learn →
Learn more about making your Blackboard course accessible → (coming soon)
Enhancing Navigation and Understanding
Alt text can be used for more than just describing images, it can help improve navigation and comprehension for individuals who rely on assistive technology. Complex images like charts, infographics, or diagrams can be better understood by including alt text with them. For example, if you post an image of a graph without alt text, students who are visually impaired may be unable to fully participate in the lesson because they aren’t able to get information from the graph image.
Alt text should offer a succinct, but detailed description that conveys the key points of the image.
Example
Line graph:
Alt text: Line graph titled "Student Enrollment from 2018 to 2023" showing a steady increase in enrollment percentage with the largest spike between 2020 and 2021.
Additional Descriptions
If an image contains a large amount of data, or is too intricate for a brief description as alt text alone, use a combination of alt text and an additional description either on the same page or linked on another page. Make sure you clearly label the additional description (e.g., “Full description of the graph” or “Detailed explanation of the image”). Screen readers can navigate to this longer explanation.
You may also consider working the longer description into the body text of the page. This method would ensure that all individuals could benefit from the additional details and explanation, while still maintaining accessibility.
Example
Line graph:
Alt text: Line graph showing student enrollment from 2018 to 2023, showing a steady increase in enrollment percentage with the largest spike between 2020 and 2021.
Additional Description: Line graph titled ‘Student Enrollment from 2018 to 2023’ showing a steady increase in enrollment percentage. The largest spike occurred between 2020 and 2021, highlighted in an orange-shaded area. The y-axis represents enrollment in percentages, ranging from 100% to 150%, and the x-axis spans the years from 2018 to 2023.
Alt text and additional descriptions in HTML look like this:
In a separate area/page:
<p><img src="graph.png" alt="Line graph showing student enrollment from 2018 to 2023, showing a steady increase in enrollment percentage with the largest spike between 2020 and 2021." longdesc="graphdesc.html"/></p>In the same area/page:
<img longdesc="thispage.html#desc" alt="Line graph showing student enrollment from 2018 to 2023, showing a steady increase in enrollment percentage with the largest spike between 2020 and 2021." src="http://www.school.edu/images/graph.png">
<div id="desc">
<h3>Long Description: Line graph of the number of subscribers</h3>
Line graph titled ‘Student Enrollment from 2018 to 2023’ showing a steady increase in enrollment percentage. The largest spike occurred between 2020 and 2021, highlighted in an orange-shaded area. The y-axis represents enrollment in percentages, ranging from 100% to 150%, and the x-axis spans the years from 2018 to 2023.
<p>Long description ends.</p>
<div>Learn more about additional descriptions in HTML →
Decorative Images
Not all images are essential for comprehension of content. Some images are decorative, meant to enhance the visual appeal of a website or page. Including alt text for decorative images may confuse individuals who rely on screen readers, and cause them to waste time and effort interpreting an image that has no value to understanding the content.
Decorative images should have an empty alt attribute, so that screen readers will skip over them:
alt=""alt=" "Legal Requirements and Web Accessibility Standards
- The Americans with Disabilities Act (ADA) requires institutions, including private universities like Quinnipiac, to provide equal access to all students, including those with disabilities. Alt text and additional descriptions for visual content make the content accessible to individuals with visual impairments.
- Section 504 of the Rehabilitation Act mandates any program receiving federal funding, like Quinnipiac, provide accommodations for students with disabilities. Alt text and additional descriptions for visual content is a form of accommodation for individuals with visual impairments.
Writing Alt Text
Alt text can be used by a variety of individuals with different disabilities, not just individuals with visual impairments. Simple, clear, and straightforward descriptions will help make the content more understandable for all who use it.
Best Practices
- Be descriptive, but concise: Keep the alt text description to the point and include only essential details for comprehension. Avoid any overly technical language that may be confusing. Aim for fewer than 125 characters.
- For charts, infographics, and diagrams: Focus on the essential data points the individual needs to understand. If there’s a large amount of data, use a combination of alt text and additional descriptive content.
- Avoid redundancies: Screen readers will already identify the content as an image, so skip introduction phrases such as “image of” or “picture of.”
- Include context: Tailor the alt text to the function of the image within the content. If the image contributes to an instructional article, describe the information the image conveys so that those who utilize the alt text can follow the article’s instructions.
- Mark decorative images: Make sure decorative images are noted as such, whether by checking a “Mark Decorative Image” checkbox or using an empty alt attribute. Marking an image as decorative varies by platform.
NYU has 4-step template to guide creation of alt text, which is recreated below.
Order | Item | Note |
1 | What is it? | e.g., Chart, Map, Graph, Portrait
AVOID: Image of. Photo of. |
2 | Key people / things | Name and/or descriptors.
Think about the context. |
3 | Key info or actions | Additional details that enhance meaning or clarify.
(e.g., Landmarks, Clothing, Setting, Actions, Data) |
4 | More info (if needed) | Opportunity to provide more information |
Good vs. Bad
Image 1
Bad Alt Text: “A teacher teaching.”
Good Alt Text: “A teacher pointing to a graph on a projector screen in front of a classroom of students.”
The bad alt text example is too general, it doesn’t give any information about the action in the image.
Image 2
/w=3840,quality=90,fit=scale-down)
Bad Alt Text: “A pie chart.”
Good Alt Text: “A pie chart, showing 60% of students prefer online learning, while 40% prefer in-person classes.”
The bad alt text example doesn’t include any information being shown by the pie chart, which may be accessible to individuals only through inclusion in alt text. If the chart had more details, you could use an additional description to include more information.
Alt Text in Other Uses
- Alt text is also displayed in place of an image if the image fails to load due to technical issues or a slow internet connection.
- Alt text plays a role in Search Engine Optimization (SEO).
- Search engines use alt text content to better understand and index the images on a website, potentially boosting that website’s visibility and relevance in search results.
Additional resources
