Create or save your image into a .jpg or .png file, with a short descriptive file name. Images must not contain text.
Log into LibApps and click on ‘Image Manager’ in the main menu:
LibApps will default to opening your Personal Library but make sure to open the Shared Library:
Click on ‘Upload New Image’ and locate your image and click ‘Open’. Then move down the image library to locate the image:
Now the details need to be added that will make the image searchable on the site and provide alternative text that screen reading software will read aloud.
Click on the image and a new screen will appear:
There are no limits on the character amounts in Keywords but there is a limit of 50 in Alternate Text, including all punctuation. This is not a lot, be very clear.
Keywords are the words attached invisibly to the image that the site can search via the search bar. This will also search the name of the image and so these words do not need to be added. In this example, the keywords do not need to include ‘Cute’ or ‘Kittens’ and so by extension ‘Kitten’. You can also include common misspellings.
Alternate Text is what screen readers will read and it should describe the image clearly and succinctly:
It will apply to all locations that the image is used so do not use a descriptor that will only apply to the context of your page, this information should be included on the page and not on the image.
In this document, you can also right click and click ‘Edit Alt Text’ to see the alternative text for these images. This image is now ready to be used.
If you are using an image from the library and the alt text doesn't suit the context, it can be changed when it is placed. This is done by placing the image and right clicking to open the image properties. From here, add your text in the Alternative Text box.
There are times when an image is used purely for decoration. This should be used infrequently as our website is made with mobile phone use in mind. Images make pages load slower and may increase data use and costs if accessed via mobile data. If you decide to have a decorative image, there isn't really any alternative text that would not disrupt the flow of the text and so the image can be given a 'null attribute'. This means that there is no alternative text for a screen reader to read and for users who choose to access our site with the images disabled, the text will acknowledge that there was an image and nothing more. This can be achieved by typing "" (two sets of double quotation marks with no space between) into the alternative text box.
Images that are placed into a content box will automatically place as an image of a fixed size, measured in pixels. This can cause problems if the image is looked at on a mobile device. To get around this, place the image as a percentage of the box size:
Ideally the image should be a maximum of 80% of the width to allow a little scrolling buffer around the image. The height is much more dependent on the box size and location. Initially, the image can be placed at 100% but this can be changed by going into the image properties and changing it until it fits correctly.