Universal design


Omega guidelines for design and universal accessibility. This is to be used across all Omega systems. For brand related questions check the Omega Brand guidelines.

Last updated 1.June.2020
WCAG 2.1
Elmer 3.0



General guidelines

When working/developing our systems we will follow the guidelines for WCAG 2.1 to our best effort. You can read about WCAG in more detail at uu.difi.no (Norwegian) or WCAG quick referance guidelines (English). For forms we follow Elmer 3.0. You can read all the details at brukskvalitet.brreg.no (Norwegian).

  • Any interactive item such as navigation, buttons and inputs needs to be navigatable with only a keyboard.
  • Minimum text size is 0.8rem (13px), suitable for labels and captions while for general text and text-heavy sites we will use 1rem (16px).
  • The user has the ability to increase the size by 200% without losing function.
  • Colored text or text with a colored background need to be tested and approved for (minimum) AA grade in WCAG 2.1 contrast. You can test at contrastchecker.com.
  • All links goal/function needs to be understandable from the link text. (Links where the linked-text says "click here" is wrong. The link-text needs to be explanatory)



Text

Omega uses the font Roboto. Download Roboto Font.
We use minimum text size is 0.8rem (13px), suitable for labels and captions while for general text and text-heavy sites we will use 1rem (16px).

Roboto Regular


<p> This is Roboto Regular </p>

p {

font-size: 1rem;

}

Roboto Medium


<p> This is Roboto Regular </p>

p {

font-weight: 500rem;

}

Roboto Italic


<p> This is Roboto Regular </p>

p {

font-size: 1rem;

font-style: italic;

}

Roboto Italic Medium


<p> This is Roboto Regular </p>

p {

font-weight: 500rem;

font-style: italic;

}



Labels

We'll never share your email with anyone else.

Do

Do

Always label the fields. Placeholder text and information text is optional.

We'll never share your email with anyone else.

Don't

Don't

Dont use placeholder text alone.




Linked text

For more information about universal design, see the video Universal Design of ICT- a better digital life!

Do

Do

Make sure that the link-text uses a phrase that describes what the reader will see after following the link.




Icons

Our systems use the icons from Fontawesome PRO. The icons shall for the most part be used along with a describing text. This is to avoid confusion.
When combing text and icon, the icon shall always come first.

See all icons


Icon position

Do

Do

Icon placed first, to the left.

Don't

Don't

Dont set text before the icon.



Do

Do

Icon first at top, then explaining text.

Don't

Don't

Dont use text over the icon.


Universal Icons

Here are some icons that are so well known that they do not need explaining text, but they do need a tooltip describing its function. If you are unsure if an icon can work alone, then most likely you need explaining text.




Buttons

All buttons needs to be responsive. This means hover effect and cursor pointer. Onfocus (shadow border) shall go away when clicked. In most cases there should only one btn-primary, this is the action most users will want to click.
Btn-outline-primary is used as secondary buttons. If a button deletes something, the user needs to alerted with a confirm-delete window.


Primary and secondary buttons

Do

Do

When using primary and secondary buttons it's more clear for the user what to click.

Don't

Don't

Using just primary buttons makes it harder to understand what the next course of action is.



Button position

Do

Do

Going forward is always to the right of the object, while back is to the left.

Don't

Don't

Avoid having the action taking the user forward on a position indicating back.



Disabled buttons

Do

Do

Add an opacity of 0.65 when a button is disabled and make sure there is no hover or cursor interaction.

Don't

Don't

Dont use a different color to show a disabled button.





Colors

Colored text or text with a colored background need to be tested and approved for (minimum) AA grade in WCAG 2.1 contrast. You can test at contrastchecker.com. Here we have a selection of colors we use. Please note that every color needs to follow the white/black text used in the example. Alert colors are to be used for notifications, alert or buttons. Statistics colors can be used for graphs and diagrams. Disabled objects (buttons/fields ect.) is the only exception for WCAG color contrast.


Omega profile colors

#00AFAA

#F18A00

#004A98

#231F20



Alert colors

#297E29

#99CC99

#F18A00

#F7B966

#C11728

#FF9999

#4F4B4C

#D3D2D2



Statistics colors

#004a98

#1771d1

#2ae8e3

#00afaa

#B3D4D9

#F18A00

#F7af4f

#ffcd00

#c11728

#ff9999

#C693e4

#ffa5f9

#990066

#5a0089

#1e0089

#498417

#83d63d




Forms

All input fields needs an describing label. All fields shown are mandatory. (We do not use * to show if a field is required.) Have a fitting input size depending on the content.


Input fields

Here is some information text related to email.

Do

Do

All fields in the form are required unless stated as optional. Infotext over or under related input field.

Here is an example of information text related to the email field.

Don't

Don't

Dont use * to mark required fields. Have information text under the related field.



Dropdowns


Do

Do

Have a suitable field size to show selected dropdown.


Don't

Don't

Dont have dropdowns with pre-selected options. Dont have the field too small or big for the content.




Radio buttons and checkmarks

Always left side, text on the right. The user should be able to click the whole element (text and button) to trigger the function. Make sure the cursor is a pointer on the clickable element.

Radio buttons


Checkboxes


Toggle switches





Related articles

Placeholder "LocalizeWeb2016" failed