Can accessible design also be more sustainable?
UI design improves user experience and contributes to sustainability by optimizing code structure, reducing page weight and supporting inclusive digital use. I created two comparable websites, one that follows accessibility best practices and one that intentionally ignores them. Then, I measured and analyzed how the design choices affect sustainability and usability.
Creating Two UI Versions
I developed two simple landing pages using basic HTML and CSS in Visual Studio Code.
Accessible Version
- Semantic HTML tags (
<header>,<nav>,<main>,<footer>) - Proper heading hierarchy
- Clear and descriptive labels for form inputs
- Keyboard-navigable links and buttons
- Visible focus styles for accessibility
- Descriptive button text and aria-labels
The full accessible code uses clean HTML and includes screen reader support and best practices for form interaction.
Non-Accessible Version
- Uses only
<div>s and<span>s, no semantic structure - No form labels
- Placeholder text instead of labels (bad for accessibility)
- No keyboard or screen reader support
- No visible focus states
The visual design is similar, but the structure lacks meaning for assistive technologies and introduces usability issues.
Testing & Comparison
I tested both versions using:
- Lighthouse in Chrome DevTools (focusing on accessibility and performance)
- WebsiteCarbon.com (to estimate CO₂ emissions)
Results:
| Metric | Accessible Page | Non-Accessible Page |
|---|---|---|
| Accessibility Score | 100 | 54 |
| Performance Score | 98 | 89 |
| Estimated CO₂ Emission | 0.14g per visit | 0.22g per visit |
| Page Size | 9.3 KB | 15.1 KB |
| DOM Elements | 22 | 34 |
| Screen Reader Compatible | ✅ Yes | ❌ No |
| Keyboard Navigation | ✅ Yes | ❌ No |
What I Learned
While building and testing both pages, I found that:
- Semantic HTML makes the structure clearer for both browsers and assistive tech.
- Accessibility best practices often lead to cleaner and smaller code, which is easier to maintain and faster to load.
- The accessible version had fewer DOM elements, lighter styles and required fewer workarounds.
- The non-accessible version relied on
<div>structures, custom styling hacks and was bloated despite its simple appearance.
Conclusion
Making websites accessible is not just an ethical or legal concern, it can also lead to better-performing and more sustainable digital products. Cleaner code, semantic structure and user-friendly interactions reduce friction, device strain and energy use over time.
For designers and developers, this is an important reminder that good UX and sustainable development go hand in hand.
