Images
Images and accessibility
- The desire to make information universally accessible has generated standards and best practices that are actively enforced in the editor.
- For images, this includes encouraging the use of alternate text, descriptions and long descriptions that are of great value to assistive technologies such as screen readers.
- To ensure that the meaning of non-decorative images is not lost, the editor asks authors to confirm if each uploaded image is decorative or not. If the image is non-decorative, the editor requires authors to enter alternate text for the image before it can be saved.
- Decorative images include designs and shapes used for aesthetic purposes only.
- Non-decorative images include most images, such as drawings, photographs, charts, etc.
Alternate text
- Though alternate text and descriptions are often confused, the difference between them is nonetheless clear. If the browser is not able to display an image, the text that appears is alternate text, such as "Junk food" seen below.
- If the browser is able to display the image, then the text that appears in the tooltip as the cursor passes over the image is the image's description.
Composing alternate text
- alternate text and descriptions are entered through the Image properties dialog box discussed in the following section.
- The generally accepted rule is that alternate text should not exceed 10 words in length.
- When images contain text, the text should be represented in the image's alternate text.
- When images are used for buttons, alternate text should describe the button's function.
- The preferred alternate text for images that are used as bullet points (not recommended) is "Bullet".
- When an image is used in-line, such as in a sentence, alternate text for the image should take into account the place of the image in the sentence. In this way, if the image cannot be rendered and must be replaced by alternate text, the meaning of the sentence remains intact.
Descriptions
- Descriptions are optional for all images, but can be very useful to assistive technologies.
- One rule of thumb is that when alternate text of up to 10 words is insufficient to describe a non-text object, then a description is also required.
Long Descriptions
- Long descriptions are URLs that lead to Web pages that contain lengthy information about an image.
- Long descriptions are optional for all images, but can be very useful to assistive technologies.
- Long description URLs are entered through the Image properties dialog box seen below.
Editing images
Edit images through the Image properties dialog box (seen below). To display the Image properties dialog box, double-click on the image, or select the image and, in the context menu, choose Image, then Properties.
Image URL (Required)
- The Image URL (Required) field automatically displays the file name of the uploaded image.
- To browse for alternative images, select the box to the right of the Image URL field.
Decorative Image
- Under Decorative image, indicate if the image is decorative by selecting Yes or No.
- If the response is "No", (i.e. if the image is not a decorative image), authors must enter an Alternate Text for the image in the following field.
Alternate Text
- Enter alternate text for all non-decorative images.Otherwise, the warning above will display.
- Authors can choose to enter the missing alternate text right away (Edit), or later (Skip).
Description
- Under Description, enter a description of the image (optional).
Long Description URL
- Enter a Long description URL (optional).
Width and Height
- The Width and Height fields display the dimensions of the image selected.
- Resize images by modifying the width and height, in pixels, or as a percentage of the width of the page.
Constrain Proportions
- Under Constrain Proportions, select Yes to avoid distorting images during resizing.
Align
- Under Align, choose Left or Right to align an image to the right or left of a portion of text.
- Left align floats the image to the left, wrapping text to the right of the image.
- Right align floats the image to the right, wrapping text to the left of the image.
Preview
- The Preview feature offers a thumbnail of the image being up-/downloaded. This feature helps in composing appropriate alternate text when a single piece of content uploaded to the editor contains several images.
Insert an image
Images can be uploaded into the editor in 6 ways:
- Drag an image into the editor
- Browse and select images from libraries
- Enter a direct URL for an image
- Copy then paste an image from the file system
- Copy then paste an image from another application, such as Photoshop
- Use PRINT SCREEN to capture an image from your monitor.
Drag an image into the editor
- In Edit mode, select an image from the desktop.
- Drag the image into the editor, to the position where you want the image to appear.
Browse and select images from a library
- In Edit mode, place the cursor at the point you want the image to appear.
- On the toolbar, select
, or, in the context menu, select Toolbar, Buttons, then Image. - In the Image library dialog box that displays, under the Browse tab, select an image. System Administrators determine which image sources are available.
- As seen in the screenshot below, when an image is selected, the dimensions of the image, its file size, and the date on which the file was last modified are displayed in the left panel.
- A thumbnail of the selected image appears to the right.
- Text appearing beneath the thumbnail is the image's alternate text, if available.
Enter a direct URL for an image
- In Edit mode, place the cursor where you want the image to appear.
- Select on the toolbar or, in the context menu, select Toolbar, Buttons, then Image.
- In the Image Library dialog box that displays, under the Enter URL tab, enter the URL of the image.
- Select Preview to display a thumbnail of the image, the size of the image file, and the image's dimensions. If no thumbnail displays, the URL is incorrect.
Copy then paste an image from the file system
- Open the file system, select a file and, in the context menu, select Copy.
- Place the cursor in the editor at the point you want the image to appear and, in the context menu, select Paste.
Copy then paste an image from another application, such as Photoshop
- In the application, select Copy or Copy Merged to copy the image.
- Place the cursor in the editor at the point you want the image to appear and, in the context menu, select Paste.
Use PRINT SCREEN to capture an image from your monitor.
- On the keyboard, press PRINT SCREEN to capture a screenshot of the image displayed on the monitor screen.
- Place the cursor in the editor at the point you want the image to appear and, in the context menu, select Paste.
Optional Features
Save To
- When an image is uploaded, if the Save To feature is enabled, the Upload image dialog box opens (see below).
- Use the Upload image dialog box to save images to an existing folder, to a new folder, or to a renamed folder, or sub-folder. System Administrators determine to which folders and/or sub-folders authors may save images.
- The Library and Folder fields located in the upper section of the Upload image dialog box confirm the location of saved images.
Rename / Replace Uploaded Images
- When the filename of the image that you are uploading already exists, the Filename already exists dialog box displays.
- This dialog box allows you to rename the file you are uploading, or to replace an existing file with the uploaded file.
- In the screenshot below, both options are enabled. Enter a new filename (using the same type of file name extension) if you wish to rename the uploaded file. Alternatively, choose to replace the existing file with the new one.
Save Images To My Computer
When available, this feature permits users to save to their computer an image found in the image library.
- In the Image Library dialog box, under the Browse tab, with the cursor in the chosen image, open the context menu and select Save to my computer.
OR:
- In Edit Mode, place the cursor in an object, or the anchor text for an attachment, open the context menu and select Save to my computer.
Wrap Text Around An Image
- Select the image and, in the context menu, select Image and Align right to float an image to the right, wrapping text to the left of the image.
- Select Align left to float the image to the left, wrapping text to the right (seen below).
- To remove text wrap from an image, de-select Align right or Align left.
Delete An Image
- Select an image and, in the context menu, select Delete.
- Alternatively, select an image and press the Delete key.
Resize An Image
There are two ways to resize images in the editor.
- Stretch an image to its desired size.
- Resize an image using the Image properties dialog box.
Stretch an image to its desired size
- Select the image so that "handles" appear.
- Place the cursor on any handle until double-headed arrows display.
- Drag the double-headed arrows until the image reaches the desired size. To avoid distorting images during resizing, drag only the corner handles, as seen below.
- The new dimensions of the image display (in pixels) as the image is being resized.
Resize an image using the Image properties dialog box
- Select an image and, in the context menu, select Image properties.
- In the Image properties dialog box, modify the height and width of the image, in pixels or as a percentage of the page.
- Selecting Yes under Constrain Proportions avoids distorting images when resizing.
Restore the original dimensions of an image
- The original dimensions are the dimensions of the image at the time it was first uploaded into the editor.
- To reset an image to its original dimensions, select the image and, in the context menu, select Image, then Reset dimensions.