Introduction to Perceivable Content

The Perceivable principle is the first of the four foundational principles outlined in the Web Content Accessibility Guidelines (WCAG). It emphasizes the need to ensure that users can perceive all content, regardless of their abilities. This means that digital content such as text, images, audio, and video must be presented in ways that people with disabilities can perceive, either through assistive technologies or alternative formats.

Perceivable Principle – Key Concepts

1. Text Alternatives: Non-text content (like images and buttons) must have text descriptions or alternatives so they can be understood by screen readers and other assistive technologies.
2. Time-Based Media: Audio and video content must provide alternatives, such as captions or transcripts, so that people who cannot hear or see the content can still understand it.
3. Adaptable Content: Content should be presented in ways that allow users to customize its display, such as increasing text size or changing contrast.
4. Distinguishable Content: Make content easy to see and hear, including separating foreground from background elements, ensuring color contrast, and avoiding text within images.

Strategies for Creating Perceivable Content

1. Writing Effective Alternative Text (Alt Text) for Images

Alt text, or alternative text, is a short description of an image that is used by screen readers to convey the meaning of an image to users who are visually impaired. Effective alt text should:

• Describe the image: Provide a concise, meaningful description of the image’s content.
• Convey function: If the image is a link or button, describe its function (e.g., “Search button”).
• Avoid redundancy: If the image is purely decorative, it should be marked as such (e.g., “decorative image”) to prevent cluttering the user experience.

Examples of Effective Alt Text:

• Image: A photo of a woman holding a cup of coffee and smiling.
  • Alt Text: “Woman holding a coffee cup and smiling at a café.”
• Image: A “submit” button in a form.
  • Alt Text: “Submit form.”

Poor Alt Text:

• “Image001.jpg” or “Picture.”
  • These do not provide any meaningful information to the user.
• “A beautiful image” or “Graphic.”
  • These are too vague and do not provide specific information about the content or purpose of the image.

2. Using Transcripts and Captions for Media

To make audio and video content perceivable, you must provide alternatives for users who are deaf or hard of hearing.

• Transcripts: A transcript is a text version of all spoken content, including descriptions of non-verbal sounds or actions, such as [laughter] or [door slamming]. Transcripts are especially helpful for audio-only content like podcasts or lectures.

• Captions: Captions are text displayed on-screen that sync with the audio content. They are crucial for video content to ensure that users who cannot hear the dialogue or sounds can still follow along. Captions include both spoken dialogue and relevant non-verbal sounds (e.g., [music playing], [applause]).

Difference Between Captions and Subtitles:

• Captions: Include all sounds (both speech and non-speech) relevant to understanding the media.
• Subtitles: Typically translate spoken dialogue into another language but may not include non-verbal audio cues.

3. Color Contrast and Text Resizing

Making content more perceivable also involves ensuring that text is easy to read. To address this:

• Contrast Ratio: The contrast between text and background should meet the minimum recommended level, which is 4.5:1 for normal text and 3:1 for large text.
• Scalable Text: Text should be resizable up to 200% without losing functionality or breaking the layout.

4. Sensory Characteristics

Instructions should not rely solely on sensory characteristics such as shape, color, or sound to communicate information. For example:

• Avoid: “Click the green button.”
• Better: “Click the button labeled ‘Submit’.”

Lab 1: Writing Effective Alternative Text for Images

In this lab, you will practice writing alt text for various types of images. Use the strategies covered in this lecture to describe the content of the images meaningfully.

Instructions:

1. Write alt text for each of the following images.
2. Ensure that your descriptions are clear, concise, and provide meaningful information.
3. If an image is purely decorative, indicate that.

Image 1:
A photo of a family hiking in the mountains.

Your Alt Text:
“A family of four hiking along a mountain trail with a scenic view of snow-capped peaks in the background.”

Image 2:
An image of a form submission button.

Your Alt Text:
“Submit form button.”

Image 3:
A decorative floral background used as part of a website’s design.

Your Alt Text:
“Decorative image.”

Review and Feedback:

Once you’ve written the alt text, compare it to best practices:

• Does it describe the image’s content or purpose?
• Is it concise yet meaningful?
• Does it avoid redundancy?

Lab 2: Using Transcripts and Captions for Media

In this lab, you will create captions and transcripts for a short video clip and an audio file.

Instructions:

1. Video Clip: Watch a short video (provided) and write captions that include spoken dialogue, sound effects, and any meaningful background sounds.

   • Example: [wind blowing], [car honking], “Hello, how are you today?”

2. Audio File: Listen to the provided audio clip and write a transcript that captures everything spoken in the clip, as well as any non-verbal sounds.

   • Example: “Welcome to the Accessibility Workshop. [Applause] We’re excited to have you join us.”

3. Review your captions and transcript for accuracy and clarity.

Case Studies

Case Study 1: Alt Text for E-Commerce

An online fashion retailer revamped its website to be accessible by adding descriptive alt text to all its product images. Previously, the site used default alt text such as “image001.jpg,” which was not helpful for screen reader users. After updating the alt text to describe the style, color, and features of the clothing items, the retailer saw a 15% increase in engagement from customers using assistive technologies.

Case Study 2: Captioning for Online Learning

A university added captions and transcripts to all of its video lectures after receiving complaints from students who were hard of hearing. As a result, the videos became easier to follow for all students, including those who used captions for better comprehension. The university also noticed that students who did not speak English as a first language benefited from having captions to support their understanding.

Online Tools for Accessibility

• WAVE (Web Accessibility Evaluation Tool):
  Allows you to test websites for accessibility issues, including missing alt text.
  https://wave.webaim.org/

• Axe Accessibility Tool:
  A browser extension for developers to check the accessibility of web pages.
  https://www.deque.com/axe/

• Amara (Video Captioning Tool):
  A free tool for creating and editing captions for videos.
  https://amara.org/

End of Lecture Quiz

1. What is the primary purpose of alt text?

• a) To provide additional SEO value to images
• b) To describe the content and function of images for users who cannot see them
• c) To make the website look more modern

Answer: b) To describe the content and function of images for users who cannot see them
Rationale: Alt text ensures that users who are visually impaired or using screen readers can understand the content or purpose of an image.

2. What is the difference between captions and transcripts?

• a) Captions are for audio content, and transcripts are for video content
• b) Captions sync with video or audio content, while transcripts provide the full text of spoken words and sounds
• c) Transcripts only include spoken dialogue

Answer: b) Captions sync with video or audio content, while transcripts provide the full text of spoken words and sounds
Rationale: Captions are displayed in real-time with the media, while transcripts are the complete text of audio content, including non-verbal sounds.

3. Why is it important to avoid relying solely on sensory characteristics when giving instructions?

• a) Not all users perceive color or shape in the same way
• b) It makes the website look cluttered
• c) Sensory characteristics are irrelevant for most users

Answer: a) Not all users perceive color or shape in the same way
Rationale: Relying solely on sensory characteristics can exclude users who are color-blind or have other disabilities that affect perception.

Conclusion

The Perceivable principle is about ensuring that all users, regardless of their abilities, can perceive and interact with content. By incorporating alt text, captions, transcripts, and attention to visual elements like contrast, designers can make their content more inclusive and accessible to a broader audience.