Overview
This article is designed to guide any UO Service Portal content creators through the process of adding an image to a knowledge base article (KBA). This guide will cover
- how to annotate an image
- how to upload an image to the article, and
- how to maintain web accessibility standards.
Annotating an image
Image annotation is a way to visually highlight specific content within an image about what you are trying to explain. This is helpful when an image may have multiple objects on it that may draw attention away from your intent. Annotation can be done using various software applications including Preview for macOS and Paint 3D or the Snipping Tool app for Windows.
Example of image annotation
There are many buttons and drop-down menus in the image above but it is done so that what you are highlighting is shown within its context. The annotation in this image is designed to guide the reader to the location of the Add Image button in the service portal's article editor toolbar.
How to upload an image to a KBA
Once your image is annotated to your liking, you can upload it to your article by using the Add Image button in the editor toolbar.
This will reveal the Image Properties dialog box. Click on the Upload tab to proceed.
Then, click on the Choose File button and choose a file from your computer's file system.
Once the file is selected, click the Send it to the Server button to upload the image.
You should see a browser notification that will tell you that the image has been successfully uploaded. Click OK on that notification and you will be redirected to the Image Info tab.
Maintaining web accessibility
To ensure the web accessibility of your article, you must put a brief description of the image into the Alternative Text field. This allows for the web browser, screen-reading software, and other assistive technology to assist any readers who are unable to see the image.
Note: A border may be necessary to provide contrast between the image and the page background to maintain web accessibility. Any number placed into the Border field will add a border to the image in that many pixels and will be shown in the Image Preview pane of the dialog box. For example, the number 2 in the Border field will be two pixels thick.
