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, Aer Lingus have been compliant with US Legislation and US Department of Transport regulations on accessibility since 2017.
US legislation on disability and accessibility standards pre-date their EU equivalent by almost two decades. (The ADA – Americans with Disabilities Act 1999 & 2008 versus the EAA – European Accessibilty Act 2019). As a seasoned Product Designer in the airline industry, I’ve been fortunate to have had an 8-year head start on most EU industries in terms of understanding WCAG accessibility compliance and best-practices.
What is web accessibility?
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.
A more accessible web is better for everyone
As well as just being the right thing to do, designing for accessibility can positively impact any website or digital product.
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 and obvious navigation controls makes information easier to find and to comprehend.
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 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?
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;
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.
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.
Practical application of Accessibility best-practices
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
Visually impaired users struggle to read text which is too small or has poor contrast. The default colour of the text should be black and the colour of the blue hyperlinks needs to be checked.
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/.