Why Would Anyone Browse Without CSS?
CSS is what gives every website its design. Websites sure aren't very fun and friendly without it! But as Heydon Pickering tweeted, disabling CSS is a valuable way to check accessibility standards:
- Common elements like headings, lists, and form controls remain semantic and usable
- Visual hierarchy is still established with default browser styles
- Content can be read in logical document order
- Images remain visible as proper
<img>tags rather than disappearing as CSS backgrounds
According to WebAIM's low vision survey, 12.5% of users with assistive technology browse the web with custom stylesheets. That's not a small number.
For developers, this technique reveals whether your site relies too heavily on visual styling for usability. It forces you to examine the underlying HTML structure and ensure content remains accessible through semantic elements alone. Building with progressive enhancement as your guiding principle creates experiences that work for everyone.
What Goes Wrong: Common Problems
When we strip away CSS, we expose the raw HTML structure - and not all sites fare equally well. CSS-Tricks conducted an experiment browsing major websites without styles, revealing several recurring issues.
Background Images Replacing Semantic Content
The Amazon logo uses sprite sheets with background images. Without CSS, users see confusing image fragments with no indication that this represents the site's logo. The navigation home link exists but is hidden inside styled spans:
<a href="/ref=nav_logo" class="nav-logo-link" aria-label="Amazon">
<span class="nav-sprite nav-logo-base"></span>
<span class="nav-sprite nav-logo-ext"></span>
<span class="nav-sprite nav-logo-locale"></span>
</a>
Links Running Together
When links are styled to look like separate elements with CSS, removing the styles reveals them as one confusing block. Users can't distinguish between "Your Account," "Your Lists," and other navigation items. This "mega link" problem makes navigation nearly impossible without visual separation.
Form Controls Without Labels
Forms that rely on visual positioning rather than proper label associations become unusable. Radio buttons without clear label-input connections force users to guess which label belongs to which option. Multiple "Submit" buttons with no distinguishing text compound the confusion.
Content Stacking and Layout Issues
Carousels, tabbed content, and image galleries collapse into unreadable vertical stacks without CSS. Dynamic content that replaces content in place loads sequentially instead, creating excessively long pages.
Semantic HTML Saves the Day
The best sites share common characteristics that make them resilient to CSS loss. Progressive enhancement means building a baseline experience that works everywhere, then layering on enhancements.
Proper Heading Hierarchy
Sites with proper heading hierarchies let users understand content organization through document outline tools in browsers and screen readers. H1 through H6 elements create natural document structure that remains useful without any styling.
Unordered Lists for Navigation
GitHub's navigation uses semantic list structures that remain clear without styling - users can distinguish between different sections even without visual separation. List-based navigation (<ul>, <li>, <nav>) preserves usability for keyboard navigation and assistive technologies. Following these web development best practices ensures your sites work for everyone.
Native Form Elements
Stack Overflow's question form maintained basic functionality because it relies on native HTML form controls. Proper label-input associations, fieldset-legend groupings, and native button elements work regardless of visual styling.
Accessible Images
Amazon displayed product ratings as text fallbacks instead of background image sprites - a practice that works with or without CSS. When logos and icons use <img> tags with appropriate alt text instead of CSS backgrounds, they remain accessible to all users.
Build resilient websites that work regardless of how they're viewed
Start with Semantic HTML
Before writing CSS, ensure your HTML tells a coherent story. A user should understand the page purpose with only semantic elements.
Never Hide Critical Content in Background Images
Logos and icons should use <img> tags with alt text. CSS backgrounds should be purely decorative.
Provide Text Alternatives
Star ratings should include text fallbacks. Icon buttons need visible labels or ARIA labels.
Use Proper List Structure
Navigation should use semantic ul/li structures, not div-based button collections.
Ensure Form Usability
Forms must work when stripped of styling - clear label-input associations and descriptive button text.
Implement Skip Links Properly
Skip links should be first focusable elements and work without JavaScript.
Testing Your Own Sites
The Quick Test
- Disable CSS using browser tools or extensions
- Can you identify the page purpose within 5 seconds?
- Can you navigate to main sections using standard links?
- Can you complete a core task?
- Do images serve as meaningful content, not background decorations?
The Accessibility Audit
- Check heading hierarchy with browser developer tools
- Verify form labels associate correctly with inputs
- Test keyboard navigation through all interactive elements
- Check that skip links exist and work
- Verify color contrast meets WCAG standards
Tools for Systematic Testing
- WAVE accessibility tool for automated checking
- Lighthouse performance and accessibility audits
- AXE accessibility engine for deep analysis
- Browser DevTools accessibility panel for manual inspection
Incorporate these testing practices into your web development workflow to catch accessibility issues early.
Frequently Asked Questions
Sources
- CSS-Tricks: That Time I Tried Browsing the Web Without CSS - First-hand experiment with major websites
- MDN Web Docs: Progressive Enhancement - Authoritative definition and principles
- WebAIM Low Vision Survey - Statistics on assistive technology usage