2 Chapter 2: The Basics of Alt Text
How Does It Work?
Alt Text, or alternative text, functions as a textual replacement for images on web pages and digital documents. When an image cannot be seen—whether due to a visual impairment, a slow internet connection that prevents the image from loading, or if the user has chosen to disable image display—the Alt Text is displayed or read aloud by screen readers. This ensures that the content and function of the image are still communicated to all users, maintaining the integrity of the digital experience.
What is a Screen Reader?
A screen reader is a software application designed to help people who are blind, have low vision, or have reading disabilities by reading the text displayed on the computer screen with a speech synthesizer or braille display. Screen readers are a key component of web accessibility, allowing users to interact with digital content, navigate websites, and perform tasks online.
Screen readers work by processing the contents of a webpage or software interface, and then conveying that information to the user through audible speech or braille. They rely on the structure and semantics of web content (such as HTML tags in webpages) to understand the layout and elements of a page. For example, they can announce headings, links, images (if Alt Text is provided), form controls, and other interactive elements, enabling users to understand the content structure and navigate through it efficiently.
Users can control the screen reader using keyboard shortcuts, gestures on touch devices, or braille display controls, depending on the device and reader being used. These controls allow users to jump between headings, links, or other elements, read specific portions of the screen, or perform actions like clicking a button or filling out a form.
Popular screen readers include JAWS (Job Access With Speech) and NVDA (NonVisual Desktop Access) for Windows, VoiceOver for macOS and iOS devices, TalkBack for Android devices, and Narrator for Windows. Each screen reader has its own set of features, commands, and supported languages, tailored to various user needs and preferences.
The effectiveness of a screen reader in providing access to digital content heavily depends on how well the content is designed for accessibility. Proper use of semantic HTML, ARIA (Accessible Rich Internet Applications) roles and adherence to web accessibility guidelines like the Web Content Accessibility Guidelines (WCAG) can significantly enhance the usability of web content for screen reader users. In HTML, Alt Text is implemented using the “alt” attribute in the image tag. Properly crafting this text requires understanding both the content being depicted by the image and the context in which the image is used. It’s not just about describing what the image shows but conveying why the image is important in that specific context.
Example of NVDA Screen Reader
Activity
This H5P activity helps you understand how screen readers interact with different elements of digital content.
Technical aspects of Alt Text
When a webpage loads, the internet browser creates a tree-like structure that represents the content, structure, and style of the webpage. The screen reader interacts with the browser’s ‘accessibility tree’, which informs the Screen Reader of how to navigate through the content. Semantic HTML uses specific tags (like <header>, <nav>, <article>, and <footer>) that provide information about the type of content they contain. Screen readers use these tags to interpret the structure of the webpage for the user, allowing for more intuitive navigation (e.g., jumping between headings or links).
For images, the screen reader looks for the alt attribute within the <img> tag. The content of the alt attribute is read aloud to describe the image. If the alt attribute is missing, the screen reader may read the image file name or skip it altogether, potentially missing crucial information.
Screen reader users navigate content using keyboard shortcuts specific to their screen reader software. These commands allow users to skip to the next element of a certain type (e.g., next heading, next link), read from the current position, or activate interactive elements like buttons.
Finally, the screen reader converts the text content and descriptions into synthesized speech or braille output (for those using a refreshable braille display). This process involves reading the text and conveying punctuation, indicating capital letters, and providing auditory cues for layout or text formatting.
