Accessibility is not an add on. It is what makes content usable for everyone in noisy rooms, bright sun, low bandwidth, or with a screen reader. Three habits deliver the biggest gains fast: alt text for images, captions and transcripts for audio and video, and color contrast that keeps text readable in real life.
Alt text that explains, not decorates
Alt text describes the content and purpose of an image. It should help a person understand what they missed when the image does not load or when they use a screen reader.
Do
-
Describe the essential info and intent
-
Mention text in the image if it matters
-
Keep it concise and specific
-
Mark decorative images as empty alt
Avoid
-
Phrases like “image of” or “picture of”
-
Long scene setting that belongs in the caption
-
Repeating nearby headings or captions
Examples
-
Bad: “Chart”
-
Better: “Line chart showing bus delays drop from 15 to 5 minutes after June”
-
Decorative border:
alt=""
Captions and transcripts that earn trust
Captions help deaf and hard of hearing users and anyone in a quiet office or a loud bus. Transcripts make content searchable and easy to skim.
Captions checklist
-
Include words, speaker names, and key sounds
-
Sync timing closely with speech
-
Use proper punctuation for clarity
-
Place captions so they do not hide important visuals
Transcripts checklist
-
Provide a full text version for every audio and video
-
Preserve speaker changes and timing for long pieces
-
Link sections with time stamps for quick navigation
Color contrast that holds up everywhere
Low contrast text looks fine on a design monitor and vanishes on a phone in sunlight. Meet or beat the common thresholds.
Targets
-
Body text contrast ratio at least 4.5:1
-
Large text contrast ratio at least 3:1
-
Icons and essential graphics at least 3:1 against the background
Practical tips
-
Test in grayscale to catch color dependence
-
Do not use color alone to show state or meaning
-
Add clear focus styles so keyboard users never lose their place
Write and design for real users
Good copy and layout amplify accessibility.
-
Use short sentences and clear headings
-
Break up walls of text with lists and images that have alt text
-
Make target sizes comfortable for touch
-
Ensure all actions work by keyboard and by screen reader
-
Offer multiple ways to complete a task
Mobile, social, and docs
Accessibility must travel with your content.
Mobile
-
Respect system font size settings
-
Support dark mode without losing contrast
-
Keep touch targets at least 44 by 44 px
Social
-
Turn on auto captions and correct them
-
Add alt text to images on every platform
-
Use CamelCase in multiword hashtags
Documents
-
Use real headings, lists, and tables
-
Add document titles and language metadata
-
Export PDFs from tagged source files, not screenshots
Fast testing toolkit
You do not need a lab to improve quality.
-
Run a quick keyboard sweep with Tab and Shift Tab
-
Use built in screen readers for a 5 minute check
-
Spot check contrast with a ratio checker
-
Validate captions and transcripts on a recent upload
-
Ask disabled users to test and pay for their time
Policy and procurement that sticks
Bake accessibility into contracts and reviews.
-
Require conformance to published standards and evidence of audits
-
Ask vendors for sample alt text, caption files, and contrast tokens
-
Include service level terms for caption accuracy and defect fixes
-
Track issues in the same backlog as other bugs
Common myths to drop
-
“It is only for a small group.” Many users benefit in many contexts
-
“We can fix it at the end.” Retrofitting costs more and misses cases
-
“AI captions and alt text are enough.” They help, but human review is still needed
Launch checklist
-
Every image has useful or empty alt
-
Videos have accurate captions and full transcripts
-
Text passes contrast targets in light and dark modes
-
Focus is always visible and keyboard paths are complete
-
Forms have labels, hints, and clear errors
-
A contact path exists for accessibility issues