Accessibility CS Thinking Example 2
Follow the full solution, then compare it with the other examples linked below.
Example 2
mediumA website uses images without alt text and relies entirely on colour to convey information (red = error, green = success). Explain why this is an accessibility problem and how to fix it.
Solution
- 1 Step 1: No alt text: screen readers cannot describe images to blind users. They hear nothing or just 'image'. Fix: add descriptive alt text to every meaningful image.
- 2 Step 2: Colour-only information: colour-blind users (about 8% of males) cannot distinguish red from green. Fix: use text labels or icons alongside colour (e.g., a cross icon for errors, a tick for success).
- 3 Step 3: Both problems violate WCAG (Web Content Accessibility Guidelines) which require text alternatives and information not conveyed by colour alone.
Answer
No alt text excludes blind users. Colour-only information excludes colour-blind users. Fix: add alt text and use icons/labels alongside colour.
Accessibility issues are often easy to fix but frequently overlooked. Following WCAG guidelines during design prevents costly retrofitting and ensures inclusive access from the start.
About Accessibility
The design of products, devices, and environments so that people with disabilities can use them effectively. Accessibility (often abbreviated a11y) includes features like screen readers, captions, keyboard navigation, high-contrast modes, and alt-text for images.
Learn more about Accessibility →More Accessibility Examples
Example 1 easy
What is digital accessibility and why is it important? Give three examples of accessibility features
Example 3 mediumEvaluate the accessibility of a mobile app that has small touch targets (tiny buttons), no support f
Example 4 hardExplain the concept of 'universal design' and how it differs from 'designing for disability'. Give a