Uploading a new image

Images checklist

  • Have you cropped or re-sized your image? For the main news and blog images, please make them 1200 x 375px.
  • Is your image file size 200kb or under? If including multiple images on a page try and get the file size to 150kb or under (this helps the page load faster).
  • Try to use images of real people doing their jobs or engaged in activities in this country. Try to achieve a good diversity of age, gender expression, religion, and ethnicity, with a particular focus on avoiding white, middle-aged subjects.
  • Are you using an image which has already been used for another purpose that you are aware of? Duplication of images should be avoided.
  • Do you have appropriate permissions to use the image?
  • Have you checked that the image doesn't include any personally identifiable data?
  • Are photos in .jpg format and diagrams in .png format?
  • Have you optimised your .jpg image (no more than 80%) using a graphics programme or online app such as tinypng or imageresizer
  • Have you named your image file using all lowercase, with dashes in between words, making it a descriptive name? Please do not include version numbers or dates in image file names
  • Have you uploaded your image to the relevant section image folder or added a new sub-folder to contain it in the image folder structure?
  • Is your image purely decorative?  to comply with accessibility criteria upload with no alt tag information, the alt tag field should be blank (see uploading images below)
  • Is your image non-decorative, does your image contain any textual information that is not mentioned in the text that would be useful to the user?  Briefly fill in the alt tag information with a description of this information (Read more about Understanding Alt Tags and accessibility below)
  • Are you including a diagram or flow chart? Have you used LucidChart or Visio to create your diagrams? These should then be converted to.svg format (see information on Understanding Alt tags and accessibility below)
  • If you have to include diagrams or infographics in an image format such as .png or .jpg ensure that you describe the information that these diagrams contain to make them fully accessible (see information on understanding Alt tags and accessibility  and SVGs below).

Understanding alt tags and accessibility

The alt tag is the most basic form of image description, and is the primary way in which images are made accessible but they have to be applied correctly. There are two primary types of image: decorative, and non-decorative.

Decorative images

 For decorative  images, images that serve no specific purpose other than decoration, which will be most of the images used on the site, enter no alt text. Do this by removing the pre-populated alt text so that the field is blank when you upload -  If you find that the image you are using was uploaded with existing Alt text and it is purely decorative, please remove the Alt text. Adding full alt text for decorative images will only serve to slow down screen readers. 

Informative images

Non-decorative images convey information in visual form that contributes to the content i.e. charts, infographics, images containing text and maps. These should have full alt text. There are several types of non-decorative image, and the alt text required will depend on the type.

  • If the image is functional (used to initiate an action) the alt text should describe the action to be initiated. For example, the alt text for the NIHR logo in the header says "NIHR homepage", not "NIHR logo".
  • Images containing  simple information or text: the alt text should reflect all the information contained in the image keeping it as brief as possible, any text in the image i.e. a logo should be reproduced in the alt tag.
  • Images such as infographics, diagrams, charts, maps, and graphs: Where possible the detail and meaning of the information these contain should be described within the page text either in the main body or in a caption relating to the image or included as a linked document so that if the image was not there the user could still access this information and understand its findings/meaning. The alt text should describe the data and an overview of its meaning and a caption or linked document should describe it more fully.
  • When describing your data summarize what it means rather than just what it is. 

    For example  instead of saying 'Geographical distribution of patient participation in the UK' , try and describe what the data actually shows visually as far as possible e.g. 'A geographical distribution graph shows regional variations in patient participation revealing an increased participation amongst those living in the north of England compared to the south with the highest participation (over 50%) in Yorkshire  '.
  • Do not include 'image of', or 'picture of'. Screen readers automatically announce an image, so this would be read as image: image of xxxx.
  • Images of text should be avoided. If you do have simple text in your image, reproduce this text in your alt tag.

SVGs

  • Complex diagrams/flow charts/process diagrams/infographics that convey complicated processes, should be created in Illustrator, Lucid Chart (or Visio ) as appropriate and converted into .svg format. You should ideally construct a flow diagram in the order of flow rather than adding in boxes randomly in the sequence as this will impact the reading order for screen readers so take the time to plan/draw it out first before creating. Adding numbers to the steps in the process makes it far easier for a user to follow the sequence without visual aids, this is especially important if stages/processes get added in later. Contact Netsweb for help to convert/upload these to the website or for advice when creating your diagram.
  • Important: When uploading svgs tick the 'upload as downloadable file' box or they will get converted to an image! They have to be embedded in the page using an object embed method  rather than linked as an image, as this is a little technical please contact Netsweb for assistance with this.

    In addition you will need to add an ARIA title and  full description to your diagram within the code to make it fully accessible to screen readers. This should be a detailed description of the process shown in the diagram and what it means, if you submit this along with your SVG request to Netsweb then we can add it in for you.  Alternatively you can describe the diagram's meaning in a caption below. If the description is too lengthy then consider a link to an explanatory document  which should be included just below the diagram. If you have to use an image rather than SVG (i.e. it came from another provider) then you must still provide a detailed description of the information contained within it in the same way.
  • Developers note: To add SVG to page, embed using <object type="image/svg+xml" data="mydiagram.svg"  width="100%" height="100%"></object> into separate empty body field via source code method. To add Aria lables to SVG code: Add  aria-labelledby="title desc" within the <svg> tag itself and <title id=”title”>Title here</title> and <desc id="desc">Description here</desc> tags afterwards.

Uploading images

Using the asset tab, locate the images folder (at the top in the root directory) and navigate within this folder to a relevant section that matches the same location as the page containing the image. Within this folder you can create sub-folders to replicate the navigational structure so that users can easily find uploaded images. Right-click on the folder and select upload. Select one or more images to upload and click the blue upload files button (If you are replacing a pre-uploaded image you will get a dialogue box requesting that you check the overwrite box before it can proceed successfully).

 

The Sitekit Bulk image uploader prepopulates the Alt tags and description based on your filename.  It is necessary to edit this on uploading to make the image accessible. In the window click edit to remove the pre-populated Alt text (leave the  description as this is a required field but you may wish to edit it to make more sense ).  If your image conveys data or information please add in a relevant Alt tag - read the section above on Alt tags and accessibilty.

Save and close the uploader windows. (Ignore the current Sitekit orange banner message about recommending alt tags).

Currently if you upload an image directly from a page (e.g. a case study page), adding alt tags is  still compulsory in Sitekit. If you use this method, please edit the image afterwards in the asset tree and remove the tags again.

 

 

If you need to replace this image with a newer version later see Replacing an image. If you need to edit the alt tag later to remove/ add  find the image in the asset menu, right click and select edit. Select the properties tab.

After uploading