Back to Basics for Integrated Accessibility Design

People talking in a cafe
Jean DerGurahian

Content Marketing Analyst

Jean DerGurahian

A critical part of delivering a stellar user experience is ensuring the products built by DockYard are accessible.

By collaborating across disciplines, DockYard’s UX developers have found that incorporating accessibility can be a natural part of the digital product development process. From design to development and all the way through testing, there isn’t any sacrifice on visual polish to ensure final products are accessible.

During the Abstractions conference, UX Development Managers Jesse Stewart and David Luhr will discuss a few common rules and best practices used at DockYard to make this process thrive.

In their presentation, Building Accessibility Together, they will build an interactive search component from scratch and examine ways to collaborate, create effective handoff materials, implement accessible features, and conduct automated and manual accessibility testing.

Read more thoughts from Jesse and David below, and catch them at Abstractions in Pittsburgh.

Why is accessibility such an important topic?

JS: We care a lot about accessibility at DockYard. It’s integrated into our workflow and our UXD team has compiled best practices around accessibility in our style guide.

There are a lot of reasons why accessibility is important. Designing and building products that have accessibility incorporated from the start makes the user experience better for all users (especially considering that we’re all temporarily abled). Additionally, even though there’s a business incentive to having a wider user base, building products in a non-exclusionary way is the right thing to do.

DL: And the data really shows just how widely important accessibility is. Census data shows that approximately 20% of all Americans, and nearly a third of adults in the US, have a disability. Digital product teams often test for compatibility with web browsers that have one or two percent global use, so considering the needs of so many users is something that should deserve proportional attention and care.

On the other side of things, we have a lot of work to do to make web experiences more accessible. The WebAIM Million study, which audited the top one million websites, found that “97.8% of home pages had detectable WCAG 2 failures.” Since the WCAG 2 guidelines are used to evaluate the accessibility of a website, it’s clear that this important work needs to be done.

How do you build accessibility into the technology development process?

JS: The place to start is with education and empathy. It’s important for all the folks on a team to have a common understanding of what accessibility is, why it’s important, and what impact it has on their product. A good way to start with this is becoming familiar with WCAG guidelines, WAI-ARIA design patterns, and testing resources (like a color contrast checker or learning about keyboard navigation, for example).

Once the team has a shared understanding of the rules and reputable resources, they can work together to build digital products with accessibility as part of their process. The goal is to foster this inclusive mindset so everyone on the team becomes a champion for accessibility.

DL: With this awareness and solid education around accessibility, it’s possible to identify opportunities, catalog areas of need, and spot patterns. Using the guidelines and design patterns as a reference, collaboration at every stage ensures that accessibility gets baked into products as a firm requirement.

Collaborating on accessibility is especially effective when it involves all disciplines — design, UX development, engineering — at every stage. For example, designers and developers should pair on early wireframing to anticipate technical needs for making all functionality accessible, and developers will thrive with well-documented designs that detail statefulness and focus patterns.

What are some additional accessibility considerations?

DL: Accessibility considerations really should just be considerations to ensure a great experience for all users.

To achieve this, we must consider every level of detail in our digital products, from design tokens all the way to cohesive user interfaces. Common examples of this might include making sure typography is legible, having sufficient color contrast, ensuring all states of the UI are distinct, and also adding helpful context for non-sighted users.

What are some best practices you’ll discuss at Abstractions?

JS: We’ll discuss our process from design to development, which includes many common best practices and patterns to follow. A few items we’ll discuss in detail include: design fundamentals, effective design/developer handoff, the importance of semantic HTML, following patterns for functionality, and testing (using both keyboards and screen readers).

What conference topics/presentations are you looking forward to?

JS: Honestly, I’m excited about all of them! There are so many interesting topics and talks that have piqued my interest.

DL: Same! Luckily, a sizeable group from DockYard is attending, so we’ll have to choose different sessions and then share what we loved most.

DockYard is a digital product agency offering custom software, mobile, and web application development consulting. We provide exceptional professional services in strategy, user experience, design, and full stack engineering using Ember.js and Elixir. With a nationwide staff, we’ve got consultants in key markets across the United States, including Seattle, Los Angeles, Denver, Chicago, Austin, New York, and Boston.


Stay in the Know

Get the latest news and insights on Elixir, Phoenix, machine learning, product strategy, and more—delivered straight to your inbox.

Narwin holding a press release sheet while opening the DockYard brand kit box