I’ve worked as an in-house designer with the Irish airline Aer Lingus since 2016. As an airline that flies to and from the United States, we had a hard deadline to make the Aer Lingus website compliant with US Legislation and US Department of Transport regulations on accessibility. This case study examines the why, what and how of that process.
Why?
US legislation on disability and accessibility standards pre-dates the EU equivalent by almost two decades. (The ADA – Americans with Disabilities Act 1999 & 2008 versus the EAA – European Accessibilty Act 2019).
What is web accessibility?
Accessibility is the ability of a system or environment to accommodate the needs and preferences of each individual.
Inclusion is a broader term, and is probably easier understood when you consider its opposite – Exclusion. Exclusion means creating barriers and deliberately segregating groups of users. Focusing only on most or some of our guests neglects other users and goes against an ethically correct vision of providing an accessible and inclusive digital experience for all.
Web accessibility is the practice of removing barriers to ensure that people of all abilities can easily interact with and have equal access to your website’s content and functionality. As well as just being the right thing to do, designing for accessibility can positively impact any website or digital product.
Put simply, a more accessible web is better for everyone:
Reach more users
Worldwide, there are over 1.2 billion web users with disabilities. This is a large audience (15%) who are critical to include – but often get forgotten, when new digital experiences are being planned.
Provide a better experience
A consistent layout, legible/understandable language and obvious navigation controls makes information easier to find for everyone.
Improve site performance
Accessibility standards can help improve SEO ranking. Accessible websites with semantic html and aria tags are easier for search engines to index. This improves searchability, can lead to higher engagement rates, longer time on site and help a website’s authority scores.
Understanding Disability
There are two opposing interpretations of disability;
The Medical model of disability is an outdated misconception that physical or psychological impairments are solely a medical problem in an individual, which must either be treated or managed.
The Social model of disability is a more modern understanding. It asserts that ‘disablement’ is caused – not by a person’s disability, but by a person’s environment, and that disadvantages are imposed on a person by an environment that has failed to accommodate the needs of all users.
The (US) Americans with Disabilities Act 1990, 2008 and the (EU) European Accessibility Act 2019 are based on the latter Social model of disability. These legislations prohibit discrimination on the basis of disability – just as other civil rights laws prohibit discrimination on the basis of race, colour, gender, sexuality, national origin, age and religion. These laws determine that people with disabilities are entitled to the same legal protections and rights as everyone else, especially when it comes to essential services such as voting, banking, education, access to government services, retail and transport.
Accessibility standards are an extension of civil rights in a digital environment.
Failure of businesses or organisations to comply with accessibility legislation can be considered discrimination (creating legal exposure).
As well as business and legal considerations, designing for accessibility is simply just the right thing to do. If we are not designing responsibly to include all users, we are effectively excluding users. Designing for accessibility improves usability for all.
How do we design for Accessibility?
Design and development teams need to make sure we are delivering the most accessible user experiences possible. We should adopt the WCAG recommended P.O.U.R. principles. These are industry standard for accessible digital design and means that our digital environment should be;
Perceivable – Can I see it? Can I hear it? Can I feel it?
Operable – Can I scroll it? Can I move it? Can I navigate away from it?
Understandable – Can I read it? Can I understand it? Can I predict how it will behave?
Robust – Does it meet basic standards to be compatible with assistive technologies?
Examples
This example shows the Aer Lingus flight Search Results page before and after accessibility standards were applied. Larger fonts, compliant colour contrasts, improved spacing and visual hierarchy.
This example shows the Aer Lingus flight Booking Confirmation email before and after an accessibility upgrade. Fonts are larger, colour contrasts are compliant, key information is more prominent in the improved visual hierarchy. Secondary information is clearly grouped and content sections have larger section titles for scanability.
How we made aerlingus.com accessibility compliant
So what did we actually do to make the Aer Lingus website and App more accessible?
Site audit
Our first step was to form a working group of relevant people to assess how much improvement was required to get the website to a compliant standard. Accessibility standards are measurable, so it was possible to accurately assess how much work was involved. Teams from UX Writing, Design and Tech measured the amount of improvement needed.
Text size
The recommended minimum text sizes for WCAG compliance are 16px on web and 14px on mobile.
Text line-height
It can be difficult to read paragraphs and blocks of text where the lines of copy are too close together. We need to set appropriate line heights on text to make it comfortably readable. (Usually 1.3em or more). This also helps increase the touch area for hyperlinks.
Hierarchy
Use headings to communicate hierarchy and ensure heading styles differ from paragraph text. This helps with scanning. Also – users on screen readers typically use the tab key to tab through h1, h2, h3 titles to quickly locate relevant content.
Colour Contrast
Colour blind and low visibility condition users require all text to have high colour contrast with the colours around them. All UI elements should meet a minimum standard of 3:1. However, all text, icons, and any focus indicators used for users using a keyboard should meet a minimum contrast ratio of 4.5:1 to the background colour.
- Use high colour contrast for all text
- Use high colour contrast for interactive elements
- Use high colour contrast for icons, infographics and diagrams
- Designs must be meaningful without colour i.e. they should not rely solely on colour for meaning.
Icons
Icons help comprehension, scanability and findability – especially for users who do not speak English as their first language. They are visual cues which assist communication and therefore help to provide an easier user experience.
Touch Target Area and Placement
Adequately sized touch targets are critical for using an interface. The recommended touch areas for CTA’s and interactive elements is 1cm x 1cm, or in pixels typically around 48px x 48px. Buttons, interactive elements and hyperlinks should adhere to this standard. To avoid accidental taps, targets must first be big enough, and then also spaced well enough.
Information Grouping and Spacing
For some users with learning disabilities, large amounts of content can be overwhelming and confusing. It can be difficult to understand where some information ends and new information begins. To avoid content being misunderstood, information should be grouped into relative content sections. Each section should have it’s own clear title, to help with comprehension and to frame content. Sections should also have generous spacing to help separate them from unrelated information.
Literacy / Readability
The average literacy level for adults in Ireland and the UK is the equivalent to a 9 year-old child. 18% (1 in 6) of Irish adults scores below level 1 in literacy. So all language used in our service emails should be uncomplicated. The Flesch-Kincaid readability test measures language complexity based on sentence length and the number of syllables per word.
Numeracy
According to the CSO, 25% (or 1 in 4 ) Irish adults scores level 1 or less in numeracy – meaning they have trouble completing basic maths tasks. So any numeric information should be displayed as simply as possible (1 or 2 columns), and should resemble a basic ‘sum’.
Development
Ensure that all content has sufficient alt-text and aria-label descriptors.
Encourage App Download
iOS and Android operating systems can have better native accessibility features and assistive technologies compared to web browsers.
See – https://www.apple.com/accessibility/.
