How to Implement WCAG 2.1 AA Into Your Development Process

Web development agencies are seeing a spike in demand for WCAG 2.1 AA conformant websites and mobile apps.

Because various laws – in the United States and internationally – have incorporated the Web Content Accessibility Guidelines (WCAG) as technical standards, clients are stipulating any work done must be WCAG 2.1 AA conformant.

So how do you, as a web development agency, make WCAG 2.1 AA a part of your processes?

Step 1: Contextualize Accessibility

Some developers are going to skip contextualization because it doesn’t sound significant, but we’re telling you – if you understand what everything means and why you’re doing it (beyond clients keep asking for it), then you’re going to pick up accessibility much, much faster.

Here are some items to think about:

  • What disabilities does WCAG take into account?
  • How would someone have access to content / interact with a website if they couldn’t see, hear, etc.?
  • Why is each WCAG success criterion included? What is each success criterion there for?

Step 2: Learn WCAG, For Real

In our experience, many developers have some awareness of the Web Content Accessibility Guidelines, but they want to rush through them so they can move past accessibility.

In addition to hurrying, there’s also an oversimplification of accessibility:

“It’s mostly just alt text and form field labels.”

A broad generalization of what accessibility is only reinforces that you don’t truly understand it.

Moreover, when you skip steps, it comes back to haunt you and this is especially true with accessibility.

We recommend you learn all 50 success criteria in WCAG 2.1 AA and create a customized WCAG checklist for the success criteria applicable to your role.

Beyond just being on top of your game and providing excellent work, compliance is at stake which means accessibility ebbs into liability so take the necessary time to learn this.

Quiz: What do ARIA labels do and not do?

Hint: This is why we always use HTML whenever possible.

Step 3: Learn ARIA

Knowing what’s required is one thing. Knowing how to implement accessibility is another.

And by far one of the things that developers make mistakes with is ARIA (Accessible Rich Internet Applications). Knowledge of ARIA is absolutely essential to accessibility, but it also takes some time to get accustomed to.

We highly recommend the Mozilla Developer Network’s ARIA guide.

Step 4: Create Your Cheatsheets

We know you’re a really good developer, but accessibility isn’t something you just pick up overnight; it’s a separate skill that takes time and experience to develop proficiency and expertise.

(This is not to say it’s super hard, just that there are layers to the game and the layers don’t all come in a cram session in one afternoon.)

So to start, we recommend you create two cheatsheets to not only help you learn accessibility, but help guide you along the development process.

One cheatsheet will be for reminders on commonly used interactive elements and the other will be a resource for different WCAG success criterion / accessibility considerations.

Interactive Elements Checklist

Note 1: This isn’t mean to be exhaustive, but rather to give you a feel for what might be included in your checklist.

Note 2: A good foundation is to ensure that all interactive elements are fully keyboard navigable, receive focus, a focus indicator is in place, and have the applicable name, state, role, and/or value coded in.

  • Buttons
  • Forms
  • Menus
  • Modal dialogs
  • Sliders
  • Value selectors
  • Check boxes
  • Radio buttons
  • Media players

WCAG Success Criterion Checklist

Note: Again, this isn’t exhaustive, but these are several of the many success criteria that developers need to implement into their processes.

  • 1.3.1 Info and Relationships: Make sure information, structure, and relationships conveyed through visual and audible presentation can be programmatically determined.
  • 2.1.1 Keyboard: All functions must be accessible via keyboard.
  • 1.3.5 Identify Input Purpose: Ensure the purpose of each input field collecting user information can be programmatically determined.
  • 2.4.3 Focus Order: Focus order should be logical and intuitive.
  • 3.3.1 Error Identification: Clearly identify input errors.
  • 4.1.2 Name, Role, Value: Ensure all user interface components have a name, role, and state that can be programmatically determined.
  • 2.1.2 No Keyboard Trap: Users can navigate to and from all interactive elements.

Step 5: Practice Implementing Accessibility

You’re not going to have pristine accessibility out of the box – even if you take training.

As a developer, you are responsible for the most success criteria of any role (vs. a content editor or designer), so you have to put accessibility into practice and get better over time.

Eventually, accessibility will become seamless, but as you’re becoming acclimated to WCAG 2.1 AA success criteria, just embrace that you have to start somewhere and you’ll level up your accessibility game in the coming weeks and months.

Step 6: Review Your Work

Even if you’re already already an accessibility expert, you know the importance of reviewing your work because it’s so easy for there to be a single issue.

There are so many different ways to review your work:

  • WCAG 2.1 AA audit (expensive but thorough and complete)
  • user testing (still pricey but very practically helpful)
  • second developer check
  • ChatGPT / AI code check (quick and free, but limited and prone to error and oversight)
  • AXE scan (quick and free, but limited)

Keep in mind that any scans are limited in how many accessibility issues they flag (approximately 25% of WCAG 2.1 AA issues) and they have false negatives (don’t flag an issue where one exists). We recommend the AXE tool because it is more developer centric.

Step 7: Refine Your Process

Over time you’ll start to really become aligned with accessibility requirements for conformance under WCAG 2.1 AA.

At which point, you can start to hone in on the exact right processes for you and how to become even more efficient and effective in implementing accessibility.

This won’t take you long – maybe 3 to 6 months – and the benefit will be amazing because your development team will completely phase out of the disjointed create then remediate process and into simply creating.

Summary

As a development agency, once you have knowledge and expertise in WCAG 2.1 AA conformance, your business will skyrocket.

To learn more about how to best appeal to the growing market demand, sign up for Kris Rivenburgh’s ADA Compliance for Web Agencies course.

This course is to help web agencies decide how to approach accessibility and compliance and then also give direction on messaging to client, limiting liability, and revenue opportunities.

The course also includes a contract template to help limit your liability when offering digital accessibility services.

And if you need help with an audit or user testing, visit Accessible.org to learn how we can help your agency.

Related Posts

WCAG 2.1 AA Training

We have created the best training for learning the Web Content Accessibility Guidelines (WCAG). Videos, Excel spreadsheet checklists, cheatsheets, and code examples included.

Start Learning WCAG