PDF Accessibility for Global Pharma

From popup fix to accessibility standard, adopted across 20+ brands.

Role: Senior UX Designer Scope: Interaction redesign, accessibility strategy, scalable component architecture, and cross-platform usability improvements Team: Product Owners, Developers, Accessibility stakeholders, Brand and Business teams across drugs and vaccines divisions Impact: Reduced interaction steps by 50% (6 to 3), achieved WCAG 2.0 AAA accessibility compliance, and created a scalable document access pattern for global HCP platforms

The business ask was simple: remove a popup. What it uncovered was a platform-wide accessibility gap affecting healthcare professionals across 2 portals, 20+ product brands, and multiple countries.

I reframed the scope, drove the accessibility strategy, and aligned 35+ stakeholders across Product, Engineering, Brand, and Business to ship a solution that became a reusable pattern across the entire HCP platform.

The Product List Page is a critical hub for healthcare professionals (HCPs) to access essential drug and vaccine-related information across this global pharmaceutical company’s ecosystem. The HCP platform is divided into 2 key portals: one focused on Drugs and the other on Vaccines. Each portal features 15 to 20+ product brands, each with its own individual website. These portals support distinct user journeys and provide access to downloadable resources such as Prescribing Information, Medical Guides, and product-specific usage information.

Remove the existing popup mechanism used to display multiple PDFs for a few drug products. The request was part of a broader initiative to reduce popups across the platform. However, no specific usability issue was initially cited.

The HCP platform spans two major divisions: Drugs and Vaccines, each with its own portal. The PDF popups appeared only in the Drugs portal for three products — two dual-branded (with different document sets) and one with bilingual PDFs. Max PDF count per product: 6.​​

Cumbersome Flow

Accessing a PDF took multiple steps: product → link → popup → PDF → new tab → download → back → close → repeat.

Poor Accessibility

Screen readers couldn’t distinguish between identical PDF link names across products.

Visual Redundancy

Product info ( generic name, dosing) was unnecessarily repeated in the popup.

Low Visual Clarity

PDF links were underlined black text hard to identify as links.

Limited Scalability

Popup wasn’t future-ready if PDF count grew.

Mobile Issues

Popups obstructed navigation, especially on smaller screens.

I evaluated 9 competitor healthcare professional platforms to understand how they present multiple PDF links to professionals. My key focus areas were:

Layout & Structure – Inline links, dropdowns, tabs, or grouped formats?

Labeling & Clarity – Are the document names meaningful?

Ease of Access – How many steps to reach a PDF?

Mobile & Accessibility – Is the solution mobile-friendly?

Based on the findings, I brainstormed and tested multiple interaction models:

Inline Links (Vertical & Horizontal)

Tab Interface

Dropdown

All options were wireframed in FigJam and reviewed internally. We shortlisted Inline and Dropdown for high-fidelity design.

To compare layout directions systematically, I summarized the pros, cons, and ideal use cases for each option in this table:

Below are lo-fi wireframe iterations of the shortlisted options showing different layouts and grouping strategies tested in FigJam:

We shortlisted Inline (Vertical & Horizontal) and Dropdown for high-fidelity design.

Built 3 Variants:

Inline Vertical

Inline Horizontal

Dropdown

During a team review, a critical accessibility issue was flagged on the product list main page: screen readers couldn’t distinguish identically named links such as “Prescribing Information” across different products.​

To address the accessibility issue where screen readers couldn’t distinguish identically named links across products, I explored two potential solutions:

Hidden Assistive Text (Presented) A visually hidden span with the product name, announced only by screen readers. I shared this idea with developers using a mockup and sample HTML code to illustrate the logic.

Descriptive Link Names (Eliminated) E.g., “Prescribing Information – Hepatanix” (Considered but rejected due to UI clutter and excessive text)

3 rounds of structured walkthroughs before a single line of code was written.

Internal design team (3 people) to eliminate the weaker accessibility approach early. Focused stakeholder review (8 to 9 people) to validate direction. Larger cross-functional session with 35+ participants across Development, Product, Brand, and Business.

In that final session developers surfaced an ARIA Label solution already partially in the codebase. I assessed the tradeoff and led the group to align on the ARIA approach, same accessibility outcome, faster implementation, better engineering fit. That call avoided weeks of rework.

To ensure consistency, scalability, and faster dev handoff, we built the dropdown using our existing design system components. This approach aligned with our team’s commitment to reusability and accessibility.​

Beside is a snapshot of the component library where the dropdown pattern is defined:

Interaction Pattern: Dropdown component replaced the popup.

Accessibility Upgrade: All PDF links use ARIA labels — improving screen reader clarity and compliance with WCAG 2.0 AAA standards.

Visual Improvements:-

PDF links color updated from black to primary (following brand’s link color standard)

Desktop, tab & mobile states (default, hover, click) defined

50% reduction in interaction steps, from 6 to 3 WCAG 2.0 AAA compliance for screen reader navigation Dropdown pattern integrated into the enterprise design system, adopted as the platform standard for document access going forward