Universal Design in Web Checklist


Finally! The checklist for universal design in web is here. Some of these regulations are quite advanced formulated, so feel free to ask if anything is unclear. We hope it will be of good use!

Finally! The checklist for universal design in web is here. Some of these regulations are quite advanced formulated, so feel free to ask if anything is unclear. I have tried to simplify most of them.

For those who are not sure what universal design is,  it is we design that refers to broad-spectrum ideas meant to produce buildings, products and environments that are inherently accessible to older people, people without disabilities, and people with disabilities. More about it you can find in the bottom of this article.

General about universal design

  • Easy and intuitive to use – The design is easy to understand regardless of the user’s experience, knowledge, language skills, or current concentration level.
  • Understandable Information – The design communicates necessary information to the user in an efficient way.
  • Tolerance for errors – The design minimises hazards that create consequences and unintended actions.
  • Equal opportunities for all – The design is useful and available to people with diverse skills.
  • Flexibility in use – Regardless of individual preferences and abilities. The visually impaired will be able to hear and the hearing impaired able to watch.
  • Low physical effort – The design is used efficiently, comfortably and with minimum inconvenience.
  • Size and space for access and use – Appropriate size and space will provide possibilities for access, range, operation and use regardless of user’s body size, posture and mobility.

Success Criteria for Web Solutions

  • 1.1.1 – Non-text content
    All non-text content will have a text option. Able to add alt.text on buttons and other non-text elements.
  • 1.2.1 – Video and sound
    Videos containing only sound- or visual communication needs to have a sound- or visual communication choice.
Only sound – Additional video presenting the content.
Only video – Additional soundtrack presenting the content.
  • 1.2.2 – Texting

    All sound content must be subtitled if not clearly marked as an alternative to text content.
  • 1.3.2 – Meaningful structure
    Structure for categories, subcategories and products should have a meaningful structure. Easy to navigate and understand how the sites pages and structure are built.
  • 1.3.3 – Sensory properties

    Instructions regarding the understanding and control of content is not depending on graphical solutions like form, shape, size, visual orientation, location and sound.
  • 1.4.1 – Use of colour

    The content colour must be separated from the background colour to make it easy to read and understand.
  • 1.4.2 – Sound Control
    If audio is played for more than 3 seconds there is a mechanism to stop the sound completely or temporarily, or a mechanism that can adjust the volume apart from of the overall volume system.
  • 1.4.3 – Contrast (minimum)

    Presentation of text and images is required a 4.5:1 contrast. This is not needed if the text is big and holding a 3:1 contrast, or if the text is purely meant for decoration. Logo is a brand and not submitted to contrast requirements.
  • 1.4.4 – Text size

    It must be possible to enhance text (not subtitles and image titles) up to 200% without using compensatory technology and without loosing any content and functionalities.
  • 1.4.5 – Picture of text

    Text must be used, not images of text.
  • 2.1.1 – Keyboard

    All content functionalities is operated through a keyboard interface without the need for timing of the various keystrokes.
  • 2.1.2 – No Keyboard-traps
    If there is need for something other than default arrow or tab, or other standard methods of navigation, the user will receive information about which method to use.
  • 2.2.1 – Adjustable Speed
Turn off: The user can turn off the time limit before it manifests itself, or
    Adjust: The user can adjust the time limit before it manifests itself, using a scale that is at least ten times the duration of the default, or
Extend: The user is notified before the time expires, and gets at least 20 seconds to extend the time limit by a simple action (for example, “press the space bar”), and the user can extend the time limit at least ten times, or
    Exceptions in real time: The time limit is a required part of an event in real time (for example, an auction), and there is no alternative to the time limit, or
    Necessary exceptions: The time limit is required, and an extension will make the action invalid, or 
20-hour exceptions: The time limit is longer than 20 hours.
  • 2.2.2 – Pause, stop, hide
    For movement, scrolling, or auto updating information applies to both of the following:
    Movement, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) are presented simultaneously with other content, there is a mechanism that the user can use to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an action where it is needed.
    Auto Update: If any automatic update of information that (1) starts automatically and (2) are presented simultaneously with other content, there is a mechanism that the user can use to pause, stop or hide it or to control update rate, unless the automatic update is part of an action where it is needed.
  • 2.3.1 – Threshold and maximum three glimpses
    The pages should not flash (in general or red flashes) more than three times during one second.
  • 2.4.1 – Jumping blocks
    There is some kind of mechanism to avoid blocks with content repeated on several webpages.
  • 2.4.2 – Page titles

    Pages have titles that describe the current page’s topic or purpose.
  • 2.4.3 – Focus order
    If a page is navigated sequentially, the navigation should be meaningful and user friendly. Focus elements receive focus in an order that maintains the meaning of operation.
  • 2.4.4 – Purpose with link in content

    The purpose with each link is determined from the link itself or from the link context.
  • 2.4.5 – Several ways
    There is more than one way to find a page. The exception is if the page is a result of a process, in a process or a step in the process.
  • 2.4.6 – Headings and prompts
    Headings and prompts describes a subject or a purpose.
  • 2.4.7 – Visible focus

    Keyboard user interface has an operation mode where the focus indicator for the keyboard is visible.
  • 3.1.1 – Languages
    Default language is determined in the code. The exceptions are names, technical terms, words only understandable in other languages and words or expressions that has become a part of the default language.
  • 3.2.1 – Focus

    When a component is in focus the context doesn`t change.
  • 3.2.2 – Input

    Changing the settings of a user interface component doesn`t cause automatic context changes unless the user has been warned before using the component.
  • 3.2.3 – Consistent navigation
    Navigation mechanisms that are repeated on multiple pages are in the same relative order each time they are repeated, unless the user makes a change.
  • 3.2.4 – Consistent identification
    Components with the same functionalities within the same set of pages is identified consistently.
  • 3.3.1 – Identification of errors
    If an input error is automatically detected, the element is identified and the user receives a text description of the error.

Here are some links you might find useful: