Who doesn’t like a beautiful, modern, and sleek design? Many companies partner with design agencies because of their extensive expertise and creative vision. While great motion design on a website, or a product with complex features usually delight users, it is very easy to be caught in aesthetics rather than straightforward functionality and conciseness that works for all people – including those folks who need extra assistance while interacting with a digital product. 

I am a Sr. Project Manager at a UI/UX design agency. We have been working with Zenyth Group for more than two years. As we learned more from the Zenyth team, it became apparent that we needed to adjust our design, development, and project management processes to embed accessibility best practices. 

I am happy to share some of our recommendations with you. 

Sales

In 2023, California proposed a website accessibility law with significant compliance responsibilities for businesses. If enacted, such legislation would make WCAG 2.1 level AA a governing standard for websites and applications of “business establishments” that are open to the public. California is a trailblazer in many civil rights-related laws, and this trend is very likely to be picked up by other states, similar to how it happened with state-specific privacy laws. Even if enacted only in California, such legislation would automatically make WCAG 2.1 level AA a nationwide standard, too, because any website or app in California can be accessed across the country. 

Such a shift in legal landscape implies that it is time for design & development agencies to proactively lead deeper conversations about accessibility with their clients. It is a good practice to negotiate any project requirements and constraints during the sales phase. Having a thorough contract that clearly outlines client’s expectations can eliminate project risks and set proper expectations for both vendor and client. Our recommendation is to start considering WCAG 2.1 level AA as a de-facto standard ahead of time and make sure it is outlined in the contract.

Our agency’s standard agreement includes an accessibility clause to avoid any issues in the future. We specify our default level of conformance, and if a client wishes to change it, this is discussed before the contract is signed. Every case is different, but the most common situations are the following: 

• A client does not have any accessibility requirements. In this case, we include our standard level of conformance.
• If a client requires a higher level of conformance than we offer or is obliged to work with a certified accessibility firm, we suggest working with Zenyth Group as our trusted partner. We inform a client about our partnership and specify how the accessibility partner's billing is managed. Usually clients prefer to pay for the partner services separately. We specify the level of conformance in the contract and confirm if the client wishes to receive a VPAT report towards project completion. 

Kickoff 

On kickoff calls the project team walks clients through our process and presents the project timeline. During the kickoff meeting we address accessibility as needed. If a client has specific requirements I recommend highlighting it during the kickoff call once again, so all client stakeholders are aware how the agency plans to approach it. 

Research & Audit

The discovery and research phase of the project is an information-gathering phase that allows the agency team to dive deeper into client’s requirements and expectations. If a client already has a product or a website, the agency conducts an audit. The standard deliverable of this phase is a large presentation with competitor analysis, design best practices, and a list of issues found in existing clients’ products or websites. 

Although our team does not conduct accessibility audits specifically, we make sure to flag any issues with content structure, lack of necessary buttons, contrast issues, too complicated design decisions, issues with navigation, and more. At this point, we usually find enough issues to explain to a client why accessibility is important. If the client wishes to conduct an accessibility audit with an accessibility partner during the Research phase, we would request it from Zenyth Group as a separate deliverable. 

UX Design 

During the user experience (UX) phase, the team creates black-and-white wireframes without any visual identity to show how users will interact with a website/app and how components are organized in the content structure. 

We are aiming to simplify the experience as much as possible and achieve a clear and concise structure of each page. This phase not only defines functional and aesthetical elements but also shows the text hierarchy in each element.

Below is a simple example of what we would show on wireframes (based on a standard web page): 

1. Hero section some text
   1. If we know there will be an animation, we will show a Pause button.
   2. We already show H1, H2 headlines and how long the text will be.
2. About Us section some text
   1. If there will be an image slider, we show controls.
3. Carousel some text
   1. An interactive element such as a carousel should have controls such as arrows.
   2. A carousel should avoid having text in the image. 
4. Video block some text
   1. A video should have controls on the video player or at least a Pause button.
   2. A video block should have captions. 
5. CTA block some text
   1. Call-to-actions should avoid using over-extensive forms. If there is a requirement to have a large form it should be broken down to simpler steps. 
   2. Should have clearly defined error state and provide hints.
   3. Labels should be visible and understandable. 

Below are other UX-related recommendations by our team: 

• Avoid using captcha. If it's impossible, make an audio alternative
• All elements must be accessible without using a mouse. Avoid creating interactions available only on hover. 
• Interactive elements should have clear borders and be large enough to be clickable. 
• Design should be scalable and responsive. 

No matter who develops the website – our agency or client – the UX phase is the phase to show the upcoming design to developers. The accessibility partner can help ensure that all interactions on the upcoming site are accessible and point out if anything is missing, by providing a thorough design annotation of wireframes. Once it is confirmed that all controls are in place, the wireframes can be shown to developers to assess the feasibility of suggested experience. It will help development teams to better prepare for their own project phase in advance. 

UI Design 

This is a visual design phase that comes after the functionality presented during the UX phase is approved. According to the recent Deque case study, around 67% of accessibility issues originate in design. Conducting additional accessibility audits during the UI design phase can significantly reduce any rework during the development phase. A serious advantage of design accessibility audits is that they are less time-consuming for an accessibility partner and hence require less budget than development audits. The following issues can be caught and eliminated during the UI phase: 

Text: 

1. Large paragraphs should be broken down into smaller ones for easier reading to eliminate usability issues
2. Using lists instead of plain text where applicable is preferred some text
   1. If a design uses lists, developers should use HTML list markup as a WCAG requirement
3. For better usability, fonts should be easy to read. The spacing and font size should help achieving easier reading as well
4. The design must support text resizing without distorting the design (designers create the framework for it, developers and QAs must test multiple ways to resize the text) – this is a WCAG requirement

Color and contrast:

1. Every element should be checked for contrast 
2. There should be sufficient contrast between an element and its background 
3. Information should be highlighted not only with color but with elements such as icons

Animations

1. Bright, flashing elements should be avoided
2. Every interactive element should have hints and controls 
3. Video and audio elements should have subtitles or text transcription that are easy to find and turn on/off
4. Any auto-playing content that lasts more than five seconds must have a mechanism to pause, stop, or hide it

Please see: 

Auditing design systems for accessibility by Deque

Accessibility for teams guide by GSA

TPGi Color Contrast Analyzer (CCA)

Understanding Accessible Fonts and Typography for Section 508 Compliance

Breakpoints

All of the above should be available on every breakpoint: small and large desktops, tablets, and mobile phones. It is important to make sure that all components scale correctly and are easy to interact with on every device. 

As I noted above, asking your accessibility partner to review design mockups can eliminate many risks ahead of the development phase. We recommend working closely with the UI/UX design teams to help the partner better understand the interaction behind each component by providing a thorough annotation on its behavior. 

Development

Design <> Development Handoff

Handoffs are milestone meetings between the design and development teams. Handoffs conclude the design phase and mark the official start of development. Per our agency’s process, the design teams aim to deliver fully completed designs for developers to review at least 3-5 days before the handoff call takes place. On a call itself, both teams and project managers confirm that the design mockups and UI library include everything that developers need. Based on my experience, one of the most challenging things for designers to do is to provide annotations that developers (usually very meticulous folks) will find full, transparent, and straightforward enough to work with. As a project manager, I always make sure to keep one designer on a project to support developers and answer their questions during the development cycle. 

Internally, we are striving to improve our handoff process and make it as smooth as possible, but it is a challenging task. This is one more reason why we appreciate working with the accessibility partner on design annotations during the design phase. Clear and precise design annotations create a very strong foundation for developers to succeed. Quality design annotations help eliminate project risks and empower developers to deliver accessible websites. 

Team education

It is important to invest in your team’s education. Not all designers know the accessibility best practices by default, although it is, luckily, becoming a requirement in the profession. Help your by organizing a training with an accessibility partner or signing them up for an online course. Organize workshops where designers who know more about accessibility can educate their coworkers and oversee them including accessibility best practices to their day-to-day work.

Let's continue this conversation and collaboration, exploring innovative ways to integrate accessibility into our projects. The journey towards a more accessible digital world is a collective effort, and every step we take brings us closer to this goal.