You Don't Need to Look like Craigslist to Be Accessible
20 novembre 2023 • 2 Minute Read • Zachary Tetu, Product Manager
See All Our Insights
What is Accessibility-First Web Design?
20 janvier 2025 • 5 Minute Read • Ari Moros, Designer visuel senior
"Exclusion happens when we solve problems using our own biases. As designers, we seek out those exclusions, and use them as opportunities to create new ideas and inclusive designs.” - Microsoft
Inclusive design has been a growing focus in the UX and web design community since the mid-2000s. It emphasizes creating websites that are accessible to all users, particularly those with disabilities.
When taking an accessibility-first approach to designing your website, there are a few myths we'd like to bust at Verndale, including:
- Accessibility is an add-on.
- Accessibility is for web designers.
- Accessibility is ugly or boring.
- Accessibility is optional or just for the web.
Instead, let's reframe accessibility...
- Accessibility requires forward-thinking.
- Accessibility requires cross-team collaboration.
- Accessibility requires simplicity but can still be creative.
- Accessibility-first is also a mobile-first endeavor.
With all of these myths busted we can explore each area and how you can design your digital and mobile experience to enable accessibility for all users and visitors.
1. Proactive Accessibility for Web Designers
Taking an accessibility approach to your website is about prioritizing it in the design process from the start. Accessibility is a fundamental principle of effective web design. Prioritizing it at the outset ensures that your designs meet the needs of all users, including those with disabilities. This proactive approach prevents the need for expensive retrofitting later and guarantees that inclusivity is built into the product from its inception.
Steps to Take for Proactive Accessibility:
- Understand User Diversity: What are your user's needs across varying abilities, including visual, auditory, motor, and cognitive challenges?
- Adopt Accessibility Standards: Align designs with WCAG (Web Content Accessibility Guidelines) and aim for at least Level AA compliance.
- Build Accessible Design Systems: Integrate tools and guidelines that prioritize high-contrast palettes, readable typography, and intuitive navigation patterns from the start.
- Conduct Early Testing: Use assistive technology simulations, screen readers, and keyboard navigation tests during the design phase to catch issues early.
Embed accessibility into the foundational stages of your project to improve usability for all users and save on long-term costs and inefficiencies.
2. Cross-Team Collaboration for Accessibility
Achieving accessibility is a collaborative effort that extends beyond designers. Building an accessible website requires coordinated contributions from all teams involved, including developers, content creators, QA testers, and stakeholders.
Strategies for Cross-Team Collaboration:
- Early Stakeholder Engagement: Educate and involve stakeholders from the beginning to align them with the importance of accessibility as a business and ethical priority.
- Developer Partnerships: Collaborate closely with developers to ensure design elements translate effectively into accessible code. Shared documentation, design tokens, and regular check-ins foster alignment.
- Content Accessibility: Work with content teams to create clear, concise, and accessible text, including alternative text for images and captions for multimedia.
- QA Integration: Ensure that quality assurance processes include robust accessibility checks, using both automated tools and manual testing.
Cross-team collaboration embeds accessibility into the project’s DNA, ensuring that every touchpoint reflects inclusive principles.
3. Simplify your Design & UX
Sometimes, digital experiences fall short of accessibility because they become overly complicated. As designs grow more complex with numerous features and intricate elements, maintaining accessibility becomes increasingly difficult.
For example, overloaded interfaces can overwhelm users and create barriers to assistive technologies, making it harder for everyone to navigate the experience effectively. Simplicity doesn’t just improve aesthetics; it’s a key to making digital experiences universally accessible.
Strategies for Simplified Design:
- Emphasize Clarity: Prioritize intuitive navigation and reduce cognitive load by presenting information in a logical and straightforward manner.
- Optimize Components: Design buttons with clear hover and focus states, ensure forms are properly labeled, and streamline navigation menus for ease of use.
- Ensure Readability: Use legible fonts with appropriate sizes and spacing. Meet contrast ratio guidelines to support users with visual impairments.
- Limit Visual Overload: Avoid unnecessary embellishments and animations that may distract or confuse users.
Simplified designs enhance usability, making interfaces easier to navigate for all users while reducing barriers for those with disabilities.
4. Accessible Website Animations
Animation plays a key role in accessibility-first web design. Any animations used to present content should include a non-animated, text-based alternative for screen readers. Automatic or looped animations, such as animated GIFs, and blinking or scrolling elements should be avoided to prevent triggering epileptic seizures. Additionally, animations with sound that are essential to content should include synchronized captions or a text transcript.
When used thoughtfully, animations can enrich user experiences. However, they must be designed with accessibility in mind to avoid creating obstacles.
Best Practices for Animations:
- Offer Alternatives: Provide non-animated equivalents for content to support screen reader users.
- Avoid Harmful Effects: Refrain from using looped, blinking, or fast-paced animations that could trigger seizures or cause discomfort.
- Include Captions: Synchronize captions with animations that feature audio to ensure inclusivity.
- Respect User Preferences: Allow users to disable animations through settings, accommodating those with motion sensitivity.
Well-designed animations enhance engagement while maintaining accessibility for all.
5. Accessibility-First is Mobile-First
A major and all-too-common mistake in the website design process is not testing for mobile accessibility. Since 2017, mobile internet users have consistently outnumbered desktop users. By not testing for mobile accessibility, you could be missing out on testing your digital experience for a large portion of your users. WCAG 2.1 recognized these trends and built guidelines around the idea that accessibility-first will increasingly mean mobile-first.
WCAG 2.1 has two success criteria with mobile devices in mind:
- One mandates that content can’t be restricted to a particular device orientation (such as portrait or landscape).
- The other gives guidelines around motion-activated features and outlines that all essential features must be able to be accessed through the user interface.
Smartphone ownership among people with disabilities has been growing, but there’s still a gap compared to the general population. For example, the most recent study by Pew Research Center found that 72% of people with disabilities owned smartphones, compared to 88% of those without disabilities.
As voice-enabled tech and other connected solutions continue to expand, more people in this community are expected to adopt mobile devices. This creates big opportunities for businesses but also increases the risk of legal trouble if mobile accessibility isn’t addressed. Making your mobile experience accessible isn’t just the right thing to do—it’s a smart move for any organization.
Making Accessibility-First Your Methodology
Accessibility-first design transforms inclusion from being a simple feature to becoming the foundation, guiding every step of your website transformation process. It’s about more than meeting baseline standards. It’s about striving to create truly inclusive digital experiences for everyone.
Accessibility must be treated as a critical requirement, on par with performance and visual design. Here's what you need to champion and align on accessibility across your organization:
- Setting Standards: Aligning the project with WCAG and aiming for Level AA compliance at a minimum.
- Advocating for Accessibility: Engaging stakeholders early to secure buy-in and emphasize the importance of inclusivity as both a business and ethical priority.
The good news? Prioritizing accessibility benefits all users, not just those with disabilities.
By focusing on simple, thoughtful design, organizations can:
- Simplify navigation for users with disabilities.
- Communicate information faster for all users.
- Improve loading times, especially on mobile devices.
Of course, accessibility extends far beyond design simplicity. Fonts, content structure, alerts/notifications, videos, and other elements all play crucial roles in creating an inclusive experience. The journey to accessibility-first design is ongoing, but it’s a journey worth taking.
Is your site designed for everyone?
Contact us to learn more about the review and how our team can support your digital journey.