Anthony Carton

Case Study

Championing Accessibility and Collaboration in the Redesign of a University's Enterprise Website

In my role as Senior UX Research and Web Developer Consultant within Colorado State University's Marketing and Communications department, I oversaw the design and implementation of the university's new enterprise website with a strong emphasis on accessibility. In response to Colorado's web accessibility law (HB21-1110), which mandated compliance by July 1, 2024, my objective was to ensure that CSU's official website adheres to the Web Content Accessibility Guidelines (WCAG) 2.1 standards. This initiative aimed to provide an inclusive and seamless user experience for all students, faculty, and visitors, including those with disabilities.

WAVE interface
WAVE (Web Accessibility Evaluation Tool) is an automated tool that provides visual feedback about the accessibility of web content by injecting icons and indicators into the page. I utilized WAVE to detect issues such as missing alternative text for images, improper heading structures, and form labeling errors.

Summary

Storytelling is important for UX Research, and different storytelling structures can help us convey the nuances and outcomes of a project in different ways. The STAR structure (Situation, Task, Action, Result) is one of the most common structures used in UX, but feel free to select from the dropdown if you prefer a different structure:

Project Background

Colorado State University's website serves as a critical platform for disseminating information, facilitating admissions, and providing resources to a diverse audience. With an increasing emphasis on digital accessibility and compliance with legal standards like the Americans with Disabilities Act (ADA) and Colorado's HB21-1110 law, it was imperative to evaluate and enhance the website's accessibility features.

The audit aimed to identify and rectify accessibility barriers that could impede users with disabilities from effectively interacting with the website. This involved assessing elements such as navigation, readability, and interactive components to ensure they meet or exceed WCAG 2.1 Level AA standards.

"Accessibility isn't just about compliance; it's about dignity. For someone with visual disabilities, a well-designed website can be the difference between independence and exclusion."
Quote from campus community member

Collaboration with Stakeholders

My role was pivotal in facilitating effective collaboration among key stakeholders to ensure the new website met all accessibility requirements. The primary collaborators included:

I ensured that the ATRC was actively involved and that their recommendations were thoroughly acknowledged. By working closely with the senior developer from the IT Web Team, I implemented a dual-review system for each prototype to ensure high accessibility standards. This system involved having each prototype reviewed by both myself and the senior developer, providing multiple perspectives to identify and rectify accessibility issues effectively. Additionally, I coordinated with the external advertising agency to incorporate accessibility requirements into their brand guidelines and future website proposals and prototypes. This collaborative approach ensured that accessibility was seamlessly integrated into the website's design and functionality from the outset.

Participatory Design: Engaging Users with Disabilities in Shaping the Website Redesign

A key element of the CSU website redesign was the integration of participatory design methods to ensure that the end product was truly inclusive. Rather than relying solely on automated testing tools, I engaged users with disabilities in the design process, allowing them to actively contribute to the development of the website.

User Interviews:

Co-Creation

Impact

Tools Utilized

To support the accessibility enhancements, the project leveraged tools such as WAVE (Web Accessibility Evaluation Tool) and Color Contrast Analyzer. These tools provided essential insights into areas needing improvement, including:

Importance of Setting SMART Goals in Accessibility Audits

Setting SMART (Specific, Measurable, Achievable, Relevant, Time-bound) goals is crucial for any UX project, especially when tackling complex issues like web accessibility. By defining clear and actionable objectives, we can ensure that our efforts not only meet compliance standards but also deliver tangible improvements to the user experience. For this accessibility audit at Colorado State University, SMART goals provided a structured approach to prioritize tasks, measure progress, and achieve WCAG 2.1 Level AA compliance within the deadline mandated by Colorado's HB21-1110 law. These goals guided our decision-making process, helping us stay focused on outcomes that would have the greatest impact on inclusivity and usability for all users, including those with disabilities.

Example SMART goals from this project:

  1. Goal: Achieve WCAG 2.1 Level AA Compliance for Key Web Pages by February 2024.
    • Specific: Evaluate and enhance accessibility features on 15 high-traffic pages, including the homepage and student resources sections.
    • Measurable: Ensure that all evaluated pages meet or exceed WCAG 2.1 Level AA standards, with no more than 2 minor accessibility issues remaining per page.
    • Achievable: Leverage automated tools (WAVE, Color Contrast Analyzer) and manual testing, followed by collaboration with the development team to implement necessary changes.
    • Relevant: Ensuring compliance is critical for adhering to Colorado's HB21-1110 law and providing an inclusive experience for users with disabilities.
    • Time-bound: Complete the accessibility updates by February 28, 2024, in anticipation of the July 2024 compliance deadline.
  2. Goal: Increase User Engagement Among Users with Disabilities by 10% by June 2024.
    • Specific: Improve navigation, readability, and interactive elements on the CSU website, focusing on accessibility features like alt text, ARIA labels, and keyboard navigation.
    • Measurable: Track and analyze engagement metrics, such as time on site, page views, and conversion rates, specifically for users with disabilities.
    • Achievable: Utilize findings from the accessibility audit to prioritize fixes that directly enhance the user experience for individuals with disabilities.
    • Relevant: Enhancing engagement for users with disabilities aligns with CSU’s commitment to diversity and inclusion, as well as legal requirements.
    • Time-bound: Achieve a 10% increase in engagement metrics by June 30, 2024, through the continuous implementation and monitoring of accessibility improvements.

Audit Process

The audit followed a structured approach:

Audit Process Diagram

Step 1: Initial Evaluation

I began the audit by overseeing the evaluation of the redesigned website, ensuring that all accessibility requirements were addressed. Utilizing WAVE, I identified accessibility errors and alerts, and employed the Color Contrast Analyzer to assess text and background color combinations.

Color Contrast Analyzer was employed to check the color contrast ratios between text and background elements, ensuring that content is easily readable for users with visual impairments, including color blindness and low vision.

Color Contrast Tool Interface with failing score
Branded colors did not initially pass contrast standards, IT requires AAA passing score.

Step 2: In-Depth Analysis and Findings

Following the initial evaluation, a detailed analysis was conducted to uncover the root causes of the identified issues and their impact on user experience. This phase involved:

Example Findings:

Split Screen capture of Color Contrast Analyzer tool interface
Color Contrast Analyzer was employed to check the color contrast ratios between text and background elements, ensuring that content is easily readable for users with visual impairments, including color blindness and low vision.

Example Recommendations

Based on the detailed analysis, actionable recommendations were developed to address identified issues. These are 3 examples of recommendations:

Results and Impact

The accessibility audit led to significant enhancements in CSU's website accessibility. Users reported a more intuitive and accessible browsing experience. Screen reader users particularly noted the improved content descriptions and navigation structure, which made information retrieval more efficient. University administrators and the IT department recognized the audit's success, leading to the adoption of regular accessibility evaluations as part of the website maintenance protocol.

"Upholding our commitment to inclusivity and ensuring that everyone has access to our resources is as crucial as ensuring legal compliance. It's the right thing to do and it reflects our core values as an organization."
Member of executive leadership

Conclusion

The accessibility audit represented a major advancement in creating a more inclusive digital environment at Colorado State University. By rigorously evaluating and enhancing the website's accessibility features using tools like WAVE and the Color Contrast Analyzer, we made significant strides toward meeting compliance standards and improving the user experience for individuals with disabilities. This initiative not only addressed critical accessibility barriers but also reinforced CSU’s commitment to diversity and inclusion.

By addressing key accessibility barriers and aligning with WCAG 2.1 Level AA standards, the project significantly improved the usability of the site for all users, particularly those with disabilities. The enhancements facilitated compliance with Colorado's web accessibility law and underscored CSU's commitment to creating a more inclusive online environment. The success of this project has set a strong precedent for future accessibility initiatives and demonstrated the importance of continuous improvement in digital accessibility.