Designing for Accessibility

As a technology-driven company, Aer Lingus strives to promote the best development and design practices across our digital platforms. In recent years, one of the disciplines we have been especially pro-active in is designing for Accessibility & Inclusivity.

What is Accessibility & Inclusivity?

Accessibility is the ability of a system or environment to accommodate the needs and preferences of each individual.

Inclusion 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. This is harmful and can be considered a denial of persons basic human rights.

 

Reframing disability

Digital Disability is an extension of disability in the physical world. We subscribe to the Social Model of Disability which proposes that people are disabled more by their environment than by a physical or psychological condition. Society disables people through poor or inconsiderate design.

 

Why does this effect Aer Lingus?

As designers and researchers, it’s our job to understand user needs. Poor or inconsiderate design can disable and exclude some users. We should therefore design inclusive, disability-neutral digital experiences which are accessible for all users. As well as being the correct and responsible thing to do, designing for accessibility is also a compliance issue;

Aer Lingus fly to and from the United States. We are therefore subject to US Department of Transport regulations. Under the US Air Carriers Accessibility Act which came into effect on December 12th 2016, all parts of the AerLingus.com domain and all publicly accessible communications must conform to Web Content Accessibility Guidelines (WCAG) 2.1 AA standard. This applies to all print, web, native app and inflight media.

 

How do we design for Accessibility & Inclusivity?

We want to make travel more inclusive and accessible for everyone. Instead of retro-fitting WCAG standards, we now have a policy of designing products which are born-accessible.

The Aer Lingus Accessibility Team work closely with design and development teams 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? 
Perceivability means the user can identify content and interface elements by means of the senses, so all information, expected actions and user controls should be presented to users in a way that is clear and understandable.

Operable
Can I scroll it? Can I move it? Can I navigate away from it? 
Operability means that a user can successfully use controls, buttons, navigation, and other necessary interactive elements. UI components should be navigable from keyboard and available to people who access information in a non-standard way.

Understandable
Can I read it? Can I understand it? Can I predict how it will behave?  
Users should be able to comprehend the content, and learn and remember how to use the interface.Content should be presented in a way that is easy to read and understand;

  • Make content readable (font size / colour contrast)
  • Make language understandable (avoid jargon, complicated language and phrasing)
  • Make webpages appear an operate in a predictable way

Robust
Does it meet basic standards to be compatible with assistive technologies?
Controls and content must be robust enough to be interpreted reliably by a wide range of assistive technologies. We should maximise the compatibility of our website with standard assistive technologies.

As well as coding to enable assistive technologies, accessibility standards also apply to design, particularly to the treatment of text, colour and visual elements for low-visibility conditions;

 

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.

 

Example:

 

 

 

 

Text Styles

Text must be legible and have sufficient colour contrast;

 

  • Default size for body copy should be 16px on desktop and 14px on mobile
  • Minimum size for body copy is 14px on desktop and 12px on mobile
  • Line height should be minimum of 1.5em for body copy
  • Alignment: left or centre-aligned only. Never justify paragraph text
  • Header texts: Sufficient space should be allowed above and below header text
  • Interactive text links should show in teal green
  • Hyperlinks within a paragraph should be teal green and underlined.

 

Example:

 

 

Controls

Users who use a screen reader, zoom, or other tool should understand what all controls are and what will happen when they use them.

  • All text links should appear in teal green text
  • All hyperlinks in body copy should be teal green and underlined
  • All non-text controls should have a text alternative that serves the equivalent purpose and describes the purpose
  • Button, link and control labels must be meaningful and concise
  • Users are aware of links that open in a new window
  • Content that appears on hover or focus is clickable

 

Example;

 

 

Forms

Forms can be very time consuming and confusing for many of our users. In order to assist all users it’s important that we make our forms as clear as we can. This includes giving instructions that are easy for all of our users to discover and understand;

  • Group inputs appropriately and give them a title for clarity
  • Allow Autocomplete whenever possible
  • Input fields should be 48px high to provide sufficient touch area on mobile
  • Text labels should have a minimum contrast ratio of 4.5:1 against the background colour
  • Default, Hover, Actioned and Error states should also show sufficient contrast colour and size for text
  • Interactive elements should display in teal green (e.g. chevrons in dropdown inputs, security code icon)
  • Error states should assist with error recovery and always direct user to the next required action.

Example: