All articles in the ITS Knowledge Base must follow a consistent style and tone. This style guide is intended to provide a set of standards for content and formatting that should be applied to all articles. See Creating Articles for descriptions of various types of articles present in the Knowledge Base.
...
See below for examples of what each Macro title should look like.
Do Do not mix the macros and their names, like, for example, adding an info macro and titling it "Note."
...
When you are instructing the reader to perform an action, such as clicking or entering, you should bold the word that corresponds to the on-screen buttons/clickable elements.
EXAMPLE 1: Click Save My Information to continue to the next screen.
EXAMPLE 2: Enter a personal email address (not your @uconn.edu) in the "Secondary Email Address" field, and click Save Changes.
2.2 – Quotation Marks
When instructing a reader to look for text on their screen, use quotation marks around the words they should be looking for.
EXAMPLE 1: Quotation marks should not be used when looking for text within a button/clickable element (see "Bold Words" above).
EXAMPLE 2: Un-check the box next to "Show Labels for Each Page."
...
All headings should specifically describe exactly what is in that section of the article. Usually in how-to articles, headings are a re-iteration of the article title. (i.e., if the article title is "Accessing Email in Windows.," then the heading should be the same thing instead of something like "Accessing Email" or "Email in Windows." When When applied consistently, headings help readers skim content and understand the article's organization quickly. It also enables macros within our KB to work correctly.
- All article titles should be formatted as Heading 1.
- All second level headings within the article, which mark the different sections within an article (e.g., Article Content), should be formatted as Heading 2.
- Any subheadings underneath a level 2 heading should be formatted as Heading 3, then heading Heading 4, and so on.
To create headings,
- Highlight the text.
- In the toolbar, click the dropdown menu that by default says "Paragraph."
You can choose to add Add headings as you see fit. Ensure that the heading style is appropriate for the level of your heading.
Note title Note All headings, regardless of which type of heading they are ((i.e., Heading 1, Heading 2, Heading 3, etc.) should follow standard capitalization practices for titles – such that the major words in the title are capitalized.
For example, a heading should read "Helpful Functionalities of the Confluence Editing Window" instead of "Helpful functionalities of the confluence editing window."
2.4 – Numbers and Bullets
...
- Use numbers for the steps of a process. Most Howhow-To to and Troubleshooting troubleshooting articles will have numbered steps.
- Use bullets when you are listing items that do not need to be performed in a certain order , or when simply providing information.
- For consistent and easy formatting, use the toolbar to set these styles.
...
Use spacing to show what information belongs together and what is separate.
- Insert one line's worth of space between steps and paragraphs.
For screenshots, leave no space between the image and text it illustrates, but do leave a space after the screenshot to distinguish it from the next step.
Info title Info If you are trying to get lines of text to not have any spacing between them,
- Place the cursor at the end of the preceding line of text.
- Hold down the Shift key.
- Press Enter. The cursor will shift to the next line without spacing.
...
The majority of the articles in the public-facing knowledge base will be Knowledge Base are intended for a lay audience and should be written in plain language. Focus on the task they are trying to accomplish from their perspective and less on the technical language used to describe it.
EXAMPLE:
- Use task-oriented, plain language: Log in on the Single Sign On screen with your NetID and NetID password.
- Avoid an overly technical description: Authenticate into CAS with your NetID credentials.
3.2 – Images
Images can impart a lot of information quickly. However, they can also become outdated quickly and add a lot of length to an article. Choose to use Use an image when it clarifies a more complicated action or conveys a lot of information quickly. When considering how and when to use an image, follow these guidelines:
...
- Use images when the instructional steps are complex or several actions are incorporated into a step or into many steps.
- Ask yourself: Is the image really necessary? Can I just use plain text to get the same message across?
- Avoid using images of text when possible.
Consistency of Image Capture Method
All KB contributors should be using a standard image capturing method . This will to allow for consistency among the KB articles.
For PC, use the snipping tool. Make sure you take your the snip at a high enough zoom so that the resolution is maintained once you place your image into the article. Add call outs outs as necessary in power point (see section 4.2 of this style guide).
For Mac, use the print screen function and crop the image. Make sure that the section you want to crop is not too small and that it will retain a high resolution when you input the image to your article. Add call outs as necessary in power point (see section 4.2 of this style guide).
...
- Screenshots should be big enough to get the point across clearly display image contents without having to click on or enlarge the image. Users should be able to clearly view the image contents without having to click on it.Ensure that
- Ensure that you size the image in Confluence so that it does not extend past the text around it, and so that it is not too small either. Judgement is key here.
...
- Images, especially those with a white background, may get lost on a white page. You should add Add a black border around all images.
...
- Images should always be below the explanatory text that references the image.
Alternate Text
- For images where there is with explanatory text above the imagesthem:
- In this case Because the explanation is already above the image, so to avoid redundancy we will use by using null alt text. To put in null alt text, just simply put double quotes "" into the alt text dialogue box.
- If your image requires the user to pay attention to multiple parts of an the image, please use image call outs (see section 4.2 of this style guide).
- For images that do not have explanatory text above the image:
- In this case, use Use descriptive alt text when you place an image into your article and have not adequately described above the image what the user is supposed to gain from the imageit.
3.3 – Definitions
If you have to include a technical word to make sense of the topic, find a way to define it for the reader. Some strategies include:
...
EXAMPLE: With two-factor authentication, you will login to log into a service with your NetID and password and then verify your identify on a second device.
...
EXAMPLE: You can create an email alias (the portion of your email address to the left of @uconn.edu) that is different from the name originally assigned by the University.
...
On the first mention of an acronym, spell out the phrase, and then follow it with the acronym in parentheses. Example: Many services are behind the Central Authentication Service (CAS). Once you have spelled out the phrase, you can continue to use the acronym.
EXAMPLE: Many services are behind the Central Authentication Service (CAS).
3.5 – Contractions
Avoid using contractions. We use a more formal tone, and contractions are more informal.
3.6 – Capitalization
You should capitalize Capitalize names and proper nouns (names used for an individual person, place, or organization). Words like 'faculty' and 'staff' should not be capitalized.
When you are writing instructions and are referring to a word that is capitalized on the screen or device, you can capitalize the word to be consistent with the user's experience.
- ExampleEXAMPLE: Go to the "My Settings & Devices" section to add a backup device.
If the words you are referring to on the screen or device are in lowercase, you should write the instructions accordingly.
...
In general, use commas, periods, semi-colons, and hyphens appropriately. Avoid exclamation marks, which do not fit the tone of a knowledge base Knowledge Base article.
One common punctuation mistake is to separate two complete sentences with a comma. Make sure to use a period or join with a comma and conjunction.
...
The following words or phrases should be written or used in the following, standard ways when referring to them in your articles. For example, refer to the help center as the "ITS Help Center" or "Help Center," , but do not refer to it as the "help desk" or "husky techHusky Tech."
| Category | Correct Term or Phrase | Do not use | Notes |
|---|---|---|---|
| UConn Terms | UConn | UCONN, Uconn, uconn | |
| NetID | netid, Netid, netID | use "NetID" for all instances, including within emails: NetID#####@uconn.edu | |
| ITS Technology Support Center | Husky Tech, Help Desk, Service Desk | ||
| ITS | UITS | ||
| Outlook | Office 365 Web Access | Office 365 Online | When referring to outlook and its services – "Office 365 Web Access" and the " Outlook Desktop Client" are two different ways to access the same service called "Outlook." |
| Outlook Desktop Client | |||
| Giving Examples | (i.e., ________), or (e.g., _______) | (example, ____) | |
| In article titles when referring to things that happen in outlook or windows Article Titles When Referring to Things That Happen in Outlook or Windows | "on Windows" "on Mac" | "in Windows/Mac" "for Windows/Mac" |
...
Keep paragraphs short - no more than four to five sentences. Use formatting elements such as bullets, numbers, and note sections to highlight relevant information and to break text up into units that are easy to follow. (See Numbers and Bullets in the formatting section.) . Organize and separate sections with subheadings. This will help readers skim the content and find the desired section. (See headings in the formatting section.)
...
| Info |
|---|
For more information about macros, review the article, see Macros: Understanding and Inserting Dynamic Content (OLD). |
3.11 – Spacing
Confluence headings have built in spacing, but make sure you take out as much space between sections as possible. This helps the reader flow through the information more easily.
3.12 – Keyboard Shortcuts
There are a number of helpful keyboard shortcuts that will make your article writing process faster if you would like to use them. Reference the shortcuts.
4.0 Accessibility
Because we are a public-facing and all-inclusive service, we must ensure that the content of our knowledge base Knowledge Base is accessible for all users. Many of our users require assistive technology, such as screen readers. To ensure that our knowledge base is accessible for people using assistive technology, we need to follow the guidelines below.
4.1 – Alternate Text
What is
...
Alternate Text?
Alternate text, or alt text, is a textual description of an image. Alt text is applicable when inserting pictures into an article. It is text that describes what knowledge or functionality the reader is supposed to gain from the inserted image. Alt text is only helpful when it fully describes the form and function of the image and is not redundant.
Good alternative text provides the information conveyed in the an image, including all text seen in the image and relevant details. It can be difficult to choose where to focus the description, so here are a few rules of thumb:
...
| Note | ||
|---|---|---|
| ||
All inserted pictures in the knowledge base are required to have alt text. |
For
...
Images With Explanatory Text Above Them
For images that have the their purpose of the image adequately described above the imageit, we use null alt text , so that assistive technology will skip over the image. We do not add a descriptive alt tag in this case because that would be redundant. Null alt text can be indicated as alt="".
EXAMPLE:
- Make the text font Arial and the font size 12.
- Make sure bold is selected and make sure that your highlight color is yellow.
Alt= “”
For
...
Images Without Explanatory Text Above Them
Use a descriptive alt tag when you place an image into your article and have not adequately described above the image it what the user is supposed to gain from the image. A descriptive alt tag should describe the purpose of the image or what knowledge the user is supposed to gain from the image.
...
- Left-click on the picture.
- Select properties Properties.
- Enter your alt text.
- Click saveSave.
- Click Update or publish or Publish in the bottom right corner of the screen (depending on which phase of article editing you are in).
- Click edit Edit to re-enter into the editing window. Make sure that your alt text is present.
4.2 – Call Outs in Screenshots
A call out in a screen shot screenshot is any shape used to delineate a specific section of the screenshot that you want a user to focus on. Call outs should be mentioned in the explanatory text above when appropriate. When When using multiple call outs in a single image, it is imperative that the call outs be differentiated based on shape , and not color (for those users that are color vision impaired).
EXAMPLE: You can search for macros (rectangle) or you can browse through the macros using the left-side list of macros (curly brace).
...
To make tables as accessible as possible, set the top row as a "Heading Row" and/or the first column as a "Heading Column.".
Setting these cells as heading cells allows assistive technology like screen readers to associate data cells with their appropriate header cells. This is necessary for screen reader users to understand the relationship between data cells and header cells. Avoid images of tables, as none of the accessibility information will be available to users.
Table view must also be set to "responsive".
Responsive. This allows the table's text to reflow, making it accessible for users who may zoom in to view text. It is also helpful for mobile users.
Avoid using merged cells in the body of your table. While screen readers are capable of correctly interpreting merged cells for column headers, they are unable to correctly interpret merged table data cells.
4.4 - Meaningful Link Text
Avoid writing ‘Click Here’ "Click Here" and similar phrases for links. Instead, have the link text describe the link destination. In addition to being more accessible, it will help helps with your Google search rankings. For example, “For more information about our admissions process click here” could be better as “More information about ...” should be written as “For more information about our admissions process...“.
4.5 - Layout Tables and Columns
Instead of using a layout table for information, consider using the Columns macro. When screen reader users encounter a table with data cells coded using <td>, they expect to also hear information about table headers (<th>). Layout tables do not have table headers. Typically, in HTML, a layout table could can be assigned the the role="presentation" so that screen readers will read the content of layout tables as text, rather than as a table; this is not possible through Confluence. Because this is not a function Confluence supports, it is better to use the Columns macro to visually style the page. When using the Columns macro, you will be asked to input the column width in pixels or in percentages. Use percentages so that the column content will be responsive. Add additional Columns columns by inserting additional macros below the initial macro.
4.6 - Color Contrast
Making text high enough contrast against its background is vital for users who are colorblind or who may have low vision. These users may not be able to distinguish text if it is too similar in brightness to its background. One good tool to check for color contrast is the Colour Contrast Analyser. To download Colour Contrast Analyser, click the Download button and choose choose CCA-Setup-3.0.1.exe. Text should meet a ratio of 4.5:1 between the foreground and background colors. This will cause the WCAG 2.1 results heading 1.4.3 Contrast (Minimum) (AA) to have green check marks. If the results show a red xX, then the contrast is not high enough and you will need to adjust the text or the background's color.
...
If you choose to color-code information, be sure to indicate the color-code's purpose through text or images. For example, instead of coding all incorrect table data cells as red, we could code them as red and add an X to each incorrect cell. This is vital for people who are blind, have low vision, or are colorblind. Users without full vision capabilities may not be able to distinguish color-based information, so it must be supplemented with text or images.
...