Case Study

Ensuring Equal Access: Enhancing theEvent Details Page for a Seamless User Experience

Anju Elsa Philip | | 4 min read

Introduction

The International Initiative for Impact Evaluation (3ie) is an organization that helps public policy and development researchers and decision-makers around the world by providing services around impact evaluation in areas like health, education, and the environment. Their website is key for sharing the research and evidence generated in this area and engaging with the community of professionals. One key objective of the website is to  keep people updated about upcoming events.

Project scope

The focus of this project was to improve the accessibility of the Event Details Page on 3ie's website, which provides important information about upcoming events and previous events. We aimed to ensure that people with disabilities could easily access the event information and register without frustration. By adhering to WCAG 2.1 (Web Content Accessibility Guidelines), our goal was to make this page usable for everyone, regardless of their abilities.

Use case and problem statement description

Let's imagine the experience of a person with a disability trying to access the event details page before the intervention:

Meet Veena (an imaginary character):

  • Veena is a visually impaired user who relies on a screen reader to navigate the internet. She is interested in attending a 3ie event and visits the Event Details Page to find out more. However, as she navigates the page, she faces several barriers:
  • Missing Image Descriptions: There's a banner at the top of the page with event details, but because no alt text is provided, Veena's screen reader can't describe what the image is about. She is left wondering what the event banner contains.
  • Unlabeled Form Fields: Veena decides to register for the event but faces confusion as the form fields are unlabeled. She is unsure of where to input her name, email, or any other details required for registration. Her screen reader just announces "field" without specifying what kind of information is needed.
  • Poor Color Contrast: As she tries to read the text, she struggles with the low contrast between the text and the background. The text blends into the background, making it extremely difficult to read even with screen magnification.
  • The result is a frustrating and time-consuming experience. Veena is unable to get the information she needs, and the registration process feels impossible to complete. She is left feeling excluded from the event and ultimately abandons the attempt.
 

Challenges

Before we intervened, Veena, along with other users with disabilities, was unable to fully engage with the Event Details Page. There were several critical accessibility issues:

  • Image Descriptions (Alt Text): The images, such as the event banner,upcoming events and previous events image were not described for screen reader users, meaning vital context was lost.
  • Unlabeled Form Fields: The event registration form wasn't clear to users with disabilities, leaving them unsure about what information was required.
  • Poor Color Contrast: Text on the page was hard to read, especially for users with low vision or color blindness.

As a result, users like Veena couldn't access key event information, and the entire experience felt inaccessible.

 

Our Approach

Process Overview

To ensure that Veena, and others like her, could easily navigate the Event Details Page, we followed a multi-step process to address the accessibility issues:

  • Design Phase:
    • We started with a detailed audit of the Event Details Page, using accessibility tools like WAVE and Axe to identify barriers.
    • We found the specific issues that were impeding access to the page: missing alt text, unlabeled form fields, and poor color contrast.
  • Implementation Phase:
    • Alt Text for Images: We added descriptive alt text to every image. For example, the event banner now reads, "Event banner featuring keynote speaker Dr. Smith at the 3ie Conference on Global Health in New York, 2025."
    • Form Field Labeling: Each form field was properly labeled so that screen readers could tell Veena what each field required. For example, the screen reader now says, "Please enter your name" or "Enter your email address."
    • Color Contrast Adjustment: We updated the page's color scheme to ensure high contrast, making it much easier for Veena to read the text, even without a screen reader.
    • ARIA Tags: We implemented Accessible Rich Internet Applications (ARIA) tags on buttons and interactive elements, so dynamic content like event links or registration buttons are easily recognized and navigated by screen readers.
    • Testing and Validation: After the changes were implemented, we tested the Event Details Page using both automated accessibility tools and manual checks.

Result

Overall Project Outcome

With the new updates, Veena and others like her can now easily navigate the Event Details Page and register for events without any barriers. The changes were designed to enhance the experience for everyone, but especially for users with disabilities, ensuring that 3ie's events are accessible to all.

Solution Effectiveness and Efficiency

The improvements had a direct and immediate impact on the usability of the page:

  • Alt Text for Images: Veena's screen reader now reads out descriptions of all images, making it easy for her to understand what each visual element represents.
  • Form Labels: The registration process is now straightforward, as Veena can easily navigate through the form with the help of clear labels, making it much more user-friendly.
  • Color Contrast: The improved contrast makes the text much clearer and easier to read, ensuring that Veena no longer faces difficulties in reading even without a screen magnifier.

Success metrics

  • Usability Improvement: After the changes, users like Veena are able to fully access event information and register for events without frustration.
  • Accessibility Compliance: The Event Page now fully complies with WCAG 2.1 Level A and Level AA standards.

Lessons learned

Small Changes Make a Big Difference: Simple updates, like adding alt text and improving form labels, can significantly improve the user experience for people with disabilities.

Conclusion

Recap of project achievements:

  • Full compliance with WCAG 2.1 accessibility guidelines.
  • A much improved Event Details Page that is now accessible and user-friendly for people with disabilities.
  • A better experience for all users, especially those who rely on screen readers or have low vision.

Benefits to the client:

  • Wider Reach: 3ie's event information is now accessible to a larger, more diverse audience, including people with disabilities.
  • Increased Engagement: Users with disabilities can now easily access event details and register for events, leading to a more engaged audience.

 

 

Related Topics