Resolve site accessibility issues with Emulsify

Designing website components with accessibility in mind isn’t just a method of avoiding legal consequences. From the perspective of audience growth and acquisition, it’s also just good business sense. Still, if not considered early in the design stage, developing an equitable user experience grows more costly. Retrofitting a design to current standards is always a more expensive undertaking. Factor in the added legal costs of being found in violation of the ADA, and your organization’s expenses grow that much higher

With the aid of automated development tools, accessibility design isn’t just more affordable; it’s integrated with your team’s process. The retooled Emulsify uses Storybook to test all project components for meeting accessibility standards as they develop. In Emulsify, Storybook’s Accessibility add-on is enabled and set to be the default display, putting it front and center while giving you instant accessibility testing feedback when creating or editing components. Whether you’re building a new website button or call to action, your team will recognize issues in real-time

Emulsify’s testing process is powered by the popular plugin Axe, which is the accessibility tool applied by development teams at Microsoft and Google. As development work progresses, Emulsify tests your code quality along with calling out common usability issues such as color contrast and heading usage, which are a key factors for visually impaired users

The test results are passive, which means the errors detected by Emulsify won’t stop your team from continuing their work. But your developers will receive immediate feedback about potential problems, even if a component’s accessibility can’t be verified. Unlike other automated tests, Emulsify will flag issues such as a lack of a semantic heading tags (h1 to h6), which indicate changes in text sizes to screen readers

Through Emulsify, your developers will recognize accessibility issues as they arise as well as those areas that require later manual testing. As a result, your organization gains a greater chance of resolving such issues before they develop further.

The second phase of Emulsify’s accessibility evaluation allows you to test components on-demand against specific disability guidelines. Introduced by the World Wide Web Consortium in 2017, the Web Content Accessibility Guidelines (WCAG) defines how digital content can better serve those with a wide range of disabilities. Through proper digital design methods, users with visual, auditory, cognitive, language, and physical impairments receive an equitable experience

The WCAG sets guidelines at three levels that correspond to the needs of different audiences. “A” is the lowest, and “AAA” requires the highest standards of accessibility. Depending on the project, your content may be required to serve different users and situations. Emulsify allows you to establish the accessibility standard at the command line and incorporate testing into the workflow

In conjunction with Emulsify’s real-time passive testing in Storybook, the command line tool actively uses Axe to evaluate the accessibility of components. The test can be used from the command line or in continuous integration systems to ensure accessibility standards are met. This means it can be used to block code from being contributed to the project that fails the standard. At whatever stage of development, your team gains the additional security of having two powerful testing tools at its disposal within a single design system

Given the stakes involved for both your users and your organization’s reputation and liability, that flexibility in establishing an equitable digital experience provides valuable peace of mind. But maintaining accessibility in design doesn’t stop there. In reality, an automated testing structure only establishes a proper foundation for website development. To ensure a project is open to all audiences, you need to apply skills that only come through years of experience.

After a slow adoption period, accessibility standards are becoming the norm in digital design. The threat of legal action has led to the creation of long-overdue best practices for developers. But from our perspective, that shouldn’t provide the sole motivation

At Four Kitchens, we’ve long considered accessibility for our client projects from the beginning. As we’ve improved the Emulsify Design System, we’ve wanted to extend that perspective to the development community as well. Automated tools provide an effective starting point for any organization. But live user testing is the only way to ensure your website provides a truly accessible experience. With the right agency partner, your organization can ensure your project not only meets but exceeds the expected standard

Four Kitchens has a team of developers trained to resolve accessibility issues, and an internal practice group to ensure we remain current with evolving best practices. With our history and expertise in designing for inclusion, we’re committed to proving projects are accessible to every user. To deliver your best work, your organization should prioritize creating an equitable digital experience as well.