CSS style called ‘Important’
The information in this session is to raise awareness for all contributors, writers and editors.
We have introduced a new font style called ‘Important’. You must use this when an author wants to emphasise an important message.
Why we have made the change
Historically, important information has been presented in many different visual styles across the website. The most common approaches make use of boxed text, or coloured text, or entire paragraphs or sentences of bold text. But, these approaches are not accessible.
We have created a new style to emphasise important information. The style is based on the ‘normal’ style, indents the left and right margins, and applies a solid bar to the left-hand margin. When you use the new ‘Important’ style, the page will be compliant with accessibility regulations.
The ‘Important’ style gives the required visual impact without interrupting the page structure.
Using the new style
We recommend that you start the paragraph with the phrase ‘Please note:’ or ‘Important:’ so that screen readers are also aware that the text is important. Some existing content already use these phrases. The opening phrase must be in bold.
Consistent use of this style across the website will become a content pattern that users will recognise. This will engage and encourage them to read your essential information.
Please note:
This is an example of how the CSS ‘important’ style will look on the page. You can use bold to emphasise key words or phrases but do not overuse bold, because it lessens the impact of your message.
How Sitecore Editors can apply the style
In Sitecore, and when you are formatting your page content in the Rich Text Editor, you will need to:
- highlight the paragraph
- go to the toolbar of the Rich Text Editor
- find the ‘Apply CSS Class’ tool and select its down arrow to show the list of CSS styles
- select ‘Important’
The paragraph you have highlighted will indent and show the solid bar beside the left-hand margin.
It may not render properly in the Rich Text Editor, but the solid bar should be the full length of the left-hand margin when you view page in Preview and when the page is published.
If the paragraph does not start with ‘Please note:’ or ‘Important:’ or something similar please:
- add this phrase to the start of the paragraph
- make the phrase bold
- use a soft return to start the important message on the next line
What to do now
When required, start using this style immediately.
It is important not to overuse the style. Keep the style for essential and important information only. Too many instances on a page will reduce the emphasis that you are trying to impart, and users will ignore something that is overused.
New and existing pages (for all Content Contributors)
When writing a new page of content, or amending an existing page’s content, you must clearly mark up your content so that your Editor is aware of your intention to emphasise.
New pages (for Sitecore Editors)
When building a new page in Sitecore, you must apply the ‘Important’ CSS style, when required. This includes correcting content that an author has supplied in the wrong format. Examples of the wrong format include an entire paragraph of bold, or coloured text, or text with a coloured background, anything that the authors intend to stand out because it is important information.
Existing pages (for Sitecore Editors)
Any live pages that you contribute to, or manage, within your section will need to be made compliant.
You must check existing pages for content that is incorrectly emphasised and change it to the appropriate format.
Become familiar with the writing and accessibility standards
If you write content for the web content but do not publish in Sitecore, you are a Content Contributor and still have a role to play in making our content accessible.
If you are an Editor or an Author who publishes their own work (or the work of others) in Sitecore, you must make sure that the correct styles are applied to the content.
Whether you are a Content Contributor or Editor, or both, you must make yourself familiar with the tips and techniques in the Web content style guide and the Making your content accessible guide.
Our guides explain the reasons why our content needs to be legally compliant with the accessibility regulations. They will also help you to understand why presenting your content in certain ways will make it more usable and engaging.