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.

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:

Select a Storytelling Method: STAR (Situation, Task, Action, Result) CAR (Context, Action, Result) SOAR (Situation, Obstacles, Action, Results) HERO's Journey

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."

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:

• Assistive Technology Resource Center (ATRC): An academic unit providing resources to improve the accessibility of both physical spaces and digital experiences on campus.
• IT Web Team: Responsible for building and maintaining many of CSU's websites, with ultimate responsibility for the accessibility of the sites they host.
• External Advertising Agency: Hired to develop the new branding for the university, including designing a stopgap site and the ground-up redesign of the main site (colostate.edu).

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.

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:

• Low Color Contrast: Assessing text and background color combinations to ensure readability for users with visual impairments.
• Improper Heading Structures: Organizing headings in a logical hierarchy to enhance navigability.
• Form Labeling Errors: Ensuring that all form elements are properly labeled for accessibility.
• Inconsistent ARIA Labels: Improving assistive technology interactions by standardizing ARIA labels across interactive elements.

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:

• Collaboration and Planning: Initiated by coordinating with the Assistive Technology Resource Center (ATRC), IT Web Team, and the external advertising agency to outline accessibility requirements and integrate them into the website redesign plan.
• Automated Testing: Utilized WAVE and Color Contrast Analyzer to conduct an initial assessment and compile a list of detected issues across the redesigned website.
• Manual Inspection: Conducted manual checks to identify issues that automated tools might miss, such as logical tab order, keyboard navigation efficiency, and proper ARIA labeling.
• Accessibility Interviews: Personally conducted interviews with on-campus disabled users to gather qualitative insights and understand their experiences and challenges when interacting with the website.
• Documentation: Recorded all findings in a comprehensive report, categorizing issues by severity and providing recommendations for remediation.
• Implementation: Collaborated with the development team to implement the necessary fixes and enhancements, ensuring that accessibility improvements were integrated into both technical and design aspects.
• Verification: Conducted follow-up tests to ensure that all issues were effectively resolved and compliance standards were met before the final deployment.

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.

• Low Color Contrast: The project faced significant challenges due to miscommunication regarding color contrast standards. The external advertising agency designed for WCAG AA contrast ratios, while the ATRC required WCAG AAA contrast ratios. The IT Web Team initially committed to AA but was open to collaborating on achieving AAA compliance. Additionally, there was a conflict between the agency's preference for rich, complex collaged imagery and the ATRC's preference for a very flat design to enhance accessibility.

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.

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:

• Reviewing HTML and CSS Code: Identified accessibility violations that could impede users with disabilities.
• Assessing Keyboard Accessibility: Evaluated navigation and interactive elements for keyboard operability to ensure users could navigate the site without a mouse.
• Consulting with Content Creators: Explored opportunities for implementing accessibility best practices in content creation and presentation.
• Addressing Compliance Discrepancies: Resolved misunderstandings between the external advertising agency and the internal IT Web Team regarding accessibility standards. The agency had designed brand identity colors meeting WCAG AA contrast ratios, while the development team required WCAG AAA contrast ratios. Consequently, branded colors were re-evaluated and adjusted to ensure WCAG AAA compliance.

Example Findings:

• Low Color Contrast: Miscommunication regarding contrast standards led to the use of colors that did not meet the required WCAG AAA standards, significantly affecting readability for users with visual impairments.
• Inconsistent ARIA Labels: Some interactive elements lacked proper ARIA labels, limiting accessibility for assistive technologies.
• Design Conflicts: The agency's preference for rich, complex collaged imagery conflicted with the ATRC's preference for a flat design, necessitating design adjustments to balance aesthetics with accessibility.

Example Recommendations

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

• Color Contrast Adjustments: Modify color schemes to ensure all text meets or exceeds WCAG 2.1 Level AAA contrast ratios. This involved re-evaluating branded colors and selecting alternatives that comply with the stricter standards required by the ATRC.
• Design Adjustments: Collaborate with the external advertising agency to balance rich, complex imagery with accessibility requirements by adopting a flatter design approach where necessary, ensuring that visual elements do not impede accessibility.
• ARIA Labels and Roles: Implement appropriate ARIA attributes to interactive elements to improve their accessibility and ensure compatibility with assistive technologies.

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.

• Compliance Achievement: Achieved WCAG 2.1 Level AA compliance across audited pages by February 2024, with ongoing efforts to meet WCAG AAA standards where feasible.
• Improved User Experience: Enhanced navigation and readability for users with disabilities, leading to a 15% increase in user engagement metrics among this demographic.
• Reduced Legal Risk: Mitigated potential legal risks associated with non-compliance to accessibility standards, ensuring adherence to Colorado's web accessibility law (HB21-1110).
• Positive Feedback: Received commendations from the CSU community and external accessibility advocacy groups for the improved inclusivity and accessibility of the website.

"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."

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.