Equivalent Experiences: Thinking Equivalently

Building Websites That Work for Everyone

Building accessible websites isn't about checking boxes or following regulations--it's about ensuring every visitor can accomplish their goals. An equivalent experience means that people with disabilities can use your website just as effectively as anyone else.

This article explores practical strategies for achieving that goal through the Web Content Accessibility Guidelines (WCAG), the "How Would I?" empathy framework, and real-world code solutions for common accessibility barriers. By understanding these principles and implementing them thoughtfully, you create digital experiences that serve all users effectively, regardless of their abilities or how they interact with your content.

Related: Learn how HTML is not a programming language and why semantic markup matters for accessibility, or explore 50 new CSS techniques for your next web design that incorporate accessibility best practices.

Setting a Standard: The Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG) outlines in painstaking detail how to craft accessible digital experiences. While a long and dense document, it is incredibly comprehensive--to the point where it's been codified as an international standard. For over 10 years, we've had a globally agreed upon, canonical definition of what constitutes as usable.

The WCAG framework provides a shared standard that developers, designers, and organizations can follow to ensure their digital products are accessible to people with a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. This standardization means teams have clear targets to work toward and users can rely on consistent experiences across the web.

The Four Principles of WCAG

These principles form the foundation of accessible design and development, guiding everything from HTML structure to visual presentation. Understanding these principles helps you make informed decisions throughout the development process. Accessible websites also tend to perform better in search rankings, making our SEO services and accessibility implementation a powerful combination.

The "How Would I?" Framework

If you need a little help constructing the initial mental framework the WCAG gets at, a question to always ask yourself when making something is, "How would I use this if..." This gets you to check all the biases that might be affecting you in the moment. By systematically questioning your assumptions, you uncover accessibility barriers you might otherwise overlook.

This framework helps identify cognitive biases that affect design decisions, such as the assumption that everyone interacts with technology in the same way. When you actively consider different abilities and situations, you design more inclusive experiences.

Questions to consider:

• How would I use this if I can't see the screen?
• How would I use this if I can't move my arms?
• How would I use this if I'm sensitive to flashing and strobing animation?
• How would I use this if English isn't my primary language?
• How would I use this if I have a limited budget for bandwidth?
• How would I use this if I've set a large default type size?

Each question opens a different avenue for improving your design, revealing possibilities you might not have considered otherwise.

A Gentle Introduction to Inclusive Design

If you're looking for a more approachable resource for how to dig into what the WCAG covers, the Inclusive Design Principles would be a great place to start. The seven principles it describes all map back to WCAG success criteria, providing a more intuitive entry point for those new to accessibility.

The Inclusive Design Principles offer a human-centered approach that complements the technical requirements of WCAG. They help teams think beyond compliance and focus on creating genuinely inclusive experiences.

The Seven Inclusive Design Principles

These principles help teams move beyond minimum compliance toward truly inclusive design that serves diverse user needs.

Practical Solutions: Wayfinding with Headings

Heading elements are incredibly important for maintaining an equivalent, accessible experience. When constructed with skill and care, heading elements allow screen reader users to quickly determine the contents of a page or view and navigate to content relevant to their interests. This is equivalent to how someone might quickly flit around, scrolling until something that looks pertinent comes into view.

Research from the Nielsen Norman Group shows that people rarely read web content word by word--they scan for relevant information. Screen reader users navigate similarly, jumping between headings to find what they need. Good heading structure makes this possible.

Best Practices for Headings

• Use only one h1 per page for the main title
• Don't skip levels (h1 → h2 → h3, not h1 → h3)
• Use headings to outline content structure, not for styling
• Keep heading text concise and descriptive
• Ensure headings accurately describe the content that follows

Example Structure

<h1>Main Page Title</h1>
 <h2>Major Section</h2>
 <p>Content for the major section...</p>
 <h3>Subsection</h3>
 <p>Content for the subsection...</p>
 <h2>Another Major Section</h2>
 <p>Content for the next major section...</p>

Proper heading structure also helps with SEO, as search engines use headings to understand page organization. See also our guide to CSS multiple column layout for creating accessible multi-column content layouts.

Practical Solutions: Meaningful Links

Links need to provide clear context about where they lead. Screen reader users often navigate through a page by jumping from link to link. If every link says "click here" or "read more," this becomes an exercise in frustration--users have no idea where each link will take them without backtracking to read surrounding context.

Effective link text allows users to understand the destination before clicking, enabling informed decisions about whether to follow the link. This applies to all users, not just those using assistive technologies.

Poor Link Text ❌

• "Click here to learn more about our services"
• "Read more"
• "Click here"

Good Link Text ✅

• "Learn more about our web development services"
• "Read our guide to accessible design"
• "Download the annual report (PDF, 2.4 MB)"

Pro tip: Links should make sense out of context. If a screen reader only announces "link, link, link," users can't navigate effectively. Aim for link text that, when read alone, clearly indicates the destination.

When links open new windows or download files, include that information in the link text so users know what to expect. This transparency helps everyone plan their experience accordingly.

Practical Solutions: Images and Alt Text

Alternative text is a fallback. If the image fails to load, or the person can't see it, the alt text communicates the intended meaning. The goal is to create an equivalent experience to seeing the image--conveying the same information and purpose.

Writing effective alt text requires understanding what the image communicates. Is it decorative, informational, or functional? Each type requires different treatment.

Writing Effective Alt Text

• Be concise but complete--typically under 125 characters
• Don't start with "Image of..." or "Picture of..." (screen readers announce the image role)
• Convey the meaning and purpose, not just a literal description
• For complex images like charts, provide a longer description nearby or via longdesc

Examples

Decorative images that don't convey meaningful content should have empty alt attributes (alt="") so screen readers skip them. Informational images need descriptive alt text that conveys the image's purpose or content.

Practical Solutions: Visible Focus States

Interactive elements need visible focus states. When navigating via keyboard, users need to know where they are on the page at all times. Default browser focus styles exist for a reason--they're often the only indicator that an element is interactive.

Removing focus outlines is one of the most common accessibility anti-patterns. This seemingly small change creates significant barriers for keyboard users, including those with motor disabilities who rely on keyboard navigation.

Never Do This ❌

*:focus {
 outline: none;
}

Better Approach ✅

/* Clear, visible focus styles for all interactive elements */
:focus-visible {
 outline: 3px solid #0066cc;
 outline-offset: 2px;
}

/* Enhanced focus for form elements */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
 outline: 3px solid #0066cc;
 outline-offset: 2px;
 box-shadow: 0 0 0 6px rgba(0, 102, 204, 0.2);
}

The :focus-visible pseudo-class helps by only showing focus indicators when needed--on keyboard navigation--while keeping the clean appearance for mouse users who don't need them. This balances aesthetics with accessibility effectively.

Custom components and interactive elements built with JavaScript frameworks like Rescript vs TypeScript or Creating React context menu require special attention to ensure focus states are properly implemented and maintained during interactions. Modern AI-powered interfaces can also benefit from these accessibility patterns--learn more about AI automation services that prioritize inclusive design.

Practical Solutions: Color and Accessibility

Color should never be the only way information is conveyed. About 8% of men and 0.5% of women have some form of color vision deficiency. Additionally, high-contrast modes, dark mode, and screen glare can all affect how colors appear on users' screens.

When color alone indicates status--error, warning, success--users with color blindness miss critical information. This affects not only accessibility compliance but also usability for all users in various viewing conditions.

Accessible Color Usage

• Don't use color alone to indicate status (error, warning, success)
• Combine color with icons, text labels, or patterns
• Ensure sufficient contrast ratios between text and background
• Test your color palette with color blindness simulators
• Consider how your colors appear in forced color modes

Minimum Contrast Requirements

Tools like the WebAIM Contrast Checker help verify your color choices meet WCAG requirements. Testing with color blindness simulators like Coblis helps you understand how your design appears to users with different types of color vision deficiency.

Practical Solutions: Respecting Motion Preferences

Many people have vestibular disorders or are sensitive to motion. Vestibular disorders affect the inner ear and can cause dizziness, nausea, and disorientation when exposed to moving visual content. CSS provides a media query to detect this preference:

@media (prefers-reduced-motion: reduce) {
 * {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 scroll-behavior: auto !important;
 }
}

This respects user preferences while allowing animations for those who don't mind them. The key is providing an equivalent experience--users who need reduced motion get static versions, while others enjoy smooth animations.

Motion-Safe Animation Tips

• Provide a toggle for auto-playing videos or carousels
• Never auto-play audio without user consent
• Allow users to pause, stop, or hide moving content
• Avoid animations that flash more than 3 times per second (this can trigger seizures)
• When in doubt, respect the system preference setting

Even subtle animations like hover effects should be considered. For more on CSS animations and transitions, see our guide to 50 brilliant CSS3 JavaScript coding techniques for motion-safe implementation patterns.

Practical Solutions: Accessible Copywriting

Accessible copywriting benefits everyone--not just users with disabilities. Write in plain language, use heading structures that make sense, and provide clear instructions. Clear communication reduces cognitive load for all readers.

Plain language isn't about dumbing down content; it's about being direct and avoiding unnecessary complexity. Technical terms and jargon should be defined when first used, helping readers build understanding progressively.

Plain Language Principles

• Use common, everyday words when possible
• Keep sentences and paragraphs short and focused
• Define technical terms when first used
• Use active voice for clarity
• Break up complex information with lists and headings
• Provide context before introducing new concepts

Before vs After

Before: "In order to facilitate the optimization of your user experience, it is recommended that you utilize our proprietary configuration interface."

After: "Use our settings page to customize your experience."

Before: "The aforementioned error has occurred due to an invalid input in the designated field."

After: "There's an error in the email field above. Please check your email address."

Clear copy also improves SEO and translation quality, making your content more findable and accessible across languages.

Resources for Further Learning

Testing Tools

Learning Paths

• W3C Web Accessibility Initiative (WAI) tutorials - Comprehensive, official guidance
• Inclusive Design Principles website - Human-centered accessibility approach
• A11Y Project community resources - Practical tips and checklists
• WebAIM comprehensive guides - In-depth accessibility techniques

For developers working with specific frameworks, explore our guides to styling React and using props to pass data in Vue 3 for framework-specific accessibility considerations.

Conclusion: Embrace the Equivalent Mindset

Constructing an equivalent experience may mean changing the way you think about development and design, and potentially reevaluating your existing work. The practical solutions covered here--proper headings, meaningful links, clear alt text, visible focus states, respectful animation, and accessible copy--address common, everyday barriers that affect millions of users.

By embracing an equivalent, inclusive mindset, you create better experiences for everyone. Accessibility isn't a feature or a nice-to-have--it's a fundamental aspect of good design and development that benefits users with and without disabilities alike.

The key is to start where you are, with what you have. Pick one accessibility improvement to implement in your next project. Test it with real users. Then pick another. Small, consistent improvements add up to significantly more accessible experiences over time.

Start small, test often, and remember: every accessibility improvement you make helps someone accomplish their goals more easily.

Ready to build more accessible digital experiences? Our team specializes in creating websites and applications that work for everyone. Contact us today to discuss how we can help make your digital presence more inclusive.

Sources

1. Smashing Magazine: Equivalent Experiences: Thinking Equivalently - Primary source for practical accessibility implementation guidance and code examples.
2. Smashing Magazine: Equivalent Experiences: What Are They? - Part 1 of the series, establishing foundational philosophy.
3. W3C WAI: Web Content Accessibility Guidelines (WCAG) - The international standard for web accessibility.
4. Inclusive Design Principles - Seven principles mapping to WCAG success criteria.
5. Tuts+: The Importance of Heading Levels for Assistive Technology - Guidance on heading structure for screen readers.
6. Nielsen Norman Group: How People Read Online - Research on reading and scanning patterns.
7. A11Y Project: Accessible Icon Buttons - Best practices for accessible interactive elements.
8. WebAIM: Accessible Forms - Comprehensive form accessibility guidance.