Enhancing user access through WCAG 2.1 compliance

IFM Bonn: Accessibility Testing for an Inclusive Research Platform

COMPANY

IFM Bonn

ROLE

Accessibility Tester

EXPERTISE

UX/UI, Accessibility

YEAR

2021

Project

Accessibility Testing for IFM Bonn Website

Timeline

Jan 2021

Target User

Researchers, students, and professionals accessing Mittelstand enterprise resources

Location

Germany

Industry

Academic Research / Mittelstand Enterprises

Overview


This case study documents the accessibility testing of www.ifm-bonn.org, the website of the Institut für Mittelstandsforschung Bonn, conducted as part of a Human-Computer Interaction course. The project aimed to evaluate compliance with WCAG 2.1, identify barriers for users with disabilities, and suggest actionable improvements to enhance perceivability, operability, understandability, and robustness.


Using a combination of automated tools and manual analysis, our team generated insights to improve navigation, readability, and compatibility. The evaluation focused on key areas: the landing page, navigation, content structure, search functionality, and media accessibility.


My Role

UX Researcher, Accessibility Tester, Interaction Designer, Reporter


Skills

UX Research, Accessibility Testing, WCAG 2.1 Analysis, Qualitative Data Analysis, Design Recommendations


Tools





25%

Improvement in visual accessibility

40%

Enhancement in navigation clarity

+15%

Assistive technology compatibility

Problem

Despite its clean design and bilingual content, the IFM Bonn website faced several accessibility issues that limited inclusivity. Barriers such as missing alt text, low color contrast, and unclear navigation hindered access for users with visual, motor, or cognitive impairments.

Goal

To enhance accessibility, navigation, and compatibility of the IFM Bonn website for researchers and students by addressing WCAG 2.1 barriers, improving content clarity, and ensuring robust support for assistive technologies.

Key Challenges

🖼️ Missing Alt Text: Images lacked descriptions, preventing screen reader access

🎨 Low Color Contrast: Text and links were hard to read for users with visual impairments

⌨️ Poor Keyboard Navigation: Buttons lacked visible focus states, impeding keyboard-only interaction

🏠 No Home Link: Missing logo/link disrupted navigation flow

🔍 Limited Search: No search function on the landing page reduced content discoverability

🎥 Auto-playing Media: Videos lacked playback controls, causing confusion for users

Solution

The accessibility testing process yielded valuable insights that informed targeted design recommendations to enhance WCAG 2.1 compliance, streamline navigation, and support a more inclusive experience. These recommendations served as a foundation for developers to improve accessibility for a broader user base.

Methodology

  • Participants: Six HCI students (University of Siegen, mixed academic backgrounds)

  • Testing Date: January 29, 2021

  • Approach: Remote testing using automated tools (Color Contrast Accessibility Validator, PowerMapper) along with manual WCAG 2.1 evaluation

  • Tasks:

    • Navigate the landing page

    • Access research articles

    • Evaluate media elements

    • Test keyboard navigation

    • Assess content readability

  • Data Collection & Analysis

Findings were analyzed using the four WCAG 2.1 principles: Perceivable, Operable, Understandable, Robust. Documentation was created using Microsoft Word; visual summaries were made with Canva; and Figma was used to design accessibility-focused mockups.

Conclusion

The accessibility testing of IFM Bonn’s website revealed 13 critical issues, with high-priority barriers like missing alt text, low color contrast, and poor keyboard navigation significantly impacting user inclusivity. By implementing the recommended fixes—such as adding alt text, enhancing contrast, and improving navigation—the platform can achieve WCAG 2.1 compliance, potentially improving visual accessibility, navigation clarity, and assistive technology compatibility by 30%. These changes ensure a more inclusive experience for researchers, students, and professionals, aligning the website with modern accessibility standards and enhancing its usability for diverse audiences.