It's important for accessibility that abbreviations tags are used to provide context for users with AT (Accessibility Technology) devices.
Use the abbreviation button on the Full HTML text editor menu to wrap text in an abbreviation tag or you can do it directly in the source code. When using the abbreviation button just select the text, click the button and add the title in the explanation field in the window that pops up.
Below are a few best practice examples.
Acronyms that are known and used a proper nouns in writing or conversations do not need to have an abbreviation title which would normally be required to convey additional context e.g. USA, US, U.S., WHO or UK can simply be wrapped in an <abbr> tag e.g.:
This way a screen reader will read it as letters and not try to pronounce the term.
In other cases such as where context is required, use the title attribute option within the <abbr title=""> tag to ensure that the semantic meaning of an abbreviation, symbol, scientific notation or acronym is conveyed e.g.
<abbr title="et cetera">etc.</abbr>
25 °<abbr title="celcius">C</abbr>
<abbr title="Ontario Public Service">OPS</abbr>
Adding a button
You can change any hyperlinked text in the copy to a button style using the Full HTML editor. To add a button in the body copy do the following:
- highlight the word in the copy which will become the button label.
- Use the hyperlink button on the editor toolbar to add the link the button will point to.
- Use the Styles drop-down to select the Button style. The button default colour will be dark blue, but this will get changed based on the sector colour theme of the page.
This is an example:
To participate in this event Register Now!
Adding font awesome icons
As part of our framework the Font Awesome (version 4.7.0) icons can be utilized throughout the site. You can add the info icon inline with copy that provide information by creating a single space, highlighting it and applying the style from the styles drop-down on the editor toolbar.
To add additional Font Awesome icons in copy use the following code. The <i> tag that Font awesome uses should be replaced by a <span> tag that wraps a non-breaking space ( ). Note: CKEditor will remove empty tags as well as <i> tags.
The example below produces a square Linkedin icon
<span class="fa fa-linkedin-square" aria-hidden="true"> </span>
For a full list of available icons visit Font Awesome's website.
The following functions assist with quick manipulation of content or elements on a page.
Theme Colour Default
This function will reset the sector/industry colour theme for a page to the default OFB dark blue theme colour.
<?php theme_colour_default(); ?>
HTML Element Override
This function will override the contents of any specified HTML element on the page. The function accepts three arguments:
$html_wrapper: The HTML element(s) to target
$new_label_en: The replacement HTML content for the named element on an English page. Using NULL will remove the element from the DOM.
$new_label_fr: The replacement HTML for the named element on a French page. Using NULL will remove the element from the DOM.
<?php html_element_override($html_wrapper, $new_label_en, $new_label_fr); ?>
Enter the above argument values in quotes.
<?php html_element_override('#participant', 'Partners', 'Partenaires'); ?>
This would remove the HTML element with the attribute id="participant" .
<?php html_element_override('#participant', null, 'Partenaires'); ?>