Large font CSS style
The information in this session is to raise awareness for all contributors, writers and editors.
We have introduced a new font style called ‘Large’. You must use this when an introductory paragraph needs to have a larger font.
There are examples of introductory paragraphs with larger fonts on news articles, Course pages and other content pages.
Why we have made the change
Historically, when working in Sitecore, editors have used a Heading 3 (H3) style to make an intro paragraph appear with a larger font. However, this renders the page inaccessible. We have created a new style with a larger font based on the ‘normal’. When you use the new ‘Large’ style instead of a heading style, the page will be compliant with accessibility regulations.
A bit about headings
Assistive technology uses headings to navigate the page content. The user can pull up a list of headings and sub-headings to select the part of the page they are interested in. This can only happen if the page is marked up with the correct heading styles.
If Heading markup is not used, then assistive technology can only read from the top of the page and through the entire content. The user will not be able to select the sections that they are interested in. This becomes a cumbersome experience, and you will lose the users engagement.
Unfortunately, using a H3 for the introductory paragraph usually knocks the heading reading order out of sequence and makes the page inaccessible.
Using the new style
We have created a new font style called ‘Large’. Please use this for introductory paragraphs instead of heading styles. The ‘Large’ style gives the required visual impact without interrupting the page structure.
It is not compulsory to have your introductory paragraph in a larger font. When you do choose to do so, please use the correct style.
How to apply the style
In Sitecore, and when you are adding 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 ‘Large’
The paragraph you have highlighted will become larger.
What to do now
The correct use of heading styles is paramount to the accessibility of a webpage, and we must comply with the regulations.
New pages (for Sitecore editors)
When building a new page in Sitecore, it must:
- follow the correct heading structure - do not use headings out of sequence
- use the ‘Large’ CSS style when required for introductory paragraphs
- comply with the other standards in the in the Web content style guide
New pages (for all content contributors)
When writing a new page of content, you must:
- write and structure your page with the user in mind
- break up large chunks of text with headings, subheadings and short paragraphs
- comply with the other standards in the Web content style guide
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 misuse of heading styles and change them to the appropriate hierarchal structure
- check for introductory, and other, paragraphs that are using the H3 style, and change them to the ‘Large’ CSS style
- comply with the other standards in the in the Web content style guide
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.