Site settings
Change the appearance of the site to suit your preferences
Accessibility
Universal design is based on the idea that services should be accessible to everyone, regardless of age, ability, background, and education. Equality and equal conditions are fundamental to a democracy and are just as important in a digital everyday life.
The EU's web directive on universal design of websites and mobile applications (WAD) is now part of Norwegian law. The regulation on universal design of ICT points to minimum requirements for web and mobile solutions. These are requirements we have had in Norway since 2014, and from February 1, 2023, the standard WCAG 2.1 is applicable.
Design requirements
There are many rules to understand, and it can be difficult to get an overview of how to relate to them and what level to aim for. We at Vy have a requirement to follow all the success criteria under WCAG 2.0 and 2.1. Some of these requirements directly affect design, layout, function, and flow. While other requirements relate to code, setup, and handling.
In short, all interactive elements should have a good contrast against the background, there should be clear and correct 'states'. Text should be readable regardless of placement. Design and functionality should work across sizes and orientations of screens. Navigation and flow should be consistent across all platforms, and functionality should be correctly labeled.
Below you will find a more detailed list of the most important requirements and rules that apply to design:
Design
Contrast
Text and images of text must have a large enough contrast against background colors, whether it's in a button or a text field. It must have a minimum contrast ratio of 4.5:1 against the background.
Exceptions:
- Large text size and images of large text size must have a contrast ratio of at least 3:1.
- Text or images of text that represent an inactive component, that are purely decorative, that are not visible to anyone, or that are part of an image containing other significant visual content.
- Text that is part of a logo or trademark name is not subject to the contrast requirements.
Discernable states
Design in such a way that it's easy to identify components and important graphical elements and their states. For example, appearance changes during mouse-hover, touch, drag, or focus marking. Ensure that the naming of styles is consistent across platforms. There is a requirement that all interactive content receives visible focus when navigating with the keyboard. There is also a requirement that non-text content should have a contrast ratio of at least 3:1 against adjacent colors.
Exceptions:
- Inactive components
- Graphic objects that do not convey essential information or are purely decorative.
- Images
- Appearance changes that are user-controlled
Usage of color
Although color can be useful for presenting information in a simple way, it should not be the only way to convey information. When using color to differentiate between elements, there should always be other elements like text or shape that help the user identify the difference. An example is the distinction between two different train lines that go between the same stations. Here, it would be difficult to differentiate by using only line color, therefore it is necessary to have, for example, a line ID.
Images of text
If the technology being used can handle the visual presentation, text is used instead of images of text to convey information.
Exceptions:
- The image of text can be visually altered to fit the user's needs
- A specific presentation of text is necessary for the information to be conveyed
Navigation
Page titles and headings
It's important to have useful and clear page titles. They should be descriptive of where you are in a flow or what content one can expect. Together with clear headings and descriptive guiding texts, this creates a foundation for navigation on web and app. Remember that there is a difference between internal language and what users experience as understandable.
Consistent navigation
Navigation mechanisms that are repeated on app and web must appear in the same relative order each time they are repeated, unless the user initiates a change. This is also important to consider for consistent placement of navigation elements. This can involve always having breadcrumbs and steppers in the same place, and ensuring that the order of elements in the submenu is the same across different sections."
Inconsistent navigation can occur when menu items change their position based on where you are located.
Consistent identification
Elements that have the same functionality across multiple pages are designed similarly, this applies to both web and app. Where non-textual elements are used and the element can be used for different functionalities, it is important to have additional text to distinguish between them
Form elements that look similar need a clear label so that they can be easily distinguished from each other.
Link purpose
The purpose of each link can be determined from the link itself or from the link text combined with programmatically determined link context. The exception is if the purpose of the link would be ambiguous to all users.
Multiple ways to navigate
There is more than one way to locate a page within a confined area. The exception is if the page is the result of, or a step in, a process. Examples of use may include a search function, alphabetical list, or site map that supports navigation in the header and on subpages. In an app, it could be an entry point from a hamburger menu along with a bottom menu or search function.
Layout
Orientation
The user must be able to choose whether the content is displayed in landscape or portrait orientation. The purpose is to ensure that content on mobile surfaces is displayed in the direction the user prefers, either portrait or landscape. The requirement ensures that the content is displayed in the same direction/view as the device is in.
Exceptions:
- Cases where a specific screen orientation is necessary (bank check, piano app, slides in a presentation).
- VR, AR, games, and other functionalities where it is not practical to rotate the screen orientation.
Font size and line height
ext can be changed to 200 % size without loss of content or functionality. Except for captions and images of text, text can be enlarged up to 200% without the use of compensating technology and without loss of content or functionality.
Text spacing must be able to be overridden to make the text easier to read. The purpose is to ensure that users can override to make the text easier to read. This applies to line height, space after paragraphs, spacing between letters in a line or block, and spacing between words.
Exceptions:
- Languages or alphabets that do not rely on line spacing or spacing between words
- Text that is not affected by adjusting style properties in HTML. For example, canvas in HTML is considered an image of text.
- Captioning of video and other media
Responsive design (Reflow)
The goal is to ensure that users can enlarge the content and read it in a single column. When content is zoomed in to a 400 percent view, it reflows into one column. Then it's not necessary to scroll in more than one direction and the content becomes easier to read. If the content stretches beyond the frames of the browser window/screen, the user must scroll horizontally to read the content.
Support for 'reflow' is also known as responsive design.
Exceptions:
- Graphics and video
- Data tables
- User interfaces that have toolbars
Action
Error identification
For errors that are detected automatically, you must indicate where the error has occurred and provide a text description of the error. If an input error is detected, the element that the error affects is identified, and the user is notified
Error prevention
For services that involve legal obligations or require financial transactions from the user, that change or delete user-controlled data in data storage systems, or that send responses to tests performed by the user, at least one of the following points applies:
- Reverserability: Any process can be reversed
- Control: The system checks if the data entered by the user contains input errors, and the user is given the opportunity to correct any errors.
- Confirmation: There is a mechanism for reviewing, confirming, and correcting information before it is submitted.
Status messages
Users should receive status messages about important changes on the website without causing a context change. This specifically applies to cases where new content is added to the page without causing a context change for the user. Context changes interrupt the user by changing focus and capturing the user's attention.
There are two criteria that together determine whether something is defined as a status message. 1. The message provides the user with information about something (an action that has been completed, a waiting state in the content, progress of a process, or the presence of errors). 2. The message is not delivered via a context change.
Examples of status messages:
- Error Message When Filling Out Information: Informing the user about any errors encountered during the input process, such as missing or incorrectly formatted data.
- Parts of the Content Are Loading: Notifying the user that certain parts of the page or application are still in the process of loading.
- Form Submission: A message indicating that a form has been successfully submitted, or if there were issues with the submission.