Accessibility Evaluation – Taipei Medical University Hospital Website

This project involved evaluating the Taipei Medical University Hospital website for accessibility using WCAG 2.2 guidelines. The goal was to identify and address accessibility issues and provide actionable insights to create a more inclusive user experience. I also redesigned several pages to enhance accessibility for users, including patients and caregivers.

Duration

Role

2 weeks

Web Design

Type

Tools

Accessibility Researcher

WCAG 2.2, Figma

Challenges

How might we improve the Taipei Medical University Hospital website’s accessibility to ensure patients with disabilities can easily navigate and access healthcare services?

The Taipei Medical University Hospital website did not meet WCAG 2.2 Level AA standards, which made it difficult for people with disabilities to navigate the website, schedule appointments, or access medical information. Key issues included poor color contrast, missing alt text, non-functional keyboard navigation, and improper heading structure.

Results

View the full evaluation report here: TMUH Accessibility Evaluation Report

The redesign of the Taipei Medical University Hospital website improved accessibility, bringing the site closer to WCAG 2.2 Level AA compliance. Usability testing showed enhanced navigation for users with disabilities, particularly in areas like keyboard access and screen reader compatibility. Accessibility tools like WAVE reported higher scores and user feedback reflected greater satisfaction with the site’s ease of use and inclusivity.

Research

Our Goals: Evaluate the accessibility of the Taipei Medical University Hospital website based on WCAG 2.2 guidelines to identify barriers for users with disabilities and provide recommendations for an improved user experience.

Research Methods: I conducted a WCAG 2.2 audit using tools such as WAVE, ANDI, Apple Voiceover, Target Size, Font Identifier, and manual checks, focusing on key pages like the homepage, service (doctor appointment) page, and appointment confirmation page. I also referenced color-blindness tools, Colblindor, to assess the website’s color contrast issues and test compatibility with screen readers.

WCAG Version: WCAG 2.2

Conformance Target: Level AA

Website: Taipei Medical University Hospital 🔗 https://www.tmuh.org.tw/

Pages Included in the Evaluation:

Research

Design

Reflection

Key Findings:

  • Failed Contrast Ratios: Text and buttons did not meet the required 4.5:1 contrast ratio

  • Non-functional Keyboard Navigation: Many elements were inaccessible using only the keyboard

  • Lack of Alt Text: Images lacked alt text, making the site difficult for screen reader users

  • Improper Heading Structure: Many pages did not follow logical heading levels, confusing users who rely on assistive technologies

Design

After identifying the accessibility issues, I ideated on redesign solutions. Key areas of focus included improving fixing contrast ratios and ensuring proper use of headings. I also considered simplifying the user journey for first-time patients accessing appointment services. I developed wireframes for the homepage, service page, and appointment page, focusing on clearer navigation, accessible interactive elements, and improved color contrast.

Design Principles: I used universal design principles and WCAG 2.2 standards, ensuring that the redesigned pages prioritized accessibility without compromising the hospital’s branding or user experience for all users

Design Tools: Figma, along with accessibility evaluation tools like WAVE, ANDI, and Colblindor

Appointment Page

(1), (3) Increase color contrast, meeting WCAG 4.5:1 requirement

(2) Added alt-text for all images and headshots

(4) Added label to the number

(5) Spaced out the calendar boxed to make information less crowed

(6) Increased text size and line height to meet WCAG requirements and readability

(7) Removed flashing design from icon

Home Page

(1) Include instructions for the input search bar

(2) Fixed website error

(3) Increased the color contrast of the arrow button and the picture carousel

(4) Removed the “Learn More” button and directly linked the picture carousels to their corresponding page

(5), (8) Added alt text to all icons and pictures

(7) Fixed website grammar error

Reflection

Project Reflection:

This project reinforced my commitment to accessibility in healthcare, showing how small design changes can make a significant impact on users. It deepened my understanding of WCAG 2.2 and strengthened my ability to identify and address usability barriers. Moving forward, I aim to apply these insights to create more inclusive digital experiences across various industries.

Next Steps:

This project primarily focused on improving accessibility for existing users, such as patients and individuals with disabilities. Future iterations could expand to address the needs of first-time users, refining the website’s navigation, information structure, and overall user flow to ensure a seamless and intuitive experience for all visitors.