ABOUT WORK
Alaska Airlines accessibility study showing different vision impairments

Accessibility study on alaskaair.com

Sponsored project by Alaska Airlines

Executive Summary

key findings & recommendations

Alaska Airlines sought to improve website accessibility for users with low vision who navigate at 200% zoom. Our study with 6 participants identified critical barriers and provided actionable recommendations.

01

Layout Issues at 200% Zoom

Content distribution requires horizontal scrolling, violating WCAG guidelines. We recommend restructuring layouts to maintain readability at high zoom levels.

02

Information Overload

Dense pages overwhelm low-vision users, making content difficult to scan. We recommend simplifying pages by prioritizing critical information and using clear hierarchy.

03

Insufficient Color Contrast

UI elements with minimal contrast requirements affect readability. We recommend increasing contrast ratios beyond minimum standards for interactive elements.

04

Non-scalable Interactions

Help text on hover doesn't scale, becoming inaccessible at higher zoom levels. We recommend redesigning interaction patterns using alternative methods to display help text.

Project Overview
Alaska Airlines is a major American airline headquartered in the Seattle metropolitan area. Their website (alaskaair.com) is a major touchpoint between Alaska Airlines and its customers. Our goal for this study is to assess the accessibility of Alaskaair.com for the low-vision user group who typically navigate through the website at 200%. We planned and carried out our usability study to understand low-vision participants' experience navigating the website and made design recommendations based on the study result to help make Alaskaair.com more accessible.
Team
Nisha, Vincent, Yile, Peggy
Time Line
10 weeks
Project Sponsor
Alaska Airlines
Methodology
1

Research

Heuristic evaluation of key accessibility barriers

2

Preparation

Developed test kit for moderated sessions

3

Testing

6 interviews with low-vision participants

4

Analysis

Prioritized issues with severity ratings

Problem Discovery
Alaska Airlines is dedicated to making Alaskaair.com accessible to all people, regardless of their technology or ability. Their aim is to maximize the accessibility and usability of our website by meeting the W3C Web Content Accessibility Guidelines (WCAG) 2.0 with a focus on meeting compliance level AA.
Example of how low-vision users experience website navigation
Example of how our participants experience website navigation
WCAG 2.0 requirements for users with low-vision
  1. Requires a contrast ratio of 4.5:1 for standard text and 3:1 for large text.
  2. Provide text alternative for non-text content such as images and videos.
  3. Include audio descriptions for all audio elements.
  4. Ensure text can be resized up to 200% without requiring horizontal scrolling.

There are additional WCAG 2.0 requirements, our project focused on the four areas mentioned above due limited time availability.

Research Process
1. Heuristics evaluation
We started by conducting accessibility checks on Alaska Airlines website to identify accessibility failures for the 4 main WCAG 2.0 requirements. Each team member zoomed in to 200% on the website and identified various pain points. These pain points were categorized based on Jakob Nielson's 10 Heuristics. This preliminary study helped us to familiarize ourselves with the experience of low-vision users and identify accessibility barriers.
Heuristics analysis report showing accessibility issues
Heuristics analysis report
2. Target user group
To conduct a focused study our target group of users comprised of:
  1. Users over 18 years old
  2. Users with experience navigating the Alaska Airlines website
  3. Users equipped to meet remotely (due to COVID regulations)
  4. Users with low-vision conditions such as blurred vision, double vision and peripheral blocked vision
Example of blurred vision Example of double vision Example of peripheral blocked vision
Blurred vision
Double vision
Peripheral blocked vision
3. Key research questions
  1. What is the user experience like when searching for and booking a flight?
  2. What are the various user interactions users go through during the flight search process?
  3. How are users understanding and engaging with different UI elements on the website?
  4. How easy or difficult it is for users to search and book a flight?
  5. How can we improve their experience of navigating through alaskaair.com?
Study Methodology
In order to run this test, we prepared an accessibility test kit and conducted 2 pilot interview sessions followed by 6 formal interviews. Our participants followed the think-aloud protocol and completed predefined study tasks.
Accessibility study kit

1. Participant Screener: Used to recruit participants and identify any accommodations needed

2. Moderated Remote Testing Script: Due to COVID-19, testing was conducted remotely with two primary tasks:

Illustration for Task 1
Task 1: Booking a flight
You are planning to meet your friend who is currently in New York. You visit the Alaska Airlines website as a guest to book your flight from Seattle to New York on [DateD1] and return on [DateD2]
Illustration for Task 2
Task 2: Checking the flight status
Your friend is returning to New York from Seattle tomorrow, which is [test date + 1] with the earliest flight, and you want to check the status of his flight. His flight number is [Alaska ###].

3. Note-Taking sheet: Used to record observations and participant quotes

4. Post-Test Questionnaire: Used a Likert scale to gather subjective feedback

Severity rating scale
We used the following scale to prioritize accessibility issues:
  • Usability Catastrophe (Rating = 5)
    User will not be able to or will not want to use a particular part of a product.
  • Major Problems (Rating = 4)
    User will probably use or attempt to use the product, but will be severely limited in their ability to do so.
  • Moderate Problems (Rating = 3)
    User will be able to use the product in most cases, but will have to undertake some moderate effort in getting around the problem.
  • Minor Problems (Rating = 2)
    The problem occurs only intermittently, can be circumvented easily, or is dependent on a standard that is outside the product's boundaries.
  • Cosmetic Problems (Rating = 1)
    Need not be fixed unless extra time is available on the project.
Key Findings & Recommendations
After analyzing the data from our 6 interviews through affinity diagramming, we identified 12 areas of improvement, with 4 critical accessibility barriers:
1

Layout Issues at 200% Zoom

Critical information was distributed far apart, requiring horizontal scrolling at 200% zoom. This violates WCAG 2.0 guidelines and significantly impacted usability.

100%
Layout example at different zoom levels
Recommendation: Restructure layouts to use responsive design principles that maintain readability at high zoom levels without requiring horizontal scrolling.
2

Information Overload

Dense pages with excessive information overwhelmed participants, making it difficult to scan and comprehend content.

Too much information crammed together makes it hard to find what's important.
Recommendation: Simplify pages by prioritizing critical information, using progressive disclosure techniques, and providing clear information hierarchy.
3

Insufficient Color Contrast

Several UI elements barely met minimum contrast requirements, affecting readability for low-vision users.

This text has poor contrast with the background.
Recommendation: Increase contrast ratios beyond minimum standards, particularly for interactive elements and important text.
4

Non-scalable Interactions

Help text on hover and other interaction patterns did not scale appropriately at higher zoom levels.

Hover over me for help
This help text may not be visible at high zoom levels
Recommendation: Redesign interaction patterns to ensure all information remains accessible at higher zoom levels, using alternative methods to display help text.
Interactive summary of accessibility issues
Examples of accessibility barriers found on the Alaska Airlines website
Examples of accessibility barriers
Reflections & Learnings
01

Participant Recruitment

People icon

Click to reveal insights

What We Learned

Being specific on the recruitment screener and narrowing down the participant group reduced variables and led to more consistent findings.

"The right participants give you the right insights."

Key Takeaway: Define your participant criteria carefully to get meaningful results.
02

Technology Considerations

Technology icon

Click to reveal insights

What We Learned

Conducting tech checks before testing sessions and being ready to troubleshoot technical problems was crucial for smooth testing.

"Preparation prevents poor performance."

Key Takeaway: Understand the assistive tools your participants use before testing.
03

Interaction with Participants

Communication icon

Click to reveal insights

What We Learned

Being patient, supportive, and allocating longer time for each task was essential when working with participants with special needs.

"Empathy creates connection."

Key Takeaway: Mindful terminology and patience lead to more insightful feedback.
04

Impact

Impact icon

Click to reveal insights

What We Learned

Small design changes can significantly improve accessibility for users with low vision without major architectural changes.

"Accessibility benefits everyone."

Key Takeaway: By addressing our four key barriers, websites become substantially more inclusive.

Our Journey to Better Accessibility

1

Discovery

Identified accessibility gaps through heuristic evaluation

2

Research

Conducted studies with 6 participants with low vision

3

Analysis

Identified 4 key accessibility barriers

4

Solutions

Developed actionable recommendations

Our Biggest Takeaway

When we design for accessibility, we create better experiences for everyone.

Learn more about accessibility
Resources & Downloads
E-commerce UI Patterns Analysis

E-commerce UI Patterns Analysis

Comprehensive breakdown of UI patterns from Instagram, Aliexpress, Shein, and Sephora.

↓ Download PDF (2.4 MB)
E-commerce UI Patterns Analysis

E-commerce UI Patterns Analysis

Comprehensive breakdown of UI patterns from Instagram, Aliexpress, Shein, and Sephora.

↓ Download PDF (2.4 MB)
E-commerce UI Patterns Analysis

E-commerce UI Patterns Analysis

Comprehensive breakdown of UI patterns from Instagram, Aliexpress, Shein, and Sephora.

↓ Download PDF (2.4 MB)
Resources & Downloads
E-commerce UI Patterns Analysis

E-commerce UI Patterns Analysis

Comprehensive breakdown of UI patterns from Instagram, Aliexpress, Shein, and Sephora.

↓ Download PDF (2.4 MB)