Universal design is necessary for some, good for everyone. Employees who work with NTNU's webpages must therefore create the content for the pages so that all users can acquire the information in a reasonable way and in accordance with legal requirements.

Norsk versjon - Universell utforming av innhold på nett

Looking for something else? Topic page about web | Pages labeled with web

Advices on what you can do

• Suggested solutions for web pages. (UUtilsynet, The Authority for Universal Design of ICT) – headings, images, colour, contrast, links.
• Suggested solutions for web pages (in Norwegian). This page is more comprehensive.

Always remember to check new pages and updates in mobile view.

Below you will find a supplement for requirements that we should pay extra attention to.

Headings

All headings must be easy to read and scan on the page. It's wise to include the most important keyword in the heading.

All headings should be set with <h1>, <h2>, <h3>, <h4> (heading tags) in logical order. This makes it easier for users to skim the content. On external web pages, you always start with <h1>. On wiki pages on Innsida, you first write a short introduction, and then start with <h2>.

Please note: Headings are a very important part of on-page navigation. Headings are not a visual, graphic element. Therefore, you must not skip heading levels or, for example, insert <h1> in the middle of the page to make it «nice».

Link names

Writing good link names (in Norwegian)

Don't write «Read more» etc. as a link name. Screen readers for the visually impaired list links and read the link names. A page with «Read more» link names will make it impossible for the user to know what the links are about.

Images, videos and sound clips

• Publishing images online
• Audio only and video only (in Norwegian)
• Publishing videos and sound online
• Add video to your web page in Liferay (in Norwegian)

Interpretation of video is required from 1 February 2024. There are several ways to visually interpret video (in Norwegian).

The requirement for visual interpretation does not have retroactive effect, so videos that were recorded and published before the requirement was introduced are not affected by this. At the same time, we must use discretion and not leave old videos without visual interpretation for a long time on our web pages.

Alternative text

Text option must be offered for non-text content (in Norwegian).

This can be images, graphics, video, audio clips. The text alternative must provide the same information or fulfill the same purpose as the non-textual content, and it must be placed in close connection with the non-textual content.

Images

Alt-text (alternative text) should describe the image motif in an informative way. E.g.: Two researchers demonstrate robotic technology.

If the image links to a page, the alt-text must describe the purpose of the link, i.e. where the link goes to. E.g.: Web page with an overview of study programmes.

If the image is only decoration, leave the alt text field empty. Psst, preferably do not use decorative images, as far as possible, images should provide more information.

Graphics

Graphics must have a text alternative with sufficient information from the graphic placed next to or below the graphic.

Videos

Videoer skal ha undertekst.

Sound clips /podcasts

Audio clips and podcasts must be transcribed and the text must be attached as a file or text on the web page.

Tables

How to design tables (in Norwegian).

Tables must be used for tabular data, i.e. numerical and/or logically comparable data that must be listed.

Do not use tables for graphic design.

Tables should be made so that data in the table is read from left to right.

• Mark the table's heading with <caption> (instead of a regular heading)
• Mark header cells in the code with <th> (don't use <td>). The user can then jump from heading to heading in the table.

Documents

The same requirements apply to websites and documents that are linked on websites.

• Universal design of documents (in Norwegian)
• Universal design of PDF

Tips:

• Predefined style facilitates the work of giving the document a universal design.
• Use Norwegian language selection in the document for Norwegian text, English language selection for English text.
• Use the right heading levels. Good structure allows the user to navigate in the document.
• Correct use of tables.
• Images, graphics and illustrations must have a text option.
• Good contrast and correct use of colors in graphics etc. (colour-blind people have problems with red-green, for example).
• Save file with correct formatting.
• Word, PowerPoint and Acrobat have built-in accessibility controls that can be used to check the document.

Quotes

Quotes must be coded. The code is added automatically when using the quote function in the menu editor. Mark the text to be quoted and click on the quotation marks icon.

Do not enter quotation marks (" " « »), hyphen, dash etc. to quote.

Language code

All web pages have an overall language code of Norwegian or English. Occasionally there is a need to include, for example, a title, a sentence, a bullet point in English on the Norwegian page (and vice versa). Then this section must be coded as English language. Thus, screen reader users will have the section read aloud in English.

The code snippet lang="en" is used on a Norwegian web page and lang="no" is used on an English web page. The snippets are placed directly on the html element, here are some examples for an English page:

• Sub heading: <h3 lang="en">Dette er en overskrift</h3>
• Section: <p lang="en">Dette er litt tekst.</p>
• Quote: <blockquote lang="en">Dette er et sitat.</blockquote>

Code in general

Coding standards and validation

The code must be correct on the web page, in each individual widget. Therefore, always check that the code is correct when you create new content or edit your content on the page.

Be aware that no heading code is left where there should be a space or a heading code inside the image code.

Use Ctrl+Shift+-V to paste text from other sources and documents. This is to "clean" the code. Don't just use Ctrl+V, because then the code might be wrong.

NTNU’s guidelines

NTNU's guidelines for universal design of digital learning resources

If you are going to buy, develop or work with information and communication technology (ICT) at NTNU, you must make sure that the product or publication is universally designed. Everyone must be able to use the solutions, get information and solve their tasks.

Regulations

WCAG = The Web Content Accessibility Guidelines.

All in Norwegian:

• UUtilsynet: The WCAG requirements thematic sorted
• UUtilsynet: The WCAG requirements with term explanations and more
• UUtilsynet: Proposed solutions for the requirements in WCAG

UUtilsynet enquires the regulations: The regulation on universal design of ICT solutions, European Accessibility Act and the WCAG standard.

Equality and Anti-Discrimination Act