Proper Content and Page Structure

The following tips are meant to help CMS users with day-to-day maintenance of basic content on their websites.

Paste as Text

If you paste content from a document or email into Modern Campus CMS, you will likely get a bunch of bad code added behind the scenes that will effect how your webpage will look at function. To avoid issues, try clicking the “Paste as Text” button before pasting your content or use the Ctrl + Shift + V key combination.

The negative to pasting as text is that you will have to do some formatting manually (adding bold, adding links, etc). However, this will help to ensure that your website meets brand and accessibility standards and works correctly on all devices.

Headings

Headings play a key role in accessibility requirements and general page usability. It is important to use proper HTML headings instead of bold paragraphs or single lines of text and to not use the heading styling when the content is not a heading. To apply a heading style to a line of text, put your cursor inside of the line of text and then select a heading level from the paragraph dropdown menu in the Modern Campus CMS editor. The same method working in other online applications, such as Google Docs. For text that you want to highlight that is not actually heading content, use the font styles in the Styles dropdown menu of the Modern Campus CMS editor instead.

Heading Order

Headings must follow a logical order to be compliant with web accessibility requirements. Your page’s title is automatically the H1 of the webpage. Any headings that you use should begin with H2. If you “nest” headings—in other words if you have a subheading of a heading—you should not skip heading levels. If you have an H2 and you want to follow it with with a subheading, use an H3. If you follow that with a subheading of “equal weight”—use an H3 again. A subhead of a subhead would be an H4. Once you are done with subheadings, you can return to the H2 level. For example:

Heading 2 Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus. Suspendisse vitae malesuada velit, ut ullamcorper sem. Sed ut dignissim tortor. Nullam eu lectus sapien. Cras at nulla nec nisl posuere elementum. Nam mi nibh, consequat vitae placerat non, blandit id est. Maecenas vitae massa et enim rhoncus pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Heading 3 Subheading Here

Heading 4 Subheading Here

Heading 2 Subheading Here

You should not use headings to achieve visual-only results. For instance, if you have an announcement that you want to stand out, but which is not a heading for the content afterward—you should not use a heading. Always think of screen reader users when you are adding headings to your webpage.

Headings Inside of Right Sidebars and Sliders

When using a right sidebar or slider, please consider the title of the sidebar or slider to be an H2. Any headings that you add should begin with the H3 heading, because any content added would be considered a subheading of the title of the sidebar or slider.

Descriptive Link Text

Links are added to text using the Insert/Edit Link icon. If you are linking to a URL that is not in the CMS or one that you do not have access to edit in the CMS, just copy and paste the URL into the URL field.

For links to your pages within the CMS, click the file chooser, navigate to the correct folder, and select the file. If you are linking to a page, you will typically choose the index.pcf item.

When adding text-based links within a webpage, carefully choose which words to hyperlink. The general rule of thumb is to always link keywords. Linking keywords will:

help improve search engine optimization
give more details to users with functioning vision who are scanning your webpage
provide context to individuals without functioning vision who may be using a screen reader or other assistive technology

Linked text should make sense out of context. This is because screen readers often navigate from link to link, skipping the surrounding text. They will read each link out loud, in sequential order. Visit the Descriptive Link Text page on the Accessible Technology website to learn how to write descriptive link text.

Screen Reader Demonstration

Watch this screen reader demonstration that shows the importance of using proper headings and descriptive link text.

Ordered / Unordered /Bulleted Lists

If you want to list items or links, with or without numbers, please use an unordered or ordered list. This helps screen readers used by those with disabilities and helps search engines understand your content. When creating an unordered or numbered list, you do not need to also include paragraph tags.

Correct Code

<ul class="none">
     <li>Bullet 1</li>
     <li>Bullet 2</li>
     <li>Bullet 3</li>
</ul>

Incorrect Code

<ul class="none">
     <li><p>Bullet 1</p></li>
     <li><p>Bullet 2</p></li>
     <li><p>Bullet 3</p></li>
</ul>

If you do not want to use bullets, you can add a class of “none” to your unordered list. This can be done manually in the code, or you can use the List Unordered Classes snippet.

Correct Code

<ul class="none">
     <li>Shortcut/Link 1</li>
     <li>Shortcut/Link 2</li>
     <li>Shortcut/Link 3</li>
</ul>

Incorrect Code

<p>Shortcut/Link 1</p>
<p>Shortcut/Link 2</p>
<p>Shortcut/Link 3</p>

Use of ALL CAPS

We have systematically removed the use of ALL CAPS from our web design due to growing concerns that it is difficult to read. Please keep this in mind as you create headings on your websites. If you must use ALL CAPS, please do so sparingly.

Replace & with “and”

Do not use ampersands where they are not appropriate—spell out the word ‘and’ instead. This includes in headings, titles, and sentences. The official name of most departments and buildings do not include an ampersand. In addition to improving readability and professionalism, avoiding using “&” will also ensure that your webpage content is compatible with other technologies.