UX/UI · Accessibility · WCAG 2.1 AA
MAKING TURKISH AIRLINES ACCESSIBLE FOR EVERYONE
A comprehensive WCAG 2.1 AA audit and redesign of the Turkish Airlines digital booking experience — identifying critical accessibility failures and delivering actionable, hirer-ready design solutions for a platform used by millions of passengers worldwide.
Client:
Turkish Airlines
Role:
UX Consultant
Duration:
2016 – ongoing
Platform:
Web · iOS · Android
01 - Context
ONE OF THE WORLD'S LARGEST AIRLINES, WITH AN ACCESSIBILITY GAP
Turkish Airlines serves over 340 destinations across 129 countries, with millions of passengers booking digitally every month. As a long-term UX consultant, I was brought in to evaluate and improve the quality of digital touchpoints - from the web booking flow to native iOS and Android apps.
During a routine UX review, I identified a pattern that went deeper than usability: the platform had significant WCAG 2.1 AA compliance failures across core booking flows. For an airline operating across the EU - where accessibility regulations for public digital services are increasingly enforced - this was both a user experience problem and a legal risk.
"15% of the world's population lives with some form of disability. For an airline serving 340 destinations, that's not an edge case - that's millions of passengers who couldn't fully use the product."
0+
0+
Destinations Worldwide
0M+
0M+
Monthly Digital Users
0
0
Critical WCAG failures found
02 - Key Challenges
What was failing - and for whom
The audit focused on the three most-used flows: flight search and selection, passenger details entry, and seat selection. These are the steps every passenger must complete - meaning accessibility failures here affect the broadest possible audience.
I evaluated each screen against WCAG 2.1 criteria across all four principles: Perceivable, Operable, Understandable, and Robust (POUR). Issues were prioritised by severity - Critical (blocks access entirely), Major (creates significant friction), and Minor (best practice improvements).
WCAG Criterion
Issue
Affects
Severity
1.4.3 Contrast (AA)
Body text on light grey backgrounds fails 4.5:1 ratio — as low as 2.8:1 in some fields
Low vision users
Critical
1.4.11 Non-text Contrast
Form field borders invisible against white background — no visual affordance for inputs
Low vision, cognitive
Critical
2.4.7 Focus Visible
Keyboard focus indicator removed via CSS on interactive elements including CTAs
Keyboard users, motor
Critical
1.3.1 Info & Relationships
Form labels not programmatically associated with inputs — screen readers read field blind
Screen reader users
Critical
3.3.1 Error Identification
Validation errors shown in red only — no icon or text description, relying on colour alone
Colour blind users
Major
2.5.3 Label in Name
Button accessible names don't match visible labels, breaking voice control navigation
Voice control users
Major
1.4.4 Resize Text
Text set in px breaks layout at 200% zoom — critical booking info becomes unreadable
Low vision users
Major
2.4.4 Link Purpose
Multiple "Read more" and "Select" links with identical accessible names on the same page
Screen reader users
Minor
03 - Process
From audit to actionable design
01
Heuristic & automated scan
Used Axe DevTools and WAVE to run an automated baseline scan across 12 key screens, capturing low-hanging failures. Automated tools catch ~30% of WCAG issues - the rest require manual evaluation and user judgment.
02
Manual keyboard & screen reader testing
Navigated the full booking flow using keyboard only (Tab, Enter, Arrow keys) and with VoiceOver on iOS and NVDA on Windows. Documented every point where the experience broke or became confusing without a mouse or vision.
03
Contrast & colour analysis
Checked every text/background combination against WCAG 1.4.3 (4.5:1 for body text, 3:1 for large text) and 1.4.11 (3:1 for UI components). Documented exact hex values and contrast ratios for each failure.
04
Prioritised findings report
Produced a structured findings report with each issue mapped to its WCAG criterion, severity, affected user group, and a clear remediation recommendation with visual examples - designed to be handed directly to developers.
05
Redesigned UI components in Figma
Delivered annotated Figma screens showing compliant versions of the most critical components: form fields, CTAs, error states, focus indicators, and the seat map. Each component included accessibility annotations for dev handoff.
04 - Key Findings
BEFORE & AFTER — BOOKING FORM
BEFORE & AFTER — BOOKING FORMA
The passenger details form was the single most problematic screen - 8 of the 23 critical failures appeared here. Below is a simplified mock-up of the key changes made to bring the form to WCAG 2.1 AA compliance.
CRITICAL ISSUES RESOLVED
1.4.3
Text contrast lifted from 2.8:1 → 7.2:1
Placeholder and label text was lightened to reduce visual noise - but crossed below the WCAG 4.5:1 minimum. Updated to #141410 on white, achieving AAA-level contrast without changing the brand palette.
Fixed
2.4.7
Focus indicators restored across all interactive elements
A single CSS rule (outline: none) had silently removed all keyboard focus visibility sitewide. Replaced with a 3px solid focus ring in the brand colour - visible, consistent, and non-intrusive.
Fixed
3.3.1
Error states now communicate through text + icon, not colour alone
Error messages relied entirely on red colour to signal failure. Added a warning icon (⚠) and descriptive text explaining what went wrong and how to fix it - meeting both 3.3.1 and 3.3.3.
Fixed
1.3.1
Form labels programmatically associated with inputs
Labels were visually positioned near inputs but had no for/id relationship - screen readers announced inputs as unlabelled. Added proper label associations and ARIA descriptions for all complex fields.
Fixed
05 — Real Screen Analysis
The current state — progress made, gaps remaining
The screenshot below shows the passenger information form after the first round of improvements were implemented by the development team. Several critical issues from the initial audit were addressed - but a detailed review reveals that accessibility work is rarely finished in one pass. There are still meaningful issues worth resolving.
What improved
Error state uses icon + text, not colour alone
The Surname field error now shows a ⚠ triangle icon alongside red text - addressing the original 3.3.1 failure. Colour-blind users can identify the error without relying on red alone.
Improved
Info alert uses icon + descriptive text
The blue info banner at the top combines an ℹ icon with explanatory text - meeting 1.3.3 (Sensory Characteristics) without relying on colour alone to convey meaning.
Improved
Radio button touch targets are adequate
The Mr/Ms radio buttons are visually large enough to meet the 44×44px minimum touch target size on mobile - a common failure on airline booking forms.
Improved
Accessibility isn't a feature you add at the end. It's the quality bar you set at the start - and hold through every decision, every component, every edge case.
06 — Outcomes
What changed - and what it meant
The audit report and redesigned components were delivered to the Turkish Airlines product and engineering teams with prioritised remediation guidance. Key outcomes across the engagement:
23 critical failures documented
Every issue mapped to its WCAG criterion, severity, affected user group, and specific remediation - ready for immediate developer action without further UX interpretation needed.
Minimum contrast lifted to AA across all core flows
The 6 contrast failures in the booking flow were resolved - improving readability for users with low vision, in bright outdoor environments, and on older screens.
Full keyboard navigation restored
The complete booking flow became navigable without a mouse - critical for users with motor impairments, power keyboard users, and compliance with EU accessibility directives.
Accessibility-annotated component library
Delivered reusable Figma components with built-in accessibility annotations - focus states, ARIA labels, colour tokens - creating a foundation for compliant design going forward.
07 - Learning
What this project taught me
01
Accessibility is a systems problem
Most failures weren't one-off mistakes - they were patterns baked into the design system. Fixing individual screens without fixing the component library just moves the problem.
02
Contrast ratios aren't obvious
Many designers don't intuitively know what 4.5:1 looks like. Building contrast checking directly into Figma design tokens eliminates the problem at the source.
03
Dev handoff is where it breaks
Beautiful accessible designs fail when developers don't know how to implement them. Accessibility annotations on Figma frames - not just visual specs - are essential for compliance that survives handoff.
More Projects
Design System - WCAG - Figma
Ecclesia - a design system built in 53 hours.
Germany's leading insurance group had no design system. No component library. No shared UI language.
Read More
AI Platform - Dashboard UX
DFKI — Designing for
the Amazon Rainforest.
Full UX redesign of DFKI's AI-based ecological monitoring platform used by scientists.
Read More
UX/UI · Accessibility · WCAG 2.1 AA
Esche Schümann - designing
for who question everything.
UX/UI redesign of Esche Schümann Commichau's digital presence delivered in 22 hours.
Read More
UX/UI · Accessibility · WCAG 2.1 AA
MAKING TURKISH AIRLINES ACCESSIBLE FOR EVERYONE
A comprehensive WCAG 2.1 AA audit and redesign of the Turkish Airlines digital booking experience — identifying critical accessibility failures and delivering actionable, hirer-ready design solutions for a platform used by millions of passengers worldwide.
Client:
Turkish Airlines
Role:
UX Consultant
Duration:
2016 – ongoing
Platform:
Web · iOS · Android
01 - Context
ONE OF THE WORLD'S LARGEST AIRLINES, WITH AN ACCESSIBILITY GAP
Turkish Airlines serves over 340 destinations across 129 countries, with millions of passengers booking digitally every month. As a long-term UX consultant, I was brought in to evaluate and improve the quality of digital touchpoints - from the web booking flow to native iOS and Android apps.
During a routine UX review, I identified a pattern that went deeper than usability: the platform had significant WCAG 2.1 AA compliance failures across core booking flows. For an airline operating across the EU - where accessibility regulations for public digital services are increasingly enforced - this was both a user experience problem and a legal risk.
"15% of the world's population lives with some form of disability. For an airline serving 340 destinations, that's not an edge case - that's millions of passengers who couldn't fully use the product."
0+
0+
Destinations Worldwide
0M+
0M+
Monthly Digital Users
0
0
Critical WCAG failures found
02 - Key Challenges
What was failing - and for whom
The audit focused on the three most-used flows: flight search and selection, passenger details entry, and seat selection. These are the steps every passenger must complete - meaning accessibility failures here affect the broadest possible audience.
I evaluated each screen against WCAG 2.1 criteria across all four principles: Perceivable, Operable, Understandable, and Robust (POUR). Issues were prioritised by severity - Critical (blocks access entirely), Major (creates significant friction), and Minor (best practice improvements).
WCAG Criterion
Issue
Affects
Severity
1.4.3 Contrast (AA)
Body text on light grey backgrounds fails 4.5:1 ratio — as low as 2.8:1 in some fields
Low vision users
Critical
1.4.11 Non-text Contrast
Form field borders invisible against white background — no visual affordance for inputs
Low vision, cognitive
Critical
2.4.7 Focus Visible
Keyboard focus indicator removed via CSS on interactive elements including CTAs
Keyboard users, motor
Critical
1.3.1 Info & Relationships
Form labels not programmatically associated with inputs — screen readers read field blind
Screen reader users
Critical
3.3.1 Error Identification
Validation errors shown in red only — no icon or text description, relying on colour alone
Colour blind users
Major
2.5.3 Label in Name
Button accessible names don't match visible labels, breaking voice control navigation
Voice control users
Major
1.4.4 Resize Text
Text set in px breaks layout at 200% zoom — critical booking info becomes unreadable
Low vision users
Major
2.4.4 Link Purpose
Multiple "Read more" and "Select" links with identical accessible names on the same page
Screen reader users
Minor
03 - Process
From audit to actionable design
01
Heuristic & automated scan
Used Axe DevTools and WAVE to run an automated baseline scan across 12 key screens, capturing low-hanging failures. Automated tools catch ~30% of WCAG issues - the rest require manual evaluation and user judgment.
02
Manual keyboard & screen reader testing
Navigated the full booking flow using keyboard only (Tab, Enter, Arrow keys) and with VoiceOver on iOS and NVDA on Windows. Documented every point where the experience broke or became confusing without a mouse or vision.
03
Contrast & colour analysis
Checked every text/background combination against WCAG 1.4.3 (4.5:1 for body text, 3:1 for large text) and 1.4.11 (3:1 for UI components). Documented exact hex values and contrast ratios for each failure.
04
Prioritised findings report
Produced a structured findings report with each issue mapped to its WCAG criterion, severity, affected user group, and a clear remediation recommendation with visual examples - designed to be handed directly to developers.
05
Redesigned UI components in Figma
Delivered annotated Figma screens showing compliant versions of the most critical components: form fields, CTAs, error states, focus indicators, and the seat map. Each component included accessibility annotations for dev handoff.
04 - Key Findings
BEFORE & AFTER — BOOKING FORM
BEFORE & AFTER — BOOKING FORMA
The passenger details form was the single most problematic screen - 8 of the 23 critical failures appeared here. Below is a simplified mock-up of the key changes made to bring the form to WCAG 2.1 AA compliance.
CRITICAL ISSUES RESOLVED
1.4.3
Text contrast lifted from 2.8:1 → 7.2:1
Placeholder and label text was lightened to reduce visual noise - but crossed below the WCAG 4.5:1 minimum. Updated to #141410 on white, achieving AAA-level contrast without changing the brand palette.
Fixed
2.4.7
Focus indicators restored across all interactive elements
A single CSS rule (outline: none) had silently removed all keyboard focus visibility sitewide. Replaced with a 3px solid focus ring in the brand colour - visible, consistent, and non-intrusive.
Fixed
3.3.1
Error states now communicate through text + icon, not colour alone
Error messages relied entirely on red colour to signal failure. Added a warning icon (⚠) and descriptive text explaining what went wrong and how to fix it - meeting both 3.3.1 and 3.3.3.
Fixed
1.3.1
Form labels programmatically associated with inputs
Labels were visually positioned near inputs but had no for/id relationship - screen readers announced inputs as unlabelled. Added proper label associations and ARIA descriptions for all complex fields.
Fixed
05 — Real Screen Analysis
The current state — progress made, gaps remaining
The screenshot below shows the passenger information form after the first round of improvements were implemented by the development team. Several critical issues from the initial audit were addressed - but a detailed review reveals that accessibility work is rarely finished in one pass. There are still meaningful issues worth resolving.
What improved
Error state uses icon + text, not colour alone
The Surname field error now shows a ⚠ triangle icon alongside red text - addressing the original 3.3.1 failure. Colour-blind users can identify the error without relying on red alone.
Improved
Info alert uses icon + descriptive text
The blue info banner at the top combines an ℹ icon with explanatory text - meeting 1.3.3 (Sensory Characteristics) without relying on colour alone to convey meaning.
Improved
Radio button touch targets are adequate
The Mr/Ms radio buttons are visually large enough to meet the 44×44px minimum touch target size on mobile - a common failure on airline booking forms.
Improved
Accessibility isn't a feature you add at the end. It's the quality bar you set at the start - and hold through every decision, every component, every edge case.
06 — Outcomes
What changed - and what it meant
The audit report and redesigned components were delivered to the Turkish Airlines product and engineering teams with prioritised remediation guidance. Key outcomes across the engagement:
23 critical failures documented
Every issue mapped to its WCAG criterion, severity, affected user group, and specific remediation - ready for immediate developer action without further UX interpretation needed.
Minimum contrast lifted to AA across all core flows
The 6 contrast failures in the booking flow were resolved - improving readability for users with low vision, in bright outdoor environments, and on older screens.
Full keyboard navigation restored
The complete booking flow became navigable without a mouse - critical for users with motor impairments, power keyboard users, and compliance with EU accessibility directives.
Accessibility-annotated component library
Delivered reusable Figma components with built-in accessibility annotations - focus states, ARIA labels, colour tokens - creating a foundation for compliant design going forward.
07 - Learning
What this project taught me
01
Accessibility is a systems problem
Most failures weren't one-off mistakes - they were patterns baked into the design system. Fixing individual screens without fixing the component library just moves the problem.
02
Contrast ratios aren't obvious
Many designers don't intuitively know what 4.5:1 looks like. Building contrast checking directly into Figma design tokens eliminates the problem at the source.
03
Dev handoff is where it breaks
Beautiful accessible designs fail when developers don't know how to implement them. Accessibility annotations on Figma frames - not just visual specs - are essential for compliance that survives handoff.
More Projects
Design System - WCAG - Figma
Ecclesia - a design system built in 53 hours.
Germany's leading insurance group had no design system. No component library. No shared UI language.
Read More
AI Platform - Dashboard UX
DFKI — Designing for
the Amazon Rainforest.
Full UX redesign of DFKI's AI-based ecological monitoring platform used by scientists.
Read More
UX/UI · Accessibility · WCAG 2.1 AA
Esche Schümann - designing
for who question everything.
UX/UI redesign of Esche Schümann Commichau's digital presence delivered in 22 hours.
Read More
UX/UI · Accessibility · WCAG 2.1 AA
MAKING TURKISH AIRLINES ACCESSIBLE FOR EVERYONE
A comprehensive WCAG 2.1 AA audit and redesign of the Turkish Airlines digital booking experience — identifying critical accessibility failures and delivering actionable, hirer-ready design solutions for a platform used by millions of passengers worldwide.
Client:
Turkish Airlines
Role:
UX Consultant
Duration:
2016 – ongoing
Platform:
Web · iOS · Android
01 - Context
ONE OF THE WORLD'S LARGEST AIRLINES, WITH AN ACCESSIBILITY GAP
Turkish Airlines serves over 340 destinations across 129 countries, with millions of passengers booking digitally every month. As a long-term UX consultant, I was brought in to evaluate and improve the quality of digital touchpoints - from the web booking flow to native iOS and Android apps.
During a routine UX review, I identified a pattern that went deeper than usability: the platform had significant WCAG 2.1 AA compliance failures across core booking flows. For an airline operating across the EU - where accessibility regulations for public digital services are increasingly enforced - this was both a user experience problem and a legal risk.
"15% of the world's population lives with some form of disability. For an airline serving 340 destinations, that's not an edge case - that's millions of passengers who couldn't fully use the product."
0+
0+
Destinations Worldwide
0M+
0M+
Monthly Digital Users
0
0
Critical WCAG failures found
02 - Key Challenges
What was failing - and for whom
The audit focused on the three most-used flows: flight search and selection, passenger details entry, and seat selection. These are the steps every passenger must complete - meaning accessibility failures here affect the broadest possible audience.
I evaluated each screen against WCAG 2.1 criteria across all four principles: Perceivable, Operable, Understandable, and Robust (POUR). Issues were prioritised by severity - Critical (blocks access entirely), Major (creates significant friction), and Minor (best practice improvements).
WCAG Criterion
Issue
Affects
Severity
1.4.3 Contrast (AA)
Body text on light grey backgrounds fails 4.5:1 ratio — as low as 2.8:1 in some fields
Low vision users
Critical
1.4.11 Non-text Contrast
Form field borders invisible against white background — no visual affordance for inputs
Low vision, cognitive
Critical
2.4.7 Focus Visible
Keyboard focus indicator removed via CSS on interactive elements including CTAs
Keyboard users, motor
Critical
1.3.1 Info & Relationships
Form labels not programmatically associated with inputs — screen readers read field blind
Screen reader users
Critical
3.3.1 Error Identification
Validation errors shown in red only — no icon or text description, relying on colour alone
Colour blind users
Major
2.5.3 Label in Name
Button accessible names don't match visible labels, breaking voice control navigation
Voice control users
Major
1.4.4 Resize Text
Text set in px breaks layout at 200% zoom — critical booking info becomes unreadable
Low vision users
Major
2.4.4 Link Purpose
Multiple "Read more" and "Select" links with identical accessible names on the same page
Screen reader users
Minor
03 - Process
From audit to actionable design
01
Heuristic & automated scan
Used Axe DevTools and WAVE to run an automated baseline scan across 12 key screens, capturing low-hanging failures. Automated tools catch ~30% of WCAG issues - the rest require manual evaluation and user judgment.
02
Manual keyboard & screen reader testing
Navigated the full booking flow using keyboard only (Tab, Enter, Arrow keys) and with VoiceOver on iOS and NVDA on Windows. Documented every point where the experience broke or became confusing without a mouse or vision.
03
Contrast & colour analysis
Checked every text/background combination against WCAG 1.4.3 (4.5:1 for body text, 3:1 for large text) and 1.4.11 (3:1 for UI components). Documented exact hex values and contrast ratios for each failure.
04
Prioritised findings report
Produced a structured findings report with each issue mapped to its WCAG criterion, severity, affected user group, and a clear remediation recommendation with visual examples - designed to be handed directly to developers.
05
Redesigned UI components in Figma
Delivered annotated Figma screens showing compliant versions of the most critical components: form fields, CTAs, error states, focus indicators, and the seat map. Each component included accessibility annotations for dev handoff.
04 - Key Findings
BEFORE & AFTER — BOOKING FORM
BEFORE & AFTER — BOOKING FORMA
The passenger details form was the single most problematic screen - 8 of the 23 critical failures appeared here. Below is a simplified mock-up of the key changes made to bring the form to WCAG 2.1 AA compliance.
CRITICAL ISSUES RESOLVED
1.4.3
Text contrast lifted from 2.8:1 → 7.2:1
Placeholder and label text was lightened to reduce visual noise - but crossed below the WCAG 4.5:1 minimum. Updated to #141410 on white, achieving AAA-level contrast without changing the brand palette.
Fixed
2.4.7
Focus indicators restored across all interactive elements
A single CSS rule (outline: none) had silently removed all keyboard focus visibility sitewide. Replaced with a 3px solid focus ring in the brand colour - visible, consistent, and non-intrusive.
Fixed
3.3.1
Error states now communicate through text + icon, not colour alone
Error messages relied entirely on red colour to signal failure. Added a warning icon (⚠) and descriptive text explaining what went wrong and how to fix it - meeting both 3.3.1 and 3.3.3.
Fixed
1.3.1
Form labels programmatically associated with inputs
Labels were visually positioned near inputs but had no for/id relationship - screen readers announced inputs as unlabelled. Added proper label associations and ARIA descriptions for all complex fields.
Fixed
05 — Real Screen Analysis
The current state — progress made, gaps remaining
The screenshot below shows the passenger information form after the first round of improvements were implemented by the development team. Several critical issues from the initial audit were addressed - but a detailed review reveals that accessibility work is rarely finished in one pass. There are still meaningful issues worth resolving.
What improved
Error state uses icon + text, not colour alone
The Surname field error now shows a ⚠ triangle icon alongside red text - addressing the original 3.3.1 failure. Colour-blind users can identify the error without relying on red alone.
Improved
Info alert uses icon + descriptive text
The blue info banner at the top combines an ℹ icon with explanatory text - meeting 1.3.3 (Sensory Characteristics) without relying on colour alone to convey meaning.
Improved
Radio button touch targets are adequate
The Mr/Ms radio buttons are visually large enough to meet the 44×44px minimum touch target size on mobile - a common failure on airline booking forms.
Improved
Accessibility isn't a feature you add at the end. It's the quality bar you set at the start - and hold through every decision, every component, every edge case.
06 — Outcomes
What changed - and what it meant
The audit report and redesigned components were delivered to the Turkish Airlines product and engineering teams with prioritised remediation guidance. Key outcomes across the engagement:
23 critical failures documented
Every issue mapped to its WCAG criterion, severity, affected user group, and specific remediation - ready for immediate developer action without further UX interpretation needed.
Minimum contrast lifted to AA across all core flows
The 6 contrast failures in the booking flow were resolved - improving readability for users with low vision, in bright outdoor environments, and on older screens.
Full keyboard navigation restored
The complete booking flow became navigable without a mouse - critical for users with motor impairments, power keyboard users, and compliance with EU accessibility directives.
Accessibility-annotated component library
Delivered reusable Figma components with built-in accessibility annotations - focus states, ARIA labels, colour tokens - creating a foundation for compliant design going forward.
07 - Learning
What this project taught me
01
Accessibility is a systems problem
Most failures weren't one-off mistakes - they were patterns baked into the design system. Fixing individual screens without fixing the component library just moves the problem.
02
Contrast ratios aren't obvious
Many designers don't intuitively know what 4.5:1 looks like. Building contrast checking directly into Figma design tokens eliminates the problem at the source.
03
Dev handoff is where it breaks
Beautiful accessible designs fail when developers don't know how to implement them. Accessibility annotations on Figma frames - not just visual specs - are essential for compliance that survives handoff.
More Projects
Design System - WCAG - Figma
Ecclesia - a design system built in 53 hours.
Germany's leading insurance group had no design system. No component library. No shared UI language.
Read More
AI Platform - Dashboard UX
DFKI — Designing for
the Amazon Rainforest.
Full UX redesign of DFKI's AI-based ecological monitoring platform used by scientists.
Read More
UX/UI · Accessibility · WCAG 2.1 AA
Esche Schümann - designing
for who question everything.
UX/UI redesign of Esche Schümann Commichau's digital presence delivered in 22 hours.