Digital
Website Accessibility: The UX Basics Every Modern Website Should Get Right
Website accessibility basics for modern teams. Core WCAG principles, practical checks, and design decisions that make your site usable for everyone.
Contents
Introduction
Accessibility is often treated as a compliance checkbox at the end of a project. In reality, it's foundational UX.
An accessible website isn't just usable by people using screen readers. It's more usable for everyone: clearer headings, better contrast, logical navigation, forms that explain errors, videos with captions, pages that work with keyboard alone. The same patterns that help a user with low vision help a user on a bright sunny day, or a power user who prefers keyboard.
At Designing Dots, we don't treat accessibility as a separate phase. We build it into core design decisions — typography, color, component states, content structure — so baseline is strong without adding cost later.
The Core Principles: POUR
WCAG is built on four principles, summarized as POUR:
Perceivable
Can users perceive information regardless of sensory ability? Covers alt text, captions, sufficient contrast, text that can be resized.
Operable
Can users operate interface regardless of input? Covers keyboard navigation, focus states, no keyboard traps, enough time to interact.
Understandable
Can users understand information and how to operate interface? Covers readable copy, predictable navigation, clear labels, helpful errors.
Robust
Can content be reliably interpreted by assistive tech? Covers semantic HTML, valid markup, proper labeling.
You don't need to memorize success criteria. Design against POUR and you cover 80% that matters.
7 Accessibility Basics Every Website Should Get Right
1. Semantic Structure and Headings
Use real headings, not styled paragraphs.
- One H1 per page describing purpose
- Logical H2 → H3 hierarchy, no skipping
- Lists marked as lists, nav as nav, main as main
Why it matters: Screen reader users navigate by headings. If your page is all divs styled as headlines, they have no map.
At Designing Dots, we've seen fixing heading structure improve screen reader navigation time and also SEO.
2. Color and Contrast
- Body text: at least 4.5:1 contrast
- Large text (18px+ bold or 24px+): at least 3:1
- Don't rely on color alone for meaning. Error states need icon and text
- Links distinguishable beyond color
3. Keyboard Navigation
Your site should work with Tab, Enter, Space, arrow keys.
- Tab order follows visual logic
- Focus indicator visible — never remove outline without replacement
- No keyboard traps: user can Tab into and out of components
- Modals trap focus while open, return focus when closed
- Dropdowns and custom selects need keyboard behavior
Test: Unplug mouse and complete main tasks. That's reality for many users.
4. Forms and Error Handling
Forms are where accessibility most directly impacts conversion.
- Every input has associated label, not just placeholder
- Error messages specific and connected to field
- Errors announced, focus moves to first error
- Required fields indicated visually and programmatically
- Autocomplete attributes used for email, name, address
5. Images and Media Alternatives
- Decorative images have empty alt
- Informative images have concise meaningful alt
- Complex images have longer description nearby
- Icons with meaning have text alternative
- Video: captions, transcript
- Audio: transcript
6. Content Clarity and Predictability
- Write plain, specific language
- Links describe destination: "Download pricing guide (PDF)" not "Click here"
- Navigation consistent across pages
- Don't change context on focus without user confirmation
7. Responsive and Zoom-Friendly
- Page works up to 200% zoom without breaking
- No content hidden behind fixed headers
- Touch targets at least 44px
- Font sizes use relative units
Tools to Test, But Not Depend On
Automated checkers (axe, Lighthouse, WAVE) catch 20-30% of issues: missing alt, contrast errors, missing labels, heading skips. Useful baseline but don't catch real usability: logical order, meaningful alt, keyboard traps in custom components.
Manual checks we run:
- Keyboard-only walkthrough of top 3 flows
- Screen reader check of navigation and forms
- Zoom to 200% and check layout
- Contrast check for all text states
- Captions check for videos
Why this matters for Modern Brands
For product teams, accessible design reduces support, improves conversion, expands audience. For brand teams, signals consideration and quality.
For legal, accessibility is increasingly requirement, especially in US, EU, and enterprise procurement. Fixing late is expensive. Building in is cheap.
Common mistakes
Overlay widget and done. Overlays don't fix underlying markup and often create new problems. Build accessible, don't bolt on.
Removing focus outline. Replace with designed focus indicator, not remove.
Alt text keyword stuffing. Describe meaning in context, not include SEO keywords. Empty alt for decorative is correct.
Custom components with no keyboard behavior. Div that looks like button but is not button fails completely for assistive tech.
Inaccessible PDFs. If critical content lives in PDFs, those PDFs must be tagged or provide HTML alternative.
Designing Dots Approach / Framework: Accessibility as System Quality
We integrate accessibility into design system, not separate checklist.
1. Tokens level: Define color pairs that meet contrast by construction.
2. Components level: Every component includes keyboard interaction, focus, labeling, roles.
3. Patterns level: Form patterns include label, error, help text wiring.
4. Content level: UX writing guidelines include link text, alt text, error format.
5. QA level: Definition of done includes keyboard walkthrough and contrast check.
This way accessibility is not extra per project, it's built into how we design.
Key Takeaways
- Accessibility is usability for larger audience, not just compliance
- Foundation is POUR: Perceivable, Operable, Understandable, Robust
- Seven basics cover most impact: headings, contrast, keyboard, forms, media alternatives, clarity, responsive/zoom
- Use semantic HTML first
- Forms and keyboard are highest impact for conversion
- Automated tools catch ~30%. Manual testing required
- Build into tokens, components, and patterns
Next Steps / Internal Ecosystem
Run 30-minute accessibility spot check on highest traffic template: Tab through keyboard only, check headings with heading map, run contrast checker.
Use audit tools to flag missing labels, contrast issues, heading order, then prioritize fixes by component.
Keep going with UX Design: A Practical Guide to Designing Better Digital Products and Website UX Audit: A Complete Checklist for 2026 — or put it into practice with DOTS UX before your next review.