Explained: The four web accessibility principles

Every user that hears about you should be able to view your site and access your services without issue – that means adhering to the POUR web accessibility principles

The Web Content Accessibility Guidelines (WCAG) were published to provide comprehensive recommendations for making web content accessible to users, including those with visual impairments, loss of hearing, limited mobility, speech difficulties, photosensitivity, learning disabilities and cognitive limitations.

To easily map the many elements behind making web content accessible, it has been organised into the acronym ‘POUR’. These four guiding principles, upon which WCAG has been built, are a way of approaching web accessibility:

Principle 1: Perceivable

All your information and user interface (UI) components must be presentable to users in ways they can perceive. This ensures that information can be comprehended by at least one of the user’s senses at any given time.

To meet this principle, your content needs to be adaptable – for example, allowing users to read text in larger print or simpler layouts without reducing the information presented to them. This is especially important for time-based media such as videos and podcasts, for which subtitles and transcripts are essential. Making your content easily distinguishable is an easily overlooked element of site design, with many outlets presenting ‘dark mode’ options to meet this element of accessibility.

The four guidelines of the Perceivable principle are:

• 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
• 1.2 Time-based Media: Provide alternatives for time-based media.
• 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
• 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

Principle 2: Operable

All components of your UI and navigation must be operable. In other words, your interface cannot demand a form of interaction that a user may not be able to perform.

This web accessibility principle is all about making sure users know where they are in your content and how they can navigate through it. Allowing users to easily move through your site and interact with elements using the Tab key is a common way of meeting several parts of this principle, although you should also consider if you use any videos or graphics that may cause reactions in people with photosensitive epilepsy.

The five guidelines of the Operable principle are:

• 2.1 Keyboard Accessible: Make all functionality available from a keyboard.
• 2.2 Enough Time: Provide users with enough time to read and use your content.
• 2.3 Seizures: Do not design content in a way that is known to cause seizures.
• 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.
• 2.5 Input Modalities: Make it easier for users to operate functionality through various inputs beyond a keyboard.

Principle 3: Understandable

All your information and the operation of your UI must be understandable. That means ensuring that, no matter who is using your site or services, they can always easily comprehend what page they are on and how they should progress through to the information or service they need.

The three guidelines of the Understandable principle are:

• 3.1 Readable: Make text content readable and understandable.
• 3.2 Predictable: Make Web pages appear and operate in predictable ways.
• 3.3 Input Assistance: Help users avoid and correct mistakes.

Principle 4: Robust

The final principle considers how your content interacts with different user agents, including assistive technologies. In short, your content should remain accessible as these technologies continue to evolve. The Robust principle has only one element:

• 4.1 Compatible: Maximise compatibility with current and future user agents, including assistive technologies.

What are the web accessibility guidelines?

We’ve explained the POUR web accessibility principles, but you should know that each WCAG principle has additional guidelines to help you achieve full compliance. For example, ensuring that your content is Distinguishable (1.4) has guidance covering the following elements:

• Use of colour
• Audio control
• Contrast (minimum)
• Resizing text
• Images of text
• Contrast (enhanced)
• Low or no background audio
• Visual presentation
• Images of text (no exception)
• Reflow
• Non-text contrast
• Text spacing
• Content on hover or focus

In total, there are 58 guidelines to improve your accessibility to various levels:

• 30 guidelines for A-level compliance
• An additional 20 for AA-level compliance
• An additional 28 for AAA-level compliance

We always recommend meeting AAA-level compliance because it ensures your content is fully accessible to anyone who views it. However, we provide compliance audits to all levels under our Bronze, Silver, Gold and Platinum packages.

Will the web accessibility principles change?

WCAG 2.0 was published in December 2008, which was then expanded on with WCAG 2.1 in June 2018. These are the guidelines that the above principles and their explanations have been taken from. The newest update to the guidelines was WCAG 2.2, which officially released on 5th October 2023. It currently contained many minor edits and refinements; the most significant updates generally improved accessibility to users with cognitive or learning disabilities, with low vision and with disabilities on mobile devices.

Here’s a rundown of the changes brought by WCAG 2.2:

WCAG 2.2 Updates – Operable

Focus not Obscured (Minimum) (AA)

When a user interface component receives keyboard focus, sometimes author content can cover up interface components, such as toggles, tags, text boxes, etc. This guideline ensures the component is not entirely hidden, so at least a portion of it is visible.

Focus not Obscured (Enhanced) (AAA)

For AAA-level compliance of this standard, no part of the component should be hidden by author-created content.

Focus Appearance (AAA)

Focus Appearance considers when the keyboard focus indicator is visible, an area of the focus indicator is:

• At least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component.
• Has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

The only exceptions for this are:

• If the focus indicator is determined by the user agent and cannot be adjusted by the author.
• The focus indicator and the indicator’s background color are not modified by the author.

Dragging Movements (AA)

This new standard requires that all functionalities that use a dragging movement can be done by a single pointer with no dragging, except if dragging is essential or the functionality is determined by the user agent and unmodified by the author.

Target Size (Minimum) (AA)

Target size means that the size of the target for pointer inputs is at least 24 by 24 CSS pixels, except in the cases of:

• Spacing: Undersized targets (those less than 24 x 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, they don’t intersect another target or the circle for another undersized target.
• Equivalent: The function can be achieved through a different control on the same page meeting the same criteria.
• Inline: The target is in a sentence or its size is constrained by the line-height of non-target text.
• User-agent control: The size of the target is determined by the user agent and is not modified by the author.
• Essential: A particular presentation of the target is essential or is legally required for the information.

WCAG 2.2 Updates – Understandable

Consistent Help (A)

This guideline covers features that are repeated on multiple web pages within a set of pages, demanding that they occur in the same order relative to other page content, unless a change is initiated by the user. This concerns the following mechanisms:

• Human contact details
• Human contact mechanism
• Self-help option
• A fully automated contact mechanism

Redundant Entry (A)

Redundant entry is another new guideline, stating that information previously entered by or provided to the user that is required to be entered again in the same process, is either auto-populated or available for the user to select. Exceptions to this can include when re-entering the information is essential, the information is required to ensure security of the content, or the previously entered information isn’t valid anymore.

Accessible Authentication (Minimum) (AA)

This guideline has been written to cover authentication processes, stating that a cognitive function test (e.g. remembering a password or completing a captcha puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:

• An alternative: Another authentication method that does not rely on a cognitive function test.
• Assistive mechanism support: A mechanism is available to assist the user in completing the cognitive function test.
• Object recognition: The cognitive function test is to recognise objects (this can be represented by images, video or audio.
• Personal content: The cognitive function test is to identify non-text content the user provided to the website. This can also be represented by images, video or audio.

Accessible Authentication (Enhanced) (AAA)

AAA-level compliance of Accessible Authentication is achieved if a cognitive function test is not required for any step in an authentication process. Exceptions include when the process provides either an alternative authentication method or the user can use a mechanism to assist completion of the cognitive test.

WCAG 3.0 is currently a working draft and is expected to be a larger revision of the web accessibility principles. Although WCAG 3.0 is viewable from the Web Accessibility Initiative site, they are not fully published and should not be seen as guidelines your organisation need to adhere to at this moment in time.