1.1.1: Non-text Content

Images and Graphics

For simple images and graphics that convey important information, a concise and descriptive alt text should be provided. This description should convey the purpose or content of the image as accurately and succinctly as possible.

Example: If your webpage has an image of a warning sign indicating a slippery floor, the alt text could be "Warning: Slippery Floor". This clearly describes the warning sign's message to someone who can't see the image.

Implementation Tips for Alternative Text for Images and Graphics

• Use the alt attribute: Every <img> tag in HTML should have an alt attribute. This is where the text alternative should be placed:
  <img src="warning-sign.jpg" alt="Warning: Slippery Floor">
• Provide context: The alt text should be contextually appropriate. The description should consider the information the image is intended to convey within the context of the webpage.
• Avoid redundancy: If the image's content is already described in the surrounding text, the alt text can be simpler or even omitted (in cases where the image is purely decorative). However, care should be taken to ensure the image's purpose is fully covered by the surrounding text.
• Long Descriptions: For complex graphics, use methods like linking to a detailed description or using aria-describedby for providing more comprehensive details.
  <img src="complex-graph.jpg" alt="Graph of annual rainfall" aria-describedby="graphDescription"><div id="graphDescription">Detailed description of the graph...</div>
• Decorative Images: If an image is purely decorative and doesn't convey important information, use an empty alt attribute (alt="") to ensure it is ignored by screen readers. This avoids unnecessary interruptions for users.
  <img src="decorative-floral.png" alt="">

Controls and Input

In the realm of web accessibility, ensuring that controls and inputs are fully accessible to all users, including those who rely on screen readers, is paramount. This focus is particularly crucial for elements like buttons or links that utilize images or icons instead of text to convey their function.

Implementation Tips for Alternative Text for Controls and Input

• Text Alternatives for Image Buttons: For buttons that use images to indicate their action, the alt attribute serves as the text alternative. This attribute should concisely describe the button's function. For example:
  <input type="image" src="submit-button.png" alt="Submit Form">
• Accessible Names for Icons Used as Controls: When icons (such as FontAwesome or Material Icons) are used for interactive elements like buttons or links, it's important to ensure they have accessible names. This can be achieved using the aria-label attribute, which provides an accessible name directly on the element:
  <button aria-label="Delete item"><i class="fa fa-trash"></i></button>
• Accessible Links: Ensure that links that use images or icons have descriptive alt text or aria-labels. For example:
  <a href="profile.html" aria-label="View Profile"><i class="fa fa-user"></i></a>
• Tooltips and Hover Text: Use tooltips or hover text to provide additional context or descriptions for interactive elements. Ensure these are also accessible by keyboard and screen readers.

Time-based Media

Time-based media refers to content that unfolds over time, including audio, video, and animations. Providing accessible alternatives for time-based media is essential to ensure that all users, including those with disabilities, can access the content.

Implementation Tips for Alternative Text for Time-based Media

• Descriptive Identification for Time-Based Media: For time-based media, a descriptive identification might involve a brief description of the media content's nature and purpose. This can be provided as an accessible name or label, which can be read by screen readers.
  <video aria-label="Overview of Yellowstone National Park" controls>
<source src="yellowstone-overview.mp4" type="video/mp4">Your browser does not support the video tag.</video>
<p>Description: This video provides a stunning overview of Yellowstone National Park, featuring its famous geysers, wildlife, and scenic landscapes.</p>
• Transcripts for Audio Content: Provide transcripts for audio content to ensure accessibility for users who are deaf or hard of hearing. Transcripts should include spoken dialogue and important sounds.
  <audio aria-label="Podcast on web accessibility" controls>
<source src="accessibility-podcast.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>
<p>Transcript: In this podcast, we discuss the importance of web accessibility and how it benefits all users. Key points include...</p>
• Captions and Subtitles for Video Content: Provide captions for video content to ensure accessibility for users who are deaf or hard of hearing. Captions should include spoken dialogue and important sounds.
  <video controls>
<source src="accessibility-video.mp4" type="video/mp4">Your browser does not support the video tag.</video>
<track kind="captions" src="captions.vtt" srclang="en" label="English"></track>
• Audio Descriptions for Visual Content: Provide audio descriptions for visual content in videos to ensure accessibility for users who are blind or have low vision. Audio descriptions should describe important visual details.
  <video controls>
<source src="accessibility-video.mp4" type="video/mp4">Your browser does not support the video tag.</video>
<track kind="descriptions" src="descriptions.vtt" srclang="en" label="English"></track>

Tests and Exercises

Ensuring accessibility in tests and exercises, especially those that include non-text content such as images, diagrams, or audio clips, is crucial for providing equal opportunities to all learners.

Implementation Tips for Alternative Text for Tests and Exercises

• Providing Text Alternatives for Image-based Questions: Consider a biology test that includes a diagram of the human heart, where students are asked to identify its parts. To make this question accessible, a text alternative describing the diagram and the specific task must be provided.
  Accessible Version: "In the diagram of the human heart, you are asked to identify and label the following parts: the upper left chamber (left atrium), the lower left chamber (left ventricle), the upper right chamber (right atrium), and the lower right chamber (right ventricle)."
• Audio Content in Language Learning Exercises: Language learning often involves listening exercises where students must listen to spoken sentences or dialogues and then answer questions about them. To make these exercises accessible, transcripts of the audio content should be provided.
  Original Exercise: "Listen to the dialogue and answer: What is the main topic of conversation?"
  Accessible Version: "Transcript of Dialogue:
  Person 1: 'Did you hear about the new environmental policy?'
  Person 2: 'Yes, I did! It focuses on reducing plastic waste, right?'
  Person 1: 'Exactly. They're planning to ban single-use plastics starting next year.'
  Question: Based on the transcript above, what is the main topic of conversation?"
• Accessible Diagram Descriptions: When using diagrams or illustrations in tests and exercises, provide detailed descriptions to ensure accessibility.
  Example: "Diagram of a cell showing the nucleus, mitochondria, and other organelles. Label the parts of the cell in the provided text boxes."
• Alternative Formats for Interactive Exercises: Provide alternative formats for interactive exercises to ensure accessibility.
  Example: "For a drag-and-drop exercise, provide a text-based version where users can select answers from a list."

CAPTCHAs

CAPTCHAs are tools used on many websites to ensure that a human, not a computer program, is interacting with the site. They often come in the form of distorted text images, puzzles, or interactive tests that can be challenging for people with disabilities. To make CAPTCHAs accessible to everyone, it's important to offer alternatives that cater to different needs.

Implementation Tips for CAPTCHAs

• Provide a text alternative that explains the CAPTCHA's purpose, such as "This test is for verifying that a human is making this request and not an automated program."
• Offer alternative CAPTCHA options that are accessible to people with different disabilities. For example:
  Audio CAPTCHA: An alternative where users listen to a series of letters and numbers and then type what they hear. This option can help users who have visual impairments.
  Logic puzzles or questions: Simple questions or puzzles like "What color is the sky on a clear day?" can be more accessible for users with visual impairments or those who have difficulty with text recognition.
• ReCAPTCHA: Use the latest versions of reCAPTCHA that offer "I'm not a robot" checkboxes, which are generally more accessible than traditional CAPTCHAs.
  Example: <div class="g-recaptcha" data-sitekey="your_site_key"></div>
• Keyboard and Screen Reader Accessibility: Ensure that CAPTCHAs are fully accessible via keyboard and screen readers. Test CAPTCHAs with various assistive technologies to confirm accessibility.

Decorative Images

When web content includes images, graphics, or elements that serve purely as decoration or are used solely for visual formatting—or perhaps aren't meant to be seen by users at all—it's crucial that these elements are crafted in such a way that assistive technologies can bypass them. This ensures that users who rely on screen readers or other forms of assistive technology aren't bombarded with irrelevant information, allowing them to navigate and understand the content more efficiently.

Implementation Tips for Decorative Images

• Use CSS for decorative effects wherever possible, rather than embedding decorative images in the HTML. This makes it easier for screen readers to ignore them.
• If an image is used in the HTML document for decorative purposes, it should have an empty alt attribute (alt=""). This signals to screen readers that the image can be skipped over.
  <img src="floral-divider.png" alt="">
• Background Images: Use CSS to apply background images that are purely decorative. This keeps them out of the document's accessibility tree.
  Example: background-image: url('decorative-floral.png');
• Testing with Screen Readers: Regularly test your website with screen readers to ensure that decorative images are properly ignored and do not create unnecessary noise for users.