Web accessibility or ‘inclusivity’ is the practice of ensuring that people of all abilities can easily interact with and have equal access to your website’s content and functionality.
Worldwide, there are over 1 billion web users with disabilities. This is a large audience who are critical to include (but often get forgotten) when new digital experiences are being planned. Digital platforms should support visual, hearing, cognitive and physical impairments by implementing inclusive web functionality and accessibility design best-practices.
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.
Practical application of Accessibility best-practices
The recommended minimum text sizes for WCAG compliance are 16px on web and 14px on mobile.
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.
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.
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 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.
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’.
Ensure that all content has sufficient alt-text and aria-code 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/.