Skip to content

Nicholas Pappas, MSc

Product Designer

Seattle, WA

E-Mail

LinkedIn

Please excuse the mess while I move stories to my new host and webpage format. Content first; format second.

Tanzu Accessibility

Back to Projects

Summary

After a series of unsuccessful accessibility audits, I spearheaded an initiative to embed accessibility as a core value in our feature development process; educate stakeholders; in addition to identifing and resolving accessibility issues across our suite of 8 products. This transformation in thinking resulted in a shift in attitude and increased our compliance score from 60% to 87%.

Role

Accessibility Lead - Auditing, Education, Evangelism

Company

VMware


The Problem

A social and corporate responsibility.

VMware Tanzu's suite of 8 products faced inconsistencies in design and accessibility. With a WCAG 2.1 compliance score of just 60%, we were falling short of providing an inclusive user experience. This led to user frustration, increased development time spent on fixing accessibility issues, and potential legal risks.

VMware Q4 OKR
All product teams must meet a Minimum Accessibility Threshold of 70% with no critical issues.

I led the accessibility improvement effort, collaborating closely with our development teams, accessibility experts, and product stakeholders across all 8 products. My role focused on identifying accessibility issues, prioritizing fixes, and ensuring remediation efforts met WCAG 2.1 success criteria. To accomplish several roadblocks needed to be overcome:

  • Feature velocity made prioritizing resources and giving accessibility adequate attention difficult.
  • Lack of knowledge around WCAG success critia made it difficult to emphasise the importance of accessibility.
  • Complex refactoring. Some issues required complex code refactoring; something we had little opportunity for.

Our accessibility goals:

  • Minimum Accessibility Threshold
    Bring all products in the Tanzu portfolio to score 70%, and no critical issues.
  • Education
    Provide functional teams with targetted insights and education on accessibility, including brown bags, presentations, and mentorship.
  • Process
    Embed accessibility as a natural aspect of our feature process.

Solution Planning & Execution

Measuring Success

We introduced a series of best practices to test and flag issues against, known as Tanzu Accessibility Success Criteria (TASC /tăsk/). Based from existing VMware-wide criteria, TASCs were framed in the context of the Tanzu product space, giving stakeholders better context to each objective.

TASC audits informed a compliance score. Broken down per severity level or presented as a single summation, the compliance score offers stakeholders a tangible metric to gauge success.

Engraining accessible principles:

  • Education
    Through brown bags, tutorial videos, and real product examples, we aimed to educate stakeholders to act independently.
  • Office Hours & Reviews
    I maintained regular office hours and brought a focus on accessibility to design reviews.
  • Tooling
    Adding tooling and references into the design and development process brought accessible thinking to the forefront.

Show, don't tell.

Knowledge should be readily available for designers to be proactive in designing accessibility into the system. The reference sheet helps keep critical considerations in mind early and often in the design process.

We aimed to avoid the idea a "checklist"; something that typically comes into play after design is complete. Short, concise examples, not open to interpretation, help to motivate designers to achieve parity in quality.

A designer's reference sheet for accessibility, providing various key accessibility criteria to keep in mind when designing user interfaces.
  • Color is the first thing we get wrong, and often the easiest to fix.
  • Responsive design focused on magnification for our product, informing how they need to react when zoomed.
  • Alteranative text on images, and ensuring decorative images are annotated.
  • Keyboard accessibility keeps keyboard-only use cases in mind.
  • Links & Buttons helps ensure that designers and developers use the right component for the right job.
  • Headings & Page Titles broke down the logical structure of our product with headings.
  • Forms are a big part of our product, so is getting them right and keeping them consistent.
  • Multimedia , such as animation, is a popular way to add pizzazz to designs and important to keep accessible.
  • Notifications are very important in enterprise products and for accessibility.

Accessibility annotations.

Annotations were added to all components in Tanzu's design system guidelines, informing both designers and developers how each building block worked and how they can work together. Accessibility was built into each design system component when possible.

Accessibility annotations for an accordion component.
  • Keyboard interactions informed how users interact with a component or pattern when not using a mouse.
  • Tab order helped developers structure their code to behave properly.
  • Anotomy breakdowns provided details on proper semantic HTML.

Design wireframes were rarely annotated up to this point. Not only did the design guideline annotations provide their intended information, they also helped serve as informed examples to designers provide their own annotations within wireframes.

Design review expectations were updated to include accessibility annotations.


Results & Impact

Significant results:

  • Compliance
    Tanzu's compliance score increased from 60% to 87%!
  • Time savings
    Time spent iterating and fixing accessibility issues post-release decreased!
  • Awareness
    Increased awareness and skills around accessibile design proactices across our teams.