Menu

Accessibility & Nordic Cool

Accessibility &
Nordic Cool

By using the Nordic Cool color palette and the NC4 Web library you meet some of the accessibility requirements “for free”. This page is meant to help you understand which requirements are met by using these resources and what you need to think about yourself when you develop your product

Accessibility & Nordic Cool

Ticking the boxes

To make this as easy as possible, we have gone through the accessibility checklist which all teams in Visma will use to make their self-assessment. If you have any questions, please reach out to us via ux@visma.com or through #sig-web-library on Slack

Bronze requirements

This is the basic level. Using good UX and Nordic Cool you might meet these requirements already. View the full checklist here, including explanations, examples and Jira issues.

Show/Hide
Description
Level

OK

Not OK

N/A

Jira issue / comment

1. The purpose of form input fields is clear
AA

https://jira.visma.com/browse/NC-433

2. Presentation does not rely solely on color
A

https://jira.visma.com/browse/NC-434

3. Non-text contrast ratio is at leas 3:1
AA

4. Information on hover can be dismissed or made sticky
AA

Depends on implementation by each developer team

5. Contrast ratio between text and background is at least 4.5:1
AA

6. Images of text are not used unless they are essential or the user can customize them
AA

No components like this in the Web library

7. There are no time limits
AAA

https://jira.visma.com/browse/NC-445

8. No content flashes more than three times per second (with some exceptions)
A

No components like this in the Web library

9. No content flashes more than three times per second (no exceptions)
AAA

No components like this in the Web library

10. There are ways to cancel a started mouse click
A

Default behaviour

11. The size of a clickable item is at least 44 by 44 pixels
AAA

12. Strange or unusual words are explained
AAA

OK in Web library but it depends on implementation by each developer team

13. Abbreviations are explained
AAA

OK in Web library but it depends on implementation by each developer team

14. Users with nine years of school can read the content
AAA

Depends on implementation by each developer team

15. Elements do not change when they receive focus
A

16. Elements do not change when they receive input
A

Depends on implementation by each developer team

17. Menus are used consistently
AA

OK in Web library but it depends on implementation by each developer team

18. Icons and buttons are used consistently
AA

OK in Web library but it depends on implementation by each developer team

19. Input errors are clearly identified
A

20. Label elements and give instructions
A

We provide examples but it depends on implementation by each developer team

21. Suggest fixes when users make errors
AA

We provide examples but it depends on implementation by each developer team

22. Reduce the risk of input errors for sensitive data
AA

https://jira.visma.com/browse/NC-435

Silver requirements

This level focuses on the product being keyboard accessible, responsive, and having a clear navigation. View the full checklist here, including explanations, examples and Jira issues.

Show/Hide
Description
Level

OK

Not OK

N/A

Jira issue / comment

1. The system can be used in both landscape and portrait orientation
AA

Our components are responsive, however, some of this work falls on the developer teams as elements need to work together.

2. The purpose of non-input elements is clear
AAA

3. The content adapts if the user changes the orientation of their screen
AA

4. Audio is not played automatically
A

5. Audio is clear for listeners to hear
AAA

6. Images of text are not used at all (except for logos)
AAA

7. Most of the system can be used with only a keyboard
A

8. When using a keyboard, there is no risk of becoming stuck
A

9. Time limits have way for the user to control them
A

10. Moving content has a way for the user to control them
A

We have versions of components which don’t use animations. We don’t have large elements with animations in our library.

11. Don’t interrupt the user unless it is essential
AAA

Depends on implementation by each developer team.

12. If there is a risk of data loss due to the user being inactive, the user is warned or the data is preserved for at least 20 hours
AAA

13. Break up content with headings
AAA

14. Use helpful and clear page titles
A

They are clear in the library, but the developer teams need to make sure this is the case in the products.

15. The focus order is logical and makes sense
A

https://jira.visma.com/browse/NC-436

16. Every link’s purpose is clear from its context
A

The links are clear in the library, however, it is up to the developer teams to make sure this is clear in products.

17. Offer several ways to find pages
AA

https://jira.visma.com/browse/NC-438

18. Content in headings and labels is clear
AA

Depends on implementation by each developer team.

19. Keyboard focus is visually clear
AA

20. It is is clear to the user where they are in the system
AAA

21. Page has a language assigned
A

22. The user is told if the language on a page changes
AA

23. Detailed help and instructions is available
AAA

Depends on implementation by each developer team

24. All elements should have appropriate attributes for accessibility
A

Gold requirements

This is the target level in Visma. Reaching Gold level, your Product is a AA-certified according to WCAG 2.1. The Nordic Cool colour palette has met these requirements since 2014. View the full checklist here, including explanations, examples and Jira issues.

Show/Hide
Description
Level

OK

Not OK

N/A

Jira issue / comment

1. Provide text alternatives for non-text content
A

https://jira.visma.com/browse/NC-441

2. Provide an alternative to video-only and audio-only content
A

3. Provide captions for videos with audio
A

4. Video with audio has a second alternative
A

5. Live videos have captions
AA

6. Users have access to audio description for video content
AA

7. Markup for headings, structural elements, lists, and tables is used correctly
A

8. Present content in a meaningful order both in code and visually
A

9. Instructions in the UI don’t rely on solely on shape, orientation, color, size, location, or similar
A

Depends on implementation by each developer team.

10. The user has a range of options to customize text styling
AA

https://jira.visma.com/browse/NC-443

11. Text can be resized to 200% without loss of content or function
AA

12. Character key shortcuts can be customized or turned off
A

Depends on implementation by each developer team.

13. A way to skip content is available
A

https://jira.visma.com/browse/NC-444

14. The user is not required to perform gestures with two or more fingers at once
A

15. Labels contain the same text that is presented visually
A

16. There is always an alternative to touch-based or motion-based interaction
A

17. There are no major code errors
A

18. Status messages are able to be viewed by users using assistive technologies
AA

Platinum requirements

Above and beyond! You only need to meet these requirements if your customer specifically asks for it. This level focuses on extended support for video and audio content, visual presentation and full keyboard support. View the full checklist here, including explanations, examples and Jira issues.

Show/Hide
Description
Level

OK

Not OK

N/A

Jira issue / comment

1. Provide sign language translations for videos
AAA

2. Provide extended audio description for videos
AAA

3. Provide a text alternative to pre-recorded videos
AAA

4. Provide alternatives for live audio
AAA

5. Contrast ratio between text and background is at least 7:1
AAA

6. The user has a range of options to customize presentation of blocks of text
AAA

7. The user can operate the entire system using a keyboard
AAA

8. If the user is logged out automatically, they can resume without loss of data
AAA

9. Animations triggered by interaction can be turned off
AAA

10. Every link’s purpose is clear from its text
AAA

11. The system does not restrict which kinds of input technologies are used
AAA

12. Words which meaning is unclear without hearing them spoken are explained
AAA

13. Elements don’t change unless initiated by the user
AAA

14. Reduce the risk of all input errors
AAA

Nordic Cool color palette

The color palette

The Nordic Cool color palette has been AA compliant since 2014. As a development team, what is important to remember here, is that you are only compliant if you implement the colors as they are intended to be implemented – and this is crucial, especially when you create custom component for your products.

In the NC3 and NC4 Web libraries, all components use the color palette as intended. In other words, if you are styling your components like that or using them directly, they are AA compliant.

To make sure you are using the color palette correctly, we have created a color palette guide (also available in the overview files in the Figma toolkit).

 

Check out the guide

 
Contact us at
ux@visma.com

What happens after you contact us?

Once you have contacted us, we reach out to learn more about your request.

We will create a task according to your specifications and assign a suitable designer who will follow up with you throughout the design process. If you need other design expertise we might connect you with the UX Best Practices or UX Studio teams.

This site saves certain data to enhance the user experience. By using ux.visma.com you approve this. More info

This site uses cookies, which collect information about how you interact with the site. In combination with the information you provide, we create a profile so that we can show relevant content just for you.

By accepting, you allow us to collect and process your personal data as described.

Close