Accessibility Examples in CS Thinking
Start with the recap, study the fully worked examples, then use the practice problems to check your understanding of Accessibility.
This page combines explanation, solved examples, and follow-up practice so you can move from recognition to confident problem-solving in CS Thinking.
Concept Recap
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.
Accessibility means designing technology so everyone can use it — not just people with perfect vision, hearing, and motor control.
Read the full concept explanation →How to Use These Examples
- Read the first worked example with the solution open so the structure is clear.
- Try the practice problems before revealing each solution.
- Use the related concepts and background knowledge badges if you feel stuck.
What to Focus On
Core idea: Good accessibility design benefits everyone, not just people with disabilities. Captions help in noisy environments; voice control helps when your hands are full.
Common stuck point: Accessibility isn't an afterthought or a bonus feature — it should be designed in from the start.
Sense of Study hint: When designing for accessibility, follow the POUR principles: Perceivable (can users perceive all content?), Operable (can users navigate and interact?), Understandable (is the interface clear?), and Robust (does it work with assistive technologies?). Test with screen readers and keyboard-only navigation.
Worked Examples
Example 1
easyWhat is digital accessibility and why is it important? Give three examples of accessibility features.
Answer
Accessibility ensures technology is usable by people with disabilities. Examples: screen readers, keyboard navigation, captions. It benefits all users.
First step
1
Step 1: Digital accessibility means designing technology so that people with disabilities can use it effectively. About 15% of the world's population has some form of disability.
Full solution
- 2 Step 2: Examples: (1) Screen readers that read text aloud for blind users. (2) Keyboard navigation for users who cannot use a mouse. (3) Captions/subtitles on videos for deaf users.
- 3 Step 3: Accessibility benefits everyone — captions help in noisy environments, keyboard shortcuts help power users, and high contrast helps in bright sunlight.
Designing for accessibility is both an ethical responsibility and often a legal requirement. Accessible design tends to improve usability for everyone, not just people with disabilities.
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.
Example 3
mediumA landing page uses a 14 px light-gray sans-serif on a white background. Identify two distinct accessibility problems and one fix each.
Example 4
mediumAn online quiz auto-submits after 30 seconds and cannot be paused. Identify one cognitive and one motor accessibility issue.
Example 5
hardAn e-commerce checkout fails WCAG by relying on red border for errors and not announcing errors to screen readers. Propose two distinct fixes — one for color-blind users and one for screen-reader users.
Example 6
hardStakeholders for a public health portal include people with low literacy, slow internet, and motor disabilities. List one design choice that benefits ALL THREE groups simultaneously.
Example 7
challengeEvaluate the accessibility tradeoffs of an animation-heavy hero on the homepage. Name two harms, two mitigations, and one stakeholder group that benefits from the mitigations.
Practice Problems
Try these problems on your own first, then open the solution to compare your method.
Example 1
mediumEvaluate the accessibility of a mobile app that has small touch targets (tiny buttons), no support for text resizing, and time-limited forms that auto-submit after 30 seconds. Suggest improvements.
Example 2
hardExplain the concept of 'universal design' and how it differs from 'designing for disability'. Give an example of a technology feature that was created for accessibility but is now used by everyone.
Example 3
easyWhich accessibility feature helps a blind user understand an image on a webpage?
Example 4
easyWhich feature helps a deaf user follow a video's spoken dialogue?
Example 5
easyWhich feature lets a user who cannot use a mouse still operate a website?
Example 6
easyWhich feature helps a user with low vision read text more easily?
Example 7
easyThe abbreviation 'a11y' stands for what?
Example 8
easyTrue or false: accessibility only matters for users with permanent disabilities.
Example 9
easyBesides vision and hearing, name one other category of disability accessibility must consider.
Example 10
easyWhen should accessibility be considered in a project?
Example 11
mediumA site uses light gray text on a white background that fails contrast guidelines. Which disability is most affected, and what is the fix?
Example 12
mediumA video has spoken narration and important on-screen-only sounds. To make it accessible to deaf users, captions should include what beyond dialogue?
Example 13
mediumMatch each feature to the primary need: alt text, captions, keyboard navigation. Needs: cannot hear, cannot see, cannot use a mouse.
Example 14
mediumA form uses placeholder text instead of visible labels. Why is this an accessibility problem for screen-reader and cognitive users?
Example 15
mediumA 'curb-cut effect' example: which accessibility feature, built for one group, also helps users in noisy public spaces?
Example 16
mediumWhy is retrofitting accessibility into a finished product usually worse than designing for it upfront?
Example 17
mediumA developer adds alt text 'image123.png' to every photo. Why does this fail to help screen-reader users?
Example 18
mediumA button is shown only as a colored icon with no text label. Which two groups are most affected, and what is the fix?
Example 19
mediumAuto-generated captions on a lecture video contain many transcription errors. Why does this still fail accessibility, and what is the fix?
Example 20
challengeA team must prioritize accessibility fixes with limited time: (a) add captions to one rarely watched video, (b) fix keyboard access on the main checkout flow used by everyone. Which has higher impact and why?
Example 21
challengeExplain why automated accessibility checkers can pass a page that is still unusable for a blind user, using a concrete example.
Example 22
challengeAn AI image-recognition tool auto-generates alt text but mislabels a wheelchair user as 'broken chair'. Identify the two distinct problems (accessibility and AI) and the safe design choice.
Example 23
easyWhich accessibility feature helps a user who cannot hear audio in a video?
Example 24
easyWhich feature describes an image to a screen reader user?
Example 25
easyTrue or False: a website with no keyboard navigation is inaccessible to users who cannot use a mouse.
Example 26
easyVoice control was designed to help users with motor disabilities. Today, drivers also use it hands-free. What name describes this benefit-everyone effect?
Example 27
easyColor-only signaling (red = error, green = success) excludes which group?
Example 28
easyWhich feature helps a user with low vision who needs larger letters?
Example 29
easyWhen in the development lifecycle should accessibility be considered?
Example 30
mediumA video lecture has only auto-generated captions with frequent errors. Identify the accessibility problem and one fix.
Example 31
mediumA signup form sets `alt=''` on every photo and labels submit-button as a colored icon. Which a11y issue is unique to screen-reader users?
Example 32
mediumMatch each disability category to a primary feature: motor, vision, hearing, cognitive.
Example 33
mediumA button uses only an icon with no text. The team adds `aria-label='Submit form'`. Does this fix screen-reader access?
Example 34
mediumTouch targets smaller than ~44 px are difficult for users with hand tremors. Which disability category does this affect?
Example 35
mediumWhy does relying on placeholder text inside a field instead of a visible label hurt accessibility?
Example 36
mediumA site has an automated a11y checker score of 100/100 but a blind user reports it is unusable. What is the most likely cause?
Example 37
hardA team has time for ONE fix: (a) add high-contrast theme to settings page, or (b) fix unfocusable buttons on the primary purchase flow. Which has higher impact and why?
Example 38
hardAn AI-generated alt-text feature labels a wheelchair photo 'broken chair'. Identify the two distinct concerns (accessibility and AI ethics) and the safer design.
Example 39
hardA page uses a flashing GIF banner. Which group is at concrete risk of harm, and what standard governs the rate?
Example 40
hardA dropdown is built with `<div>` and click handlers but no keyboard role. A screen-reader user cannot select an option. What is the minimal correct fix?
Example 41
challengeA government service uses a CAPTCHA that requires solving a visual puzzle. List one specific group it excludes and one safer alternative.