黑料社

• Web accessibility training
• Foundation-level training for T4 editors
• Working with images

Working with images

Key points

How to add an image

The wrong method

When you add an image to your page, never use the image icon within a Content window. If you embed an image into a text field in this way, you will be asked to remove the image.

The correct method

Alt text

Every time you add an image to your page you must consider its 'alt text'. An image usually has different alt texts to use in different situations, so you'll need to select the right one for your image use, or create a new alt text if the version you need doesn't exist yet. The procedure below will guide you through this.

If you're interested, you can read more about what is alt text is and how it's used in advanced training, but this is optional – you won't need to understand it in order to follow the instructions here.

Images containing text

Images containing text are not prohibited. However:

• An image that contains text – whether it's a photo or a graphic – may need to comply with more criteria than an image that doesn't, which means the process for adding it will take longer.
• There are a few situations where certain templates can't use images containing text.

You may find it helpful to bear this in mind when making image choices. Where possible, it's often quicker and easier to simply add the text to your page rather than presenting it within an image. However, it's also true that images containing text are sometimes helpful or even necessary.

---

Procedure

T4 templates with an image option

Select the template you'd like to use for your image from one of the lists below (Approved Responsive templates or Recruitment templates). The page will then load instructions to guide you on which type of alt text to use for your image and how to create a new alt text if you need to.

Sometimes the guidance will refer you to a decision tree that will ask you simple questions about your image and then tell you how to proceed, based on your answers. If you use certain templates frequently, you'll soon become familiar with their image rules.

If your template is not in either of these lists, this means it doesn't have a 'Select media' button, so it can't be used to add an image to your site – embedding images in text fields is not permitted. If you think your template should be listed here, please email the web team at digitalteam@exeter.ac.uk.

Guidance

 

---

Decision Trees

If you're new to this process, we recommended that you start by selecting the template you intend to use for your image – the instructions will then load on the page, directing you to a decision tree where applicable.

Once the process is more familiar you can of course refer directly to the trees as a check.

Decision Tree A: Clickable images with a caption field option

1. Does the image contain text about the link destination that's legible without zooming in? For example:
   • if your image links to a page about a book giveaway, the image may contain text that specifies what the books are.
   • if your image links to a page about funding, the image may contain text that says the funding is for postgraduate students.
   • if your image links to a page about an event, the image may contain text that communicates details of that event.
   Options:
   • Yes, the image contains legible textual information about the link destination – you must ensure that all of this information is entered into the Caption field. If this isn't possible, you can't use this image with a clickable Carousel template. In addition, the caption field must only refer to what the user will find at the link destination – it can't contain other information. When you have done this, proceed to step 2.
     Examples of clickable carousels with caption text.
   • No – go to step 4.
2. Does the image contain pictorial content that adds clarification about the link destination beyond what's stated in the Caption field? For example:
   • The caption may say 'Find out more about our wildlife' and the image is a picture of ducklings.
   • The caption may say 'Three times gold winners celebrate' and the image is a picture of a hockey team.
   Options:
   • Yes, the image adds clarification to the link – go to step 3.
   • No, the image adds nothing, the caption already says it all – go to step 5.
3. Would you prefer to alter your caption text to include the image information (e.g. 'Find out more about our wildlife, including our family of ducklings', 'Hockey team celebrates as three time gold winners') or would you prefer to leave the caption as it is?
   • I'll edit the caption to include the image information – go to step 4.
   • I'd rather leave the caption as it is – go to step .
4. I'm uploading a new image to the media library.
   When you add your image to the media library you must leave its alt text blank. You can then go ahead and use the image on your page. You can exit this decision tree at this point.
5. Is the image already in the media library?
   • Yes
6. Does the image already have alt text? 
   • Yes – go to step 4.
   • No – go ahead and use the image on your page. It's correct for it to have blank alt text in this situation no matter what it depicts, and you must not add alt text to the image. You can exit this decision tree at this point.
7. Is the image already in use?
   • Yes – you should not use the image but instead create a new variant, and then you must leave the variant's alt text blank. You can then use the variant on your page. You can exit this decision tree at this point.
   • No – your image must have blank alt text so you must now delete the alt text from the image and then use it on your page. You can exit this decision tree at this point.
8. Is the image already in the media library?
   • Yes – go to step 6.
   • No, I'm uploading a new image to the media library.
     When you add your image to the media library you must give it descriptive alt text. You can then go ahead and use the image on your page. You can exit this decision tree at this point.
9. Does the image already have alt text that describes it in a way that makes sense for the content of your page?
   • Yes – go ahead and use the image on your page. Do not change the alt text. You can exit the decision tree at this point.
   • No, the alt text says something that isn't quite right for my page, or it's blank – go to step 7.
10. Is the image already in use?
    • No – you must enter descriptive alt text for this image and then you can use the image on your page. You can exit this decision tree at this point.
      Guidance: how to write descriptive alt text.
    • Yes – you should not use the image but create a new variant, and give that variant descriptive alt text that is appropriate for your page. You can then use the variant on your page. You can exit this decision tree at this point.
      Guidance: how to write descriptive alt text.

Decision Tree B: non-clickable images without relevant text

1. Does your image add any meaning to your page?
   • No – go to step 2.
   • Yes – go to step 5.
   ? How to determine if an image 'adds meaning' to a page.
2. Is the image already in the media library?
   • Yes – go to step 3.
   • No, I'm uploading a new image to the media library.
     When you add your image to the media library you must leave its alt text blank. You can then go ahead and use the image on your page. You can exit this decision tree at this point.
3. Does the image already have alt text?
   • Yes – go to step 4.
   • No – go ahead and use the image on your page. You must not give the image alt text – it's correct for it to be blank. You can exit this decision tree at this point.
   ? How to find out if an image already has alt text.
4. Is the image already in use?
   • Yes – you should not use the image but instead create a new variant, and then you must leave the variant's alt text blank. You can then use the variant on your page. You can exit this decision tree at this point.
   • No – your image must have blank alt text so you must now delete the alt text from the image and then use it on your page. You can exit this decision tree at this point.
   ? How to find out if a media library image is already in use.
5. Is the image already in the media library?
   • Yes – go to step 6.
   • No, I'm uploading a new image to the media library.
     When you add your image to the media library you must give it descriptive alt text. You can then go ahead and use the image on your page. You can exit this decision tree at this point.
6. Does the image already have alt text that describes it in a way that makes sense for the content of your page?
   • Yes – go ahead and use the image on your page. Do not change the alt text. You can exit the decision tree at this point.
   • No, the alt text says something that isn't quite right for my page, or it's blank – go to step 7.
7. Is the image already in use?
   • No – you must enter descriptive alt text for this image and then you can use the image on your page. You can exit this decision tree at this point.
     Guidance: how to write descriptive alt text.
   • Yes – you should not use the image but create a new variant, and give that variant descriptive alt text that is appropriate for your page. You can then use the variant on your page. You can exit this decision tree at this point.
     Guidance: how to write descriptive alt text.
   ? How to find out if a media library image is already in use.

Decision Tree C: non-clickable images of people

1. Is the image already in the media library?
   • Yes – go to step 2.
   • No, I'm uploading a new image to the media library.
     When you add your image to the media library you must give it alt text that describes the person (see guidance below). You can then go ahead and use the image on your page. You can exit this decision tree at this point.
     ? How to upload an image to the media library.
     ? How to write alt text that describes people.
2. Does the image already have alt text that:
   • Describes the person
     and
   • Names them exactly as they are named in the quote, i.e.
     • if the quote uses their first name only, the alt text also uses their first name only.
     • if the quote doesn't name them, the alt text also doesn't name them.
     and
   • Is in the language of the page you're creating (usually English but if your page is in Spanish, for example, then the alt text of your image must also be in Spanish).
   Options:
   • Yes – go ahead and use the image on your page. You can exit this decision tree at this point.
   • No, the alt text says something else and I need to change it, or it's blank – go to step 3.
3. Is the image already in use?
   • Yes – do not use the image or alter its alt text. Instead, create a new variant, and give that variant alt text that describes the person (see guidance below). You can then go ahead and use the variant on your page. You can exit this decision tree at this point.
     ? How to create a variant.
     ? How to write alt text that describes people.
   • No – add alt text that describes the person (see guidance below). You can then go ahead and use the image on your page. You can exit this decision tree at this point.
     ? How to write alt text that describes people.

Recruitment templates

Non-clickable templates

• Campaign landing page v2 (all 930 x 500 pixels):
  • Intro image
  • Carousel image (1-4)
  • Optional image
  • Panel image (1-4)
• Course: additional section
• Course: call to actions
• Course: Careers (PGT)
• Course: Learning and teaching
• Course: Page structure
  • Course search results image (300 x 300 pixels)
• Course: Teaching and research (PGT)
• Course: Your future
• Gallery image
  • Image.
    Minimum width 930 pixels x height free choice.
    Note that all images in a gallery must be the same size, and must be in landscape orientation.
• Tab container
• Tab entry

If you are using any of these templates for your image and:

• the image has text that is at all relevant to the content of your page, refer to the guidance on images of text.
• your image has has no text, or text that isn't relevant to your page, refer to Decision Tree B (non-clickable images).

Template	Name of image field	Dimensions in pixels	Alt text guidance	Examples
Campaign landing page v2	Splash background image	1920 x 1080	An image chosen for this field must be decorative, i.e. it mustn't add anything meaningful to your page. You don't need to consider its alt text because it will automatically be blank, no matter what alt text the image has in the media library.
	Logo	930 x 500	Writing alt-text for non-clickable logos.
	KSP icons (1-4)	930 x 500	Writing alt-text for icons.
Carousel interface	Image	930 x 500	Clickable or non-clickable free choice.	If your interface or panel has a link, refer to Decision Tree A (clickable images). If your panel does not have a link: if your image has text that is relevant to the content of your page, refer to Images of text. if your image has has no text, or text that isn't relevant to your page, refer to Decision Tree B (non-clickable images).
Carousel panel	Image	930 x 500	Clickable or non-clickable free choice.
Carousel panels set	Panel (1-4): Image	930 x 500	Clickable or non-clickable free choice.
Carousel panels set interface	Panel (1-4): Image	930 x 500	Clickable or non-clickable free choice.
Course: Accreditations	Logo (1-4)	265 x 145	Non-clickable logos.
Course: Footer panel
Course: Header image	Header image	1400 x 285	An image chosen for this field must be decorative, i.e. it mustn't add anything meaningful to your page. You don't need to consider its alt text because it will automatically be blank, no matter what alt text the image has in the media library.
Course: KSP
Full width section top	Background image	1400 x 650	An image chosen for this field must be decorative, i.e. it mustn't add anything meaningful to your page. You don't need to consider its alt text because it will automatically be blank, no matter what alt text the image has in the media library.
Panel blog feed	Image	930 x 500
Profile set	Profile (1-6) image
Quote template	Quotee image		The image must have alt text describing the person and naming them exactly as they are named in the quote – i.e.: If the quote only refers to their first name, the alt text must only use their first name. If they aren't named, the alt text of their image mustn't name them either.

Approved responsive templates

Additional quote

Summary

The image must:

• be 220x220 pixels.
• have alt text describing the person and naming them exactly as they are named in the quote – i.e.
  • if the quote only refers to their first name, the alt text must only use their first name.
  • if they aren't named, the alt text of their image mustn't name them either.

Don't edit the alt text of a media library image if it's already in use, even if its alt text is blank.

Example

Guidance

• How to find out the dimensions of an image in the media library.
• How to create a media library variant of an image.
• How to resize an image.
• How to find out if a media library image is already in use.
• How to write alt text to describe people.

Step-by-step guide

Refer to the guidance material as required.

1. Is the image already in the media library?
   • Yes: go to step 2.
   • No: go to step 5.
2. Is the image 220x220 pixels?
   • Yes: go to step 3
   • No: you'll need to either create a media library variant of the image that is 220x220 pixels or upload a new image of those dimensions. Once you have an image of the correct size in the media library, proceed to step 3.
3. Does the image have alt text describing the person?
   • Yes: you can add the image to your page and exit this decision tree.
   • No, it's blank or it says something else, such as just the person's name full name when the quote only uses their first name: go to step 4.
4. Is the image already in use?
   • Yes: do not change the alt text at all, even if it's blank. Instead, you'll need to create a new variant of the image. When you do this you must give it alt text describing the person. When you've done this you can add the image to your page and exit this decision tree
   • No: give it alt text describing the person. When you've done this you can add the image to your page and exit this decision tree
5. Is the image 220x220 pixels?
   • Yes: go to step 6.
   • No: you'll need to change its dimensions. When you've done this, proceed to step 6.
6. Upload the image to the Media Library. Give it alt text describing the person. When you've done this you can add the image to your page and exit this decision tree.

Decision tree

1. The image must be 930x500 pixels.

 

Caption field

The caption field within this template is not a caption in the true sense. Although it's positioned over the image, as far as the code is concerned it doesn't have any relationship to the image. This means that if you wish to use it you should make sure it doesn't require access to the image or its alt text in any way.

So, for example, you could have an image of a bus with a caption that says 'New bus route announced' because the image of the bus doesn't add anything informative to that statement. You couldn't have an image of a bus with a caption that says 'Find out about transport changes', because then the bus adds context.

• Feature box
• Highlight content panel
• Messages billboard
• Profile panel
• Profiles item set
• Quote

To start – identify the type of image

If your image is a logo, please refer to the guidance for logos. If it's not a logo, proceed with the guidance that follows here.

When the image is added to your page, will it be clickable?

Decision Tree B (all clickable images)

1. Is the image going to be used in the content type 'Accommodation residence filter panel'?
   • Yes – your image will need descriptive alt text. You can exit this decision tree at this point.
     Guidance: writing descriptive alt text for accommodation images. 
   • No – go to step 2.
2. Will there be text in the link that contains your image?
   • No, my image appears on its own – go to step 6.
   • Yes (the most common option). Go to step 3 when you have read the guidance here.
     Your link text must be fully informative link text – i.e. it must indicate clearly where the reader will go or what will happen when the link is clicked, and the image must not add to this information.
      For example:
     • if you were linking to a page selling potted plants, your link text would say 'For sale: potted plants' and not 'For sale' with an image of potted plants providing that extra context.
     • If you were linking to a page about competition results, your link text would say 'Results: a win for the Blue Team' and not simply 'Results' with a picture of the Blue Team holding their trophy.
     • If you were linking to a page offering vouchers, your link text would say 'Vouchers available, limited time only' and not simply 'Vouchers available' with a picture of embedded text saying 'limited time only'.
     • A clickable image of Professor John Smith that will open a modal or page containing his profile would have link text that simply says 'Professor John Smith', because it leads to information about him, and his profile picture doesn't add information to this.
3. Is the image already in the media library?

   • Yes – go to step 4.
   • No, I'm uploading a new image to the media library.
     When you add your image to the media library you must leave its alt text blank, no matter what the image depicts. You can then go ahead and use the image on your page. You can exit this decision tree at this point.
4. Does the image in the media library already have alt text?
   • No – go ahead and use the image on your page. It's correct for it to have blank alt text in this situation no matter what it depicts, and you must not add alt text to the image. You can exit this decision tree at this point.
   • Yes – go to step 5.
5. Is the image already in use?
   • No – you can safely delete the alt text from the image and then use it on your page. The image must have blank alt text in this situation, no matter what it depicts. You can exit this decision tree at this point.
   • Yes – you should not use the image but re-upload a new version, and then you must leave the alt text blank, no matter what the image depicts. You can then use the image on your page. You can exit this decision tree at this point.
6. Is the image already in the media library?
   • Yes – go to step 7.
   • No, I'm uploading a new image to the media library.
     When you add your image to the media library, add alt text that describes where the reader will go or what will happen when the image is clicked – do not enter a description of the image, no matter what the image depicts. You can then go ahead and use the image on your page. You can exit this decision tree at this point.
7. Does the image already have alt text that describes where the reader will go or what will happen when the image is clicked?
   • Yes – go ahead and use the image on your page. Do not change the alt text. You can exit the decision tree at this point.
   • No, its alt text says something else, or it's blank – go to step 8.
8. Is the image already in use?
   • No – you can safely change the alt text to say where the reader will go or what will happen when the image is clicked – do not enter a description of the image, no matter what it depicts. You can then use the image on your page. You can exit this decision tree at this point.
   • Yes – you should not use the image but re-upload a new version, and give it alt text that says where the reader will go or what will happen when the image is clicked – do not enter a description of the image, no matter what it depicts. You can then use the image on your page. You can exit this decision tree at this point.

Basic principles of descriptive alt text

• Descriptive alt text is solely a description of what can be seen. This means:
  • Don't simply name the content.
  • Don't use the alt text field to explain, comment, analyse, interpret or provide a value judgement for the image content.
• Use a maximum of 125 characters. If you need more than this you should use long description.
• Alt text must match the language of the page you're editing - so if your page is in Spanish, the alt text should also be in Spanish.

Images fall into two basic categories: clickable and non-clickable.

Clickable images

A clickable image is one that 'does something' when you click it. This is usually opening another webpage, or a modal, or jumping to a specific part of a webpage, but it can also be an action such as activating an animation, playing music or printing something. If the image is simply present on the page, however, then please refer to the guidance for non-clickable images.

• If the link containing your image has text, this text must be proper link text. This means it must indicate where the reader will be sent when they click the link, or it must say what happens when the link is clicked (such as 'play animation'). In these situations, it doesn't matter what the image contains, the alt text for your image must always be blank.
• If the link containing your image does not have text, then the alt text of your image must act as the link text. This means it must say where the reader will be sent or what happens when the link is clicked. Do not describe the image in the alt text of these images - the link action overrides this requirement.

Non-clickable images

Images containing text

Images containing text are more complex to handle, so should only be used where they are needed and useful, such as with logos, icons or diagrams, or you may have a photo that contains text, for example. See images of text for more information.

Images that don't contain text

• If your image does not add any meaning to your page then it's decorative and its alt text should be blank. If the image you're using is already in the media library, check to see if it has alt text. If it does, check to see if it's already in use:
  • If the image is in use you must not delete the alt text but instead upload a new version of the image and leave its alt text blank.
  • If the image isn't in use, you can safely delete its alt text and use the image on your page.
• If your image does add meaning to your page then it must have alt text. If the image is already in the media library, check to see if it has alt text.
  • If it doesn't, check to see if the image is already in use by someone else:
    • If the image is in use, you must not add alt text but instead upload a new version of the image and then add your own alt text to it.
    • If the image is not in use then you can safely add alt text to it and use the image on your page.
  • If it does:
    • If you're happy that the alt text is right for your content, go ahead and add the image to your page.
    • If the alt text is wrong for your content, you must not change the alt text but instead upload a new version of the image and add your alt text to it.

How to check if an image in the media library has alt text

How to check if an image in the media library is already in use

How to upload a new version of an image that's already in the media library

 

Logos

1. Is the image clickable?
   • Yes – 
   • No – 

Take care when changing alt text

If you're planning to use an image that's already in T4's media library, before you add it to your page you should check that its alt text is correct for your intended use of the image (the decision trees will tell you which type of alt text you need).

If the alt text isn't right, it may cross your mind to delete or change it. This can be fine, but please ensure that you only delete or alter alt text if the image is not already in use.

If it is in use, you should instead create a new variant of the image in the media library, give that variant the alt text you require, and then add the image to your page.