In this section, we will explore the first principle of accessible design: making content perceivable. This principle ensures that information and user interface components are presented in ways that users can perceive, regardless of their sensory abilities.

1. Text Alternatives for Non-Text Content

   • Provide text alternatives for images, icons, and other non-text content.
   • Use alt attributes in HTML to describe images.
   • Ensure that text alternatives convey the same information as the non-text content.

2. Time-Based Media

   • Provide alternatives for time-based media, such as audio and video.
   • Include captions for videos and transcripts for audio content.
   • Offer sign language interpretation if possible.

3. Adaptable Content

   • Create content that can be presented in different ways without losing information or structure.
   • Use semantic HTML to ensure content is adaptable.
   • Avoid using tables for layout purposes.

4. Distinguishable Content

   • Make it easier for users to see and hear content, including separating foreground from background.
   • Ensure sufficient color contrast between text and background.
   • Allow users to resize text without loss of content or functionality.

Explanation:

• The alt attribute provides a text alternative for the image, which is read by screen readers. This is crucial for users who cannot see the image.

Explanation:

• The <track> element is used to specify text tracks for <video>. Here, it provides captions, which are essential for users who are deaf or hard of hearing.

Task: Add appropriate alt text to the following image tag.

Solution:

Feedback:

• Ensure the alt text is descriptive enough to convey the same information as the image.

Task: Check the color contrast of the following CSS and suggest improvements if necessary.

Solution:

• The contrast ratio between #ffffff (white) and #cccccc (light gray) is too low. Consider using a darker text color.

Feedback:

• Use tools like the WebAIM Color Contrast Checker to ensure your color choices meet accessibility standards.

In this section, we covered the importance of making content perceivable by providing text alternatives, ensuring adaptable content, and maintaining distinguishable content through proper color contrast and text resizing. These practices are essential for creating an inclusive web experience for all users. In the next section, we will explore how to make user interfaces and navigation operable for everyone.