Introducing the Accessible Design Framework

I’ve spoken many times about the need for teams to “shift left” and proactively embed accessibility in the design process. I encourage teams to think of accessibility not as a set of quality gates to be passed, but rather as a guiding philosophy, where accessibility is as integral to a digital experience as flour is to a muffin.

While most people I talk to subscribe to this notion, they don’t feel prepared to meaningfully alter their ways of working. Many teams have had success incorporating accessibility considerations at certain points in the design process, but this approach tends to be disjointed and rarely results in consistently accessible experiences. Making the leap from doing some accessibility work to having an integrated process is typically intimidating. It’s a gap that’s been difficult for design teams to overcome for decades.

For design teams to be successful, any work associated with accessibility needs to fold into the ways we naturally operate. That means that accessibility needs to map to our mental model(s) of design, as well as fit seamlessly into our processes.

I’ve spent over a decade designing accessible digital experiences and coaching countless design teams to do the same. Throughout this time, I honed my personal process for tackling any design problem with accessibility in mind. I’ve now molded that process into a framework that others can use to apply accessible design thinking to anything they’re working on. I call it the Accessible Design Framework.

Understanding the Accessible Design Framework

My objective in creating this framework is to provide designers with a way to design with accessibility in mind, as well as to check their own work and the work of others for accessibility. While this framework is intended primarily for designers, anyone who contributes to digital experience creation (including content creators and developers) will benefit.

The core idea behind the framework is that:

• For any component design in any viewport (whether it’s small, large, simple, or complex),
• In each phase of the information exchange process between a human and their technology (perceive, understand, operate),
• You apply the relevant accessibility requirements and best practices (whether they are design, content, and / or documentation requirements),
• For each technology type (like screens, keyboards, screen readers, etc.).

The key is to understand that our scope of design is not just the human. Rather, our scope of design is a system. This system includes a human as well as the set of technologies that enable them to execute their desired tasks in digital environments.

Within this system, we have to acknowledge that each human has certain capabilities and limitations, which is why they use a particular set of technologies. When we design, we need to think about the human aspects as well as the technological aspects within a given environment or context. As designers, we tend to be really good at considering the human aspects—but, in my experience, we don’t think enough about the technological aspects.

For example, for years we’ve designed applications for the standard computer set-up which includes a screen, keyboard, and mouse. But what if someone doesn’t use a mouse? What if they only use a keyboard? What if they talk to the application? What if they listen to it? It’s when we think about the full range of technologies someone may use that accessibility requirements surface. And we can then incorporate these requirements (be they design, content, and / or documentation requirements) alongside our other functional and non-functional requirements.

But accessible design isn’t as simple as thinking about the different technologies people use, and the requirements that bubble up as a result. There’s a bit more elegance to it. In this human-technology system, there is a process of information exchange from the human to the technology and back again. We perceive information, we process that information or try to understand it, and we act on the information. As a result, the system changes, and new information is revealed. The system is an information feedback loop.

But hey—I’m talking to designers here, so let me show you the framework, rather than just describing it. Theory is a far cry from application. So, to help you understand how to apply the framework to your day-to-day work, I created a series of videos in which I demonstrate how to apply the Accessible Design Framework to a common component: an “add to cart” button. Check out how I iteratively think through the button’s perceivability, its understandability, and its operability.

Access the videos

Discover the principles behind the framework

As designers, it’s our responsibility to design the best possible experience for every user. This framework outlines a process for accomplishing this, providing you with scaffolding for “how” to design more accessibly. But for your final output to be as accessible as you can make it, you need to ensure you also have the full set of accessibility requirements, or the “what.” For that information, download the Accessible Design Principles and Heuristics Guide, which covers more than 170 heuristics you can use to ensure your designs exceed everyone’s expectations.

Download the guide

About Karen Hawkins

Karen Hawkins is the Principal of Accessible Design at Level Access. She holds an honours Industrial Engineering degree with a specialization in Human Factors, and she is a certified accessibility professional. Karen worked for more than a decade as a user experience designer and director, leading and mentoring multidisciplinary teams in creating world-class user experiences and determining complex omnichannel digital solutions for leading global companies. She is a passionate advocate for digital accessibility, and she spends her time training both colleagues and clients to apply, and share, accessible design thinking.