Universal web design – what and why to use it

An eye, a hand, an ear and a brain around a computer with an internet symbol.
Themes in this post: Accessibility, Design, Universal design, WCAG, WCAG 2.0, WCAG 2.1, Web Design, Web Development

Today, virtually everyone owns a computer and a smartphone, and for most people, the Web is their primary source of information. In addition, the number of self-service services is increasing by both public and private players. We order tickets, create bank accounts and send applications – all online. This makes the demand for a universally designed digital product that is built for everyone, regardless of age, ability and educational level more important than ever.

Universal design is a process and a tool that must be included throughout the development process – from sketches, content production and design to development. We develop all our web solutions with universal design as standard.

What is Universal Design?

Chapter 3 of the Gender Equality and Discimination Act requires universal design for all public and private enterprises in Norway. If you have a website, an application or an ICT solution that is new or has been updated since July 1, 2014, the law applies to you. It is the Authority for Universal Design of ICT that is responsible for following up the regulations on universal design in Norway. The law defines universal design as follows:

«Universal design» means designing or accommodating the main solution with respect to the physical conditions, including information and communications technology (ICT), such that the general functions of the undertaking can be used by as many people as possible, regardless of disability.

The idea behind universal design is to make all solutions user-friendly and accessible to everyone, regardless of age, ability and level of education. This way, as many people as possible will be able to participate in society on equal terms. Not only is following the requirements of universal design important in regard to staying within the law, but it also benefits and provides real value to all you customers and visitors. Your web solution will be better experienced and perceived for the user and for search engines like Google. Making sure that your site meets the requirements and is properly designed can affect its ranking on organic SEO and where it ends up in organic search. This can result in more people finding your website, and that is something we strive for, right?

What is WCAG 2.0?

WCAG (Web Content Accessibility Guidelines) is a technical standard that defines how to make web solutions accessible to people with disabilities. The requirements for universal design are based on WCAG 2.0. The Universal Design Regulation requires that the web solution meet 35 of the 61 success criteria of the WCAG 2.0 standard, which include content, structure, design and code. The 35 mandatory success criteria can be found here (NB. in Norwegian only).

When the EU web directive on universal design becomes part of Norwegian law, it is WCAG 2.1 that will apply, which includes 12 new requirements. Is it proposed that the rule changes will be adopted on July 1 2020, with a transitional period of 6 months. The new requirements will thus be required by law from January 1 2021.

Five quick tips for better universal design

I want to describe 5 of the 35 mandatory success criteria for universal design that are pretty easy to fulfill, and that you can quickly ascertain and verify yourself.

Contrast

All text must have sufficient contrast to the background. This is to ensure good readability and is important for all users, especially for the visually impaired, dyslexic and colour blind, and under challenging lighting conditions.

The requirement states that small text should have a contrast ratio of 4.5:1, and large text (24px or larger) 3.0:1. Some cases are exempt from the requirement, including insignificant text that is pure decoration or part of an inactive UI component, as well as logos.

Four boxes with different background and text colors.
Different combinations of background color and text color result in different contrasts.

There are many tools available online that can be used to test this requirement, including WebAIM’s Contrast Checker. Here you can enter hex values and get a representation of what it looks like, as well as get the contrast ratio and whether it meets the requirement. It is level AA that applies as a minimum requirement in Norway.

Keyboard visible focus

All functionality must be operable through the keyboard. Typically, this means that you should be able to “tab” through the page using the tabulator key. As you “skip” through the page, the items need to be highlighted so you know your whereabouts on the page and can easily navigate you where you need to go.

Three blog posts, the first one marked with an outline.
An element is marked by using the Tab key. Then the Enter key can be pressed to navigate.

To test this, go to any web page of your choosing and press the tabulator key. Does the tab key take you through the functionality and can you navigate through the page only by using this key?

Bypass blocks

This success criterion is intended for allowing the user to navigate and jump directly to the main content by skipping blocks. The site’s menu is typically at the top of the page, and it can be time-consuming for a visitor who only uses a keyboard to “tab” through the menu on each page.

A commonplace solution is to insert a hidden link at the top of each page, which appears at the first “tab” click you make. This link navigates you down to the main content of the page.

A webpage with a "Skip to content" quicklink in the upper left.
The link “Skip to content” becomes visible the first time you press the Tab key.

Test this out by visiting any website and press the tab key. Does a shortcut to the main content appear?

Headlines and prompts

Headings and prompts should be descriptive of the content presented on the current page. Good text structure is important for readability. This includes, among other things, a clear visual difference between headings of different levels, that body text is clearly different from all headings, and that the code is semantically correct. The page title should be encoded with the element <h1>, then subheadings with <h2>, <h3>, down to <h6>.

Three headlines with paragraphs underneath.
Different levels of headlines with their respective HTML tags.

Consistent identification

Elements that have the same function across multiple pages should be designed equally. This means, for example, that text links that take you further on the same site should have one particular look, and buttons that perform one action should have another particular look. This is important to avoid user confusion, and makes it easier to know what to expect when navigating the page.

Three underlined text links and two yellow buttons.
Elements with similar functionality look the same.

Are you unsure whether your website, app or solution meets the universal design requirements? Contact us, and we will help you.

This site uses Google Analytics to collect cookies. Cookies are used to guarantee full site functionality, enable the personalization of content and can be used for the delivery of advertisement or for analysis purposes. To view our full privacy policy, click here.

OK!