Redesigning the Free Library of Philadelphia Homepage

For this project, I redesigned the homepage of the Free Library of Philadelphia, focusing on web accessibility. This effort highlights the importance of inclusivity on public websites that serve diverse communities, ensuring access for individuals with disabilities.

Goals of the Project

• Identify and address accessibility issues using tools such as Lighthouse, WAVE, and Pa11y.
• Improve usability for individuals with visual, auditory, motor, or cognitive impairments.
• Create an intuitive, minimalist design that reduces cognitive load and enhances navigation.

Tools and Methods

Accessibility audits were conducted using:

• WAVE: For detecting missing form labels, alt text, and heading structure issues.
• Lighthouse: To identify touch target sizing problems, navigation hierarchy issues, and accessibility scores.
• Pa11y: For technical WCAG violations like missing iframe titles and unlabeled form fields.

Redesign Highlights

• Simplified navigation menu with three main links to reduce decision fatigue.
• Prominent search bar with clear labeling and high contrast for ease of use.
• Organized content into a 2x2 grid layout for logical grouping and scannability.
• Accessible color contrast with buttons and hover effects to ensure visual feedback.
• Optimized for screen readers with proper semantic HTML, ARIA roles, and alt text for images.

Accessibility Audit Analysis

Pa11y Results:

• Iframe Without Title: Iframes lacked a non-empty title attribute, confusing screen reader users.
• Form Without Submit Button: Forms did not include submit buttons, preventing keyboard-only users from submitting them.
• Text Inputs Without Accessible Labels: Input fields lacked proper labels, making it hard for screen readers to interpret their purpose.
• Unlabeled Form Fields: Form fields were missing accessible labels like aria-label or title attributes.

Pa11y Report:

• 6 Errors:
  • 5 Missing Form Labels
  • 1 Broken Skip Link
• 10 Alerts:
  • 2 Skipped Heading Levels
  • 1 Redundant Link
  • 6 Redundant Title Texts
• 39 Features:
  • 9 Null or Empty Alt Texts

WAVE Report:

• Tables and Lists: List items were not contained within proper ul or ol tags, causing screen reader issues.
• Touch Targets: Buttons and links lacked sufficient spacing for motor-impaired users.
• Navigation: Heading elements were not in sequential order.
• Redundant Alt Text: Images contained repetitive or meaningless alt attributes.

Lighthouse Report:

Redesign Mockup

Below is an interactive view of the redesigned homepage for the Free Library of Philadelphia:

Evaluation Plan

User testing involved 10-15 participants, including users of assistive technologies such as screen readers and keyboard-only navigation. Key metrics included task completion rates, duration, and user feedback to identify pain points and opportunities for improvement.

Accessibility testing ensured compliance with WCAG 2.1 standards, using both automated tools and manual techniques like keyboard navigation and screen reader compatibility.

Impact

The redesign significantly improved accessibility and usability, making the Free Library of Philadelphia homepage a more inclusive resource for all users.