Aligning a microsite with accessibility guidelines

At a glance:

When a design firm needed to align a client’s microsite with Web Content Accessibility Guidelines (WCAG), they contacted us.

Customer challenge

A nationwide financial institution had hired our client to build a microsite highlighting their mortgage and loan services, featuring embedded videos and links to resources on their website. One of the bank’s requirements for the site was compliance with WCAG AA Level to ensure usability for visitors with disabilities. Because our client was familiar with our accessibility expertise and record of success with similar projects, they brought us in to assess the site and train their design and development team on the fixes needed to achieve compliance.

Why they chose us

Our client was looking for a company with deep expertise in both user experience and accessibility. They conducted an online search that included reviews of insights and case studies, then interviewed several organizations about how they would approach the firm's specific situation. The client was impressed with us — particularly our ability to adapt our process to fit their needs — and determined we were the right choice for this project.

Approach and solution

We evaluated the site according to more than 30 individual criteria under WCAG’s four principles of accessibility:

• Perceivable: Information and user interface components must be presentable to users in ways they can perceive. Examples of criteria include providing text alternatives to non-text content, such as video captions, and sequentially ordered headings that reflect content hierarchy.
• Operable: User interface components and navigation must be operable. Examples of criteria include allowing users to navigate between elements using the keyboard, turn off or adjust time limits, open and close modal windows, play and pause videos, and turn captions on and off.
• Understandable: Information and the operation of user interface must be understandable. Examples of criteria include consistent identification of components, such as modal windows or links that open in a new tab or window, and suggested corrections within error messages.
• Robust: Maximize compatibility with current and future user agents, including assistive technologies. Examples of criteria include incorporating complete start/end tags and having elements nested according to their specifications.

We went through several rounds of changes with our client’s development team, each time reviewing the site against the entire list of criteria to ensure that fixes in one area did not affect compliance in another. For each round, we met with our client’s lead developer to discuss the remediations that needed to be addressed and to offer advice on solutions when needed.

Value and benefits - “The wins”

Upon completion of the project, our client delivered a WCAG-compliant microsite, which the bank can launch with the confidence that it will be accessible by all users, including those with disabilities.