Tyson Accessibility Guideline

cover
  • Timeline

    Feb - April 2023

  • Deliverables

    Accessibility Guideline, Accessibility Audit Services

  • Reference & Tools

    WCAG, Chrome Plugin, Figma Plugin, SharePoint

Introduction

Background

Joining UX@Tyson, my first mini project focused on web accessibility, a field not yet fully addressed in our internal and external applications. Our goal was to enhance awareness of web accessibility and integrate accessibility standards across Tyson's digital platforms.

Outcome

This project was both a learning experience and an exercise in UX research. The immediate output was an Accessibility Guideline document for Tyson internal applications. Beyond establishing these guidelines, we also incorporated those accessibility standards into our design system, making sure standards are met at an early stage. Additionally, we extended our impact by offering accessibility audit services for critical applications such as our company’s official website.


The Process

The Learning Process

A main learning resource for me is the “Practical Web Accessibility” course by Chimmy Kalu on LinkedIn Learning. It broadened my understanding of designing inclusive applications that cater to a diverse spectrum of disabilities - including visual, hearing, neurological, and mobility impairments. This experience equipped me with an essential toolkit for conducting accessibility audits, leveraging resources such as the Web Content Accessibility Guidelines (WCAG), and various Chrome and Figma plugins to automate standard checks like color contrast analysis.

Accessibility Guideline

The cornerstone of our initiative was the Accessibility Guideline, anchored by the POUR principles to ensure our designs were Perceivable, Operable, Understandable, and Robust. We also included key standards relevant to our applications such as layout, color contrasts, and visual cues.

Table of content of the Tyson Accessibility Guideline.

Accessibility in Design System

The accessibility guideline guided the integration of accessibility standards into our design system components. For instance, we reviewed our color system to ensure it met the WCAG-AA standards across all components; we also ensured every component's different states were clearly marked by at least two indicators, not relying solely on color.

Example of a design component update to meet accessibility standards.

Accessibility Audits Explained

Our accessibility audits primarily used automated tools such as Chrome accessibility plugins. Those tools can efficiently and accurately automate standard checks such as color contrast. This approach enabled us to prioritize key issues for correction.

However, certain aspects still required manual inspection, particularly contextual content. For example, we would manually assess the arrangement of buttons, keyboard navigations, and the overall visual hierarchy of pages.

Upon completing our evaluations, we compiled a comprehensive list of potential improvements, ranked by priority. We then produced an audit report outlining these findings. It’s up to the specific project teams to decide which problems to fix first, based on our recommendations.

Example of keyboard navigation before & after accessibility enhancement.

Example of button text before & after accessibility enhancement.


Reflections

Embracing Automation

Many aspects of accessibility can be automated, including those involving context, thanks to advancements in AI technology. This makes identifying accessibility issues both straightforward and efficient.

Integrate Accessibility Early on

It’s crucial to implement best practices early on. By aligning our design system with WCAG standards early, we ensure that applications built with our system are inherently more accessible, reducing the need for extensive modifications later on.