Case Study

Service Request Origination for 3ieimpact Website

Nija S J | | 3 min read

Introduction

  1. Brief overview of the client: The client, 3ieimpact, is a public-sector organization focused on providing a digital knowledge management platform for researchers and policymakers worldwide. The platform aimed to streamline research and evidence-sharing mechanisms.
  2. Project scope: The objective was to improve the accessibility of the Subscribe Form (https://www.3ieimpact.org/Join-3ie-mailing-list) to ensure compliance with WCAG 2.2 guidelines and enhance usability for all users, including those with disabilities.
  3. Use Case and Problem Statement Description: The existing subscription form faced multiple accessibility barriers, including:
  • Missing or Improper Labels: Screen readers could not effectively announce form fields, making it difficult for visually impaired users to understand what information to enter.
  • Keyboard Navigation Issues: Users relying on keyboard navigation encountered difficulties in accessing and completing the form due to improper focus management, meaning they couldn't easily move between fields using the Tab key.
  • Low Contrast Elements: Poor contrast between text and background made it challenging for users with low vision to read and interact with the form.
  • Lack of Clear Instructions for Assistive Technologies: The form did not include ARIA (Accessible Rich Internet Applications) attributes, which help assistive technologies like screen readers interpret web elements correctly. Without ARIA, users relying on screen readers heard incomplete or confusing descriptions of form fields, making interactions difficult.
  • Error Identification and Assistance: Users who made mistakes while filling out the form were not provided with clear error messages, leading to frustration and incomplete submissions.

The goal was to optimize the form for better efficiency, inclusivity, and compliance with accessibility standards, ensuring a seamless experience for all users, including those with disabilities.

 

Challenges

  1. Usability Issues Impacting Subscription Rates: The form had navigation and readability problems, leading to user frustration and abandonment of the subscription process. Users struggled to locate fields due to poor structuring, increasing the likelihood of incomplete submissions and reducing the number of successful sign-ups.
  2. Keyboard Navigation & Focus Management: Users relying solely on keyboards found it challenging to efficiently move between form fields. For example, pressing the Tab key did not follow a logical order, forcing users to navigate unpredictably or getting stuck in certain sections.
  3. Screen Reader Compatibility Issues: The form lacked proper labeling and semantic HTML, making it difficult for screen readers like JAWS or NVDA to announce field names and instructions correctly. This resulted in users not knowing what information to enter, leading to failed or inaccurate submissions.
  4. Color Contrast and Visual Clarity: Low contrast between text and background made it difficult for users with visual impairments to read instructions or form fields. For instance, light gray text on a white background created readability issues for users with low vision.
  5. Error Identification & Handling: Form validation messages were not properly announced by screen readers, meaning users who made mistakes did not receive clear guidance on how to fix them. This resulted in confusion and incomplete submissions, further impacting subscription rates.

Our Approach

Our approach to addressing the challenges included the following steps.

  1. Conducted an in-depth accessibility audit of the Subscribe Form against WCAG 2.2 AA standards.
  2. Improved form structure with semantic HTML and ARIA attributes to enhance screen reader compatibility.
  3. Implemented proper focus indicators and keyboard navigation improvements for a seamless user experience.
  4. Enhanced contrast ratios to meet accessibility standards and improve text readability.
  5. Optimized error messaging by ensuring they are perceivable, understandable, and assistive technology-friendly.
  6. Conducted usability testing with accessibility tools and assistive technologies to validate improvements.

Result

  1. Enhanced Usability: Improved navigation and readability increased form completion rates.
  2. Better Screen Reader Compatibility: Proper ARIA labeling and semantic structuring made the form fully accessible.
  3. Improved Error Handling: Clear error identification helped users understand and correct mistakes efficiently.
  4. Full WCAG 2.2 AA Compliance: The form met all accessibility requirements, making it more inclusive.
  5. Increased User Engagement: Enhanced accessibility led to an increase in successful form submissions.

The accessibility improvements made to the 3ieimpact Subscribe Form significantly enhanced user experience and inclusivity. By addressing WCAG 2.2 compliance issues, we ensured that the form is now accessible to a broader audience, promoting engagement and efficiency in the subscription process. This project successfully met the client's objectives, reinforcing their commitment to digital accessibility and inclusivity.

Related Topics