Marking nodes in tree as important

Question

I’m working on kind of explorer which has a tree hierarchy which consists of two types of nodes, first type is a category and second is a resource. Category can contain only resources and resources can’t have children. Each node is represented by image and title.

User is able to click on a resource and change it in preview part of the explorer. Some operations are always safe but there are also operations that are not very safe for certain resources. It depends on some property that resource has or has not.

The new feature is to somehow indicate that resource is important meaning when interacting take more care than usually.

First thing I thought of doing is to highlight the title with some color, which is ok but then there are already highlighted titles meaning something else. If I choose a different color then I think I would need some kind of map to understand which color means what. Also if two things apply to same resource, which color to choose.

Second thought is to add a small lock symbol on resource image (all resources have the same image today). I’m worried here that it might be too small to notice.

Third thought is to add (sensitive) to resource title where applicable.

In my opinion the best thing is to combine second and third option.

I could use an opinion on this or any other ideas how to successfully pull this off.

Answer 1

Short Answer

Why not use all three? Colour, icon and text in brackets would be the best solution overall.

Long Answer

Don't use colour alone, if someone is colour blind colour alone is not useful in the slightest to them.

What you suggest is indeed one of the best options. Use an icon AND some text to describe what the icon means.

This makes your solution both pleasing on the eye but also accessible for everybody.

For example if you use an icon only then people with learning difficulties / image association impairments (where they cannot relate an abstract graphic to a real world item) can still read your text in brackets to know that this entry is different.

Make sure to hide the icon from screen readers as you are using text in brackets (using aria-hidden="true" if this is a web application) as otherwise you would be announcing the same information twice (in the icon and then in the text in brackets), which is unnecessary.

Going back to colour, at this stage (with an icon and some text in brackets) you could (and probably should) also reintroduce a colour to highlight the item.

Just because some people cannot see colour doesn't mean other people won't benefit from it. Yet again people with association impairments or dyslexia may find a red border / background on a "sensitive" item a useful visual clue.

If you ever have to choose only one of these three options then

text in brackets > icon > colour in terms of accessibility.

additional thoughts

Yet again assuming this is a web based application.

For your icons I would suggest using inline SVGs. Although things have improved icon fonts such as "fontawesome" can get replaced if a user has a plugin on their browser to change fonts to make a site easier to read (i.e. dyslexia). This can turn your icons into missing glyph squares.

This problem isn't as bad as it used to be as plugins have improved but older plugins still have this problem. Inline SVGs also tend to be better for page load speed, are more flexible for colouring options etc. but I digress.

Another thing to be aware of is colour contrast (if you use colour in addition to a label and icon).

Use a Colour Contrast Checker to check the contrast.

If you use a red background (for example) then make sure text is 4.5:1 (ideally 7:1) contrast ratio and that the red background contrasts with its surroundings with at least a 3:1 ratio (to make sure you pass Non-text contrast WCAG 1.4.11).

Better yet make your icon a decent size and make that a different colour or add a border to the item as that means only worrying about one colour contrast requirement.