黑料社

Web Accessibility Training

Alt text for logos

Advisory

The information on this page is only applicable if you're editing the University webpages using T4. It presumes that you have already completed the beginners and advanced level of the .

How to use this guide

Option A: Decision tree (instructions only)

This option is quicker, but provides less explanation – certain actions may seem strange or counterintuitive. Refer to the decision tree.

Option B: Tutorial (understanding the process)

This option is longer, but develops comprehension. To read through the full tutorial, start with applicability.

Decision tree

This decision tree includes links to further information, indicated by ?, to help if you're unclear about any point.

  1. Will the logo be clickable or non-clickable?
    ? What is a clickable logo?
    • Non-clickable: refer to alt text for non-clickable logos. You should follow those instructions from this point – you do no need to refer back to this decision tree.
    • Clickable: go to step 2.
  2. Will the clickable logo have link text?
    ? What is link text?
    • Yes: go to step 3.
    • No: go to step 7.
  3. Is the image already in the media library?
    • Yes: go to step 4.
    • No: Upload your image:
      • Whether it's a composite image or single logo, it must be 930x500 pixels.
        ? Guidance on sizing.
      • When you upload it, make sure that you leave its alt text blank.
        ? What is alt text?
      • Now go to step 6.
  4. Does the image in the media library already have text in its alt text field?
    ? Where to find the alt text field.
    • Yes: go to step 5.
    • No, its alt text field is blank: You can add the image to your page.
      • Do not add any alt text – the field should remain blank.
      • The link text (not alt text) must describe what happens, or where the page goes, when the user clicks and it should include reference to the logo (or logos if it's a composite image).
        ? See examples of link text for clickable logos.
        You can exit the decision tree at this point.
  5. Is the image already in use?
    ? How to find out if a media library image is already in use.
    • Yes, it's in use: You will need to create a separate version of the image.
      ? How to create a duplicate image from one already in the media library.
      When you upload your new image:
      • It must be 930x500 pixels. If the original image was not that size you will need to edit it to the correct dimensions.
        ? Guidance on sizing.
      • Make sure that you leave its alt text blank.
      • Then go to step 6.
    • No, it's not being used: Delete the existing alt text and go to step 6.
  6. You can now add the image to your page. The link text (not alt text) must describe what happens, or where the page goes when the user clicks and it should include reference to the logo (or logos if it's a composite image).
    ? See examples of link text for clickable logos.
    You can now exit this decision tree.
  7. Is the image already in the media library?
    • Yes: go to step 8.
    • No:
      • Be aware of the implications if you're considering a composite image of two or more logos. ? Guidance on composite images.
      • Upload your image. Its alt text must describe what happens or where the page goes when the logo is clicked, not what the logo represents. This alt text should be no longer than 125 characters.
        ? See examples of alt text for clickable logos without link text.
        You can then add the image to your page and exit the decision tree at this point.
  8. Does the image's alt text describe what happens or where the page goes when the logo will be clicked on your page?
    • Yes: You can add the image to your page. You can exit the decision tree at this point.
    • No, its alt text field is blank or it says something else (such as a description of the logo): Go to step 9.
  9. Is the image already in use?
    ? See how to find out if a media library image is already in use.
    • Yes, it's in use: You will need to create a separate version of the image, then go to step 10.
      ? See how to create a duplicate image from one already in the media library.
    • No, it's not being used: go to step 11.
  10. If you're planning to create or upload 
  11. When you upload your new image, make sure that you leave its alt text blank, then go to step 6.
  12. image a composite (i.e. two or more logos as part of the same image)?
    • Yes: go to step 5.
    • No, it's a single logo: go to step...

Applicability

Logos have special rules, so this guidance only applies to logos – i.e. a symbol identifying a brand, organisation, group, company or event.

It doesn't apply to icons, badges, awards or other symbols of recognition that may be awarded to an organisation, nor to elaborate images that include information about an organisation or event.

Sizing

Your uploaded logo must be 930x500 pixels.

It will rarely display at the full 930x500 pixels but this sizing ensures it will load correctly on different sized screens.

Logos come in all shapes or sizes, so you'll need to either request these dimensions from the person providing the logo or resize it yourself. The final image will likely have empty space around the design in order to satisfy this requirement but that's fine as long as the logo fills the space either horizontally or vertically.

When your logo is added to a page it may appear quite small depending on the template you use and how you use it. There's no minimum display requirement for logos but a small logo may render its text unreadable, which is still compliant but reduces its value for sighted readers – you may wish to consider this when making template choices.

Composite images

If you're planning to create a composite image of two or more logos, bear in mind that this will make the logo text smaller and potentially less readable.

In addition, if the final image will be non-clickable when you add it to your page then:
  • the image will need alt text
  • you'll only have one alt text field to cover all the logos it contains
  • you'll need to include all readable text
  • you'll only have 125 characters to do this.

If the final image will be clickable, then its content should all be applicable to the linked destination. For example, don't use a composite image of logo A and logo B to link to the website of logo A if logo B is irrelevant in that context.

For these reasons it's often simpler and easier to keep logos as separate images.


Select your guide

Whether or not a logo needs alt text, and what that alt text should say, depends on the logo content and where it's used. T4's media library will only accept one alt text for each uploaded image, so you may need to upload more than one instance of your logo if you're using it for different purposes in different places.

Clickable logos

Choose this option if clicking on the logo will:
  • take you to another part of the same page
  • open another webpage or a modal window
  • make something appear on the page (such as an animation or video)
  • play music
  • print something

Clickable logos

Non-clickable logos (essentials)

This option provides a quick guide to how to write alt text for non-clickable logos, with a few examples. If you need a quick answer, this is all you need to read.

Non-clickable logos (essentials)

Non-clickable logos (full guide)

Choose this option if you still have questions after reading the essentials or you'd like to ensure that your logo alt text is as clear as possible. It covers best practice, niche cases, goes into more detail and includes further examples.

Non-clickable logos (full guide)

Worked example

An editor is using an EU logo four times for different purposes. As each purpose needs its own alt text, they will need to upload the logo to the media library four times, with different alt text each time.

  • The first purpose is simply to present the logo on the page (a non-clickable logo). For this use, the logo alt text says, 'EU logo'.
  • The second purpose is to use the logo as a clickable link to the EU website. There is no accompanying text as part of the link. For this use, the logo alt text says, 'EU website'.
  • The third purpose is to use the logo as a clickable link to a particular page on the EU website. Again, there is no accompanying text as part of the link. For this use, the logo alt text says 'Europe Day 2026', as this is the name of the webpage it's linking to.
  • The fourth purpose is to use the logo as a clickable link to a page of funding opportunities. This time the link does include link text that says 'EU funding opportunities'. For this use, the logo alt text is blank.