Your web browser is out of date. Update your browser for more security, speed and the best experience on this site.

Update your browser
CapTech Home Page

Articles August 26, 2024

​Making Accessibility Business as Usual: Integrating Accessibility Into Your Design and Development Processes Early and Often

Matt Leahy Virginia Booth
Authors
Matt Leahy, Virginia Booth

​In our previous post in this series, we discussed how organizations can get started with accessibility, build momentum, and begin making progress toward achieving their accessibility goals. This includes defining and communicating an accessibility commitment, assessing the current state of your digital properties, providing training and resources to your teams, and putting processes in place to ensure strong accessibility in new content you produce. 

​With this critical groundwork in place, you’re now prepared to take the next steps: implementing tangible improvements to your websites, apps, and other digital experiences. For some organizations, this may involve a focused remediation effort; for others, it might necessitate a redesign and rebuild.

​Regardless of your approach, whenever you begin making significant updates to the design and code of your experience, incorporating accessibility considerations from the outset and throughout the process can significantly reduce future issues and rework. And establishing these standards now will help you more easily meet accessibility standards on any future projects.

The Importance of Addressing Accessibility Early

​While some WCAG (Web Content Accessibility Guidelines) criteria can be remediated relatively easily after development (e.g., adding alternate text on an image or a label on a field), many fundamentally impact the design in ways that can be more disruptive to address later on. Here are just a few examples: 

​Use of Color

WCAG requires that text, important graphics, and interactive elements must have strong contrast, and that color alone isn’t used to convey meaning without labeling or visual indicators.

​Multiple Modes of Operation

Functionality that relies specifically on the use of a pointer, such as content displayed only on hover or features that rely exclusively on drag-and-drop functionality, excludes many users and violates WCAG.

​Consistent Navigation and Help

WCAG specifies that primary navigation elements and help mechanisms must appear in a consistent order and location across an experience.

​Considerations like these can have significant and cascading effects on the design of your website or app, impacting styling choices, color palette, interaction and functionality, page layouts, and navigational structure. These can be addressed relatively routinely while working on wireframes and UI designs, but making these sorts of changes during development can be significantly more difficult and create unplanned rework. Furthermore, these factors may influence critical decisions like the frameworks, component libraries, or third-party plugins used in development.

How to Embed Accessibility Into the Design Process

​With that in mind, how can our teams get ahead of these issues and ensure that accessibility conformance is achieved efficiently and effectively? The answer is to incorporate accessibility into the earliest stages of the design process.

Evaluate Designs for Measurable Criteria

​Many accessibility requirements like color contrast, text formatting, and touch target size, have measurable standards. Fortunately, many design applications, most notably Figma, the current industry standard, now offer plugins designers can use to evaluate these criteria directly in their design files. By leveraging these tools, designers can proactively identify and remediate common issues before they ever get to development.

​Provide Checklists for Your Designers

​Support your designers and content authors by providing documentation and resources. WCAG documentation can be very dense and overwhelming, but a checklist that distills accessibility requirements into simple and actionable points can be very helpful and ensure that accessibility is top-of-mind. Many resources like this are readily available with a quick Google search.

For example, Deque provides this Basic Accessibility Checklist for Designers.

​Consider Different User Abilities and Input Types

​It’s a natural tendency for designers to think primarily about their own experiences and preferences, but not every user has the same abilities, such as using a mouse as their primary means of navigating a website. When working on any new design, we should always consider the different ways that a user may interact, including mouse, touch, keyboard, voice, and so forth, and ensure that the experience is equally as effective, efficient, and intuitive. In our experience, this typically doesn’t require major changes, but rather small adjustments that have big impact.

​Strive for the Highest Standard of Usability

​Finally, we should always strive for the highest standard of usability, particularly to support neurodivergent users. It’s easy to make assumptions about what is intuitive and understandable, but it’s important to question those assumptions and remember that users may vary widely in cognitive functions like reading and comprehension, processing speed, and memory. For example, we recommend assessing the reading level of your content, targeting a ninth grade reading level or below for most experiences, and avoiding the use of acronyms, technical jargon, or figurative language that may not be understandable to all users. It’s also important to design interactions that minimize the cognitive load demanded of users. For instance, entering the same data multiple times within a transaction or transcribing information can unnecessarily increase the likelihood of error for many users.

​How to Include Accessibility in Development Requirements

​Addressing accessibility considerations proactively during initial development can also greatly mitigate the issues that have to be identified and corrected later on. It’s always easier and faster to do it right the first time!

​Annotate Accessibility Information in Design Documents

Visual designs do a good job of representing the experience for a fully sighted user interacting with a mouse or touch, but not so much for other types of users, such as those relying on assistive technology. Designers should always consider these users, and can incorporate annotations into their designs to relay important accessibility considerations to developers. These annotations can remove guesswork and ensure that accessibility requirements are being addressed up front. For design teams that are new to this process, we recommend starting by annotating the basics like alternate text for images, landmark regions, and heading levels.

Screenshot of a UI design file that contains a sample job posting and has alt text for three icons marked with annotations

Example of a UI design file that is annotated with recommended alt text for icons

​Include Accessibility in Acceptance Criteria

​Standard accessibility testing should be an integral part of any significant website update. This process should incorporate basic manual testing alongside existing functional quality assurance measures already being performed. Testing should include navigating with both keyboard and mouse, using a screen reader, and verifying zooming and text resizing functionality. You should also complement manual testing with automated testing using simple browser plugins like Axe DevTools or WAVE. For more sophisticated development environments, consider integrating automated accessibility checks directly into development workflows to provide immediate feedback to developers.

Screenshot of accessibility acceptance criteria for checkbox components, including activation, accessible label role and state, and keyboard operability

Example of accessibility acceptance criteria

​Incorporate Accessibility Testing Into QA Processes

Standard accessibility testing should be an integral part of any significant website update. This process should incorporate basic manual testing alongside existing functional quality assurance measures already being performed. Testing should include navigating with both keyboard and mouse, using a screen reader, and verifying zooming and text resizing functionality. You should also complement manual testing with automated testing using simple browser plugins like Axe DevTools or WAVE. For more sophisticated development environments, consider integrating automated accessibility checks directly into development workflows to provide immediate feedback to developers.

Screenshot of automated accessibility scan results, including issues with page content outside of landmarks, incorrect heading levels, and empty headings

Example of results from an automated accessibility scan

​How to Select the Right Technology

​Most websites are maintained through a Content Management System (CMS) and include content and functionality that is supplied by third parties through plugins, embeds, or other integrations. However, not all third-party tools meet accessibility standards. Even if the rest of your website is accessibility-friendly, non-compliant tools can still create an inaccessible experience for many users. And replacing these deeply integrated technologies can be particularly challenging, costly, and time-consuming.

​To ensure new technology meets accessibility standards:

  • ​Look on the vendor’s website or in your contract for documentation of their accessibility support. 
  • ​If you can’t find accessibility documentation, request an Accessibility Conformance Report (ACR), commonly in the Voluntary Product Accessibility Template (VPAT) format. An ACR should include details on how the experience meets or does not meet each WCAG success criteria, with corresponding notes to justify the assessment.
  • ​If your team has the capability, perform your own accessibility assessment of the technology to ensure it meets your standards. 
  • ​For CMS solutions, you can also inquire whether the platform meets the W3C’s Authoring Tool Accessibility Guidelines (ATAG). Just as the W3C provides the WCAG framework to evaluate the accessibility of digital user experiences, it also provides the ATAG framework to assess both the accessibility of the CMS editing interface and its ability to output accessible content for your website.
    Screenshot of a sample A C R. Has three columns for Criteria, Conformance Level, and Remarks and Explanation.

    ​ACR sample provided by Deque 

    ​Don’t Stop There

    ​The recommendations in this article will help you successfully address accessibility in new design and development. However, it’s important to remember that accessibility is not a one-time effort, and achieving conformance with required standards like WCAG does not mean there isn’t room to improve. To maintain and enhance accessibility over time, regularly monitor the accessibility of your websites and apps, and always seek input from users with disabilities. This will help you identify enhancement opportunities and provide the most inclusive experience possible.​ If you’re interested in learning more, check out the webinar we presented through the Colorado Statewide Internet Portal Authority (SIPA) in April 2024, Making Accessibility “Business as Usual”.

    Related Content