Web Accessibility Training

Alt text for non-clickable logos (full guide)

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 T4 basic training (a link for staff only - opens in new window).

Overview

There's no expectation for T4 editors to read this full guide unless you need to, or you'd like to develop your understanding.

The points here go beyond the essentials to provide to answers specific logo-related queries that T4 editors may have. This is followed by:

 

Full guide

  • How you include the word 'logo' in your alt text is up to you but:
    • If the alt text is short, it's simpler at the end, e.g. 'BBC logo'.
    • If the alt text is long, it's clearer if 'Logo' is at the beginning, e.g. 'Logo of...'
  • Include any graphic details that provide additional information, such as sector, funding or affiliation, as this is information that a sighted person would have. For example:
    • if the logo includes a medical symbol you should mention this if the text alone doesn't make a medical affiliation clear.
    • if the logo includes a Union Jack flag you should mention this if the text alone doesn't make a British affiliation clear.
  • If the logo contains text that's illegible (too faint or too small to read without adjusting the contrast or zooming in) then it's considered decorative. This means:
    • If it's the name of the brand or organisation that the logo represents then it should go in the alt text anyway.
    • If it's anything else (i.e. a descriptor line) it shouldn't go in the alt text.
    • Consider whether it may be better to display a larger version of the logo that will give clearer information to everyone – sighted readers will be able to see it and those using assistive technologies can then have the same information available in alt text.
    • If resizing or cropping a logo, you should remove as much redundant white space as possible, to prevent unnecessary reduction in text size when the logo is displayed.
  • If block capitals are used in the logo:
    • They should also be used in the alt text if they represent an acronym, for example 'NHS'.
    • Do not use block capitals in the alt text for anything else, such as a name, even if the logo styles it that way.
    • If you're not sure if the block-capitalised text is an acronym or not, assume it's not.
  • If text is presented as a mix of upper and lower case letters, for example 'NEWrED' you should type it in exactly the same way in the alt text.
  • If the logo is stylised in such a way that there are no gaps between words, or the words appear in an unusual order, don't replicate this in the alt text. Write your alt text so that the name will be clearly announced. For example, if a logo presents the name as 'BugHost' write it in the alt text as 'Bug Host'.
  • If the logo includes a potentially meaningful graphic but one that would be ambiguous to a sighted person (i.e. the graphic could be depicting a particular object but you're not sure), describe the shape of the graphic rather than defining it. 'Resembles' is a useful word for this – for example, you can say 'swirls that resemble smoke or steam' rather than simply saying 'smoke' or 'steam'. This gives a non-sighted user an idea of what's depicted, and equivalent information, without committing to a definite and possibly incorrect meaning.
  • Don't represent guessed content as fact – if in doubt, leave it out.
  • If you can't find out which brand or organisation a logo represents, then your alt text should describe the logo and the words '...representing an unknown brand or organisation' should be added at the end. This should be a very rare situation that only applies to historical content where the logo needs to be included for editorial reasons.

Examples

There are many examples because logos can take many forms. If you can't find an example that fits your query, please email digitalteam@exeter.ac.uk.

Laing O'Rourke logo

Laing O'Rourke logo

The alt text of the logo above says:

Laing O'Rourke logo.

Notes

  • This is a name, not an acronym, so the alt text doesn't use block capitals even though the logo does.
  • There's no need to mention the yellow and red lines as they're simply decorative.

logo-health

Blue Health logo

The alt text of the logo above says:

Logo of Blue Health: linking environment, climate and health.

Notes

  • There's no space between 'Blue' and 'Health' in the logo, but there is in the alt text so that it will be announced clearly.
  • There's no need to mention the blue and white graphic on the right, as it doesn't add any further clarification to the descriptor line.

logo-ceres

Ceres logo

The alt text of the logo above says:

CEReS logo, with line art resembling two crossed hammers and concentric circuitry in the shape of a polygonal water droplet.

Notes

  • The mix of upper and lower case letters in this acronym is maintained in the alt text.
  • The acronym is not defined, as it's not defined in the logo itself.
  • The descriptor line is not legible without zooming in, so it's not included in the alt text.
  • The graphics detail is included, as a sighted person would have that additional information – even if they weren't sure what to make of it.

logo-ice

ICE logo

The alt text of the logo above says:

Logo of ICE with the additional words Interreg, France, Channel Manche, England. The logo includes the EU flag.

Notes

  • The text beneath 'ICE' in the logo is too small to be legible, so it's considered decorative and not included in the alt text.
  • Both 'Channel' and 'Manche' are included (even though the latter is French on an English page) because the two words together represent cross-border cooperation.
  • The switch between English to French and back again is not indicated, which is correct for alt text.
  • The EU flag is important as it provides information about affiliation.
  • The alt text doesn't make much sense, but this is the same information that a sighted reader would receive, and that is the purpose of alt text. A sighted reader may seek clarification elsewhere, and someone using assistive technologies may do the same.

logo-impact

Impact logo

The alt text of the logo above says:

Imp@ct logo. The name is surrounded by a box resembling an open circuit.

Notes

  • The '@' symbol is included just as it is.
  • The word may be an acronym, but it's unclear, so it's written in sentence case.
  • We don't know that the graphic represents an open circuit, but using 'resembles' enables the alt text to convey an idea of the shape without ascribing a meaning that may be incorrect.

swwarn logo

SWWARN logo

The alt text of the logo above says:

SWWARN logo. The text is superimposed on a map of Africa shaded in black, grey, white, red, yellow and green.

Notes

  • The logo doesn't define what SWWARN is, so the alt text doesn't either.
  • The map and colours are mentioned as they convey contextual meaning.
  • SWARRN logo would likely pass as sufficient alt text, but the contextual meaning would be missing – it's best practice to include it.

logo-wefwebs

WEFWEBS logo

The alt text of the logo above says:

WEFWEBS logo, depicting three symbols resembling a blue water droplet, an orange electrical zigzag and a green plant.

Notes

  • WEF refers to water, energy and food – but the logo doesn't say this and sighted readers have no immediate access to that information, so it isn't included in the alt text.
  • The colours are mentioned because they add weight to a possible interpretation of the symbols.
  • The plant is described as a plant, even though it represents food, because it looks like a plant. A listener would need to make the connection just as a sighted person would.

Without clarification, the logo is trying to help a sighted reader answer the question 'what is WEFWEBS?' so the alt text is doing the same, and this is sufficient.

Ideally, however, this logo would have a caption explaining what WEFWEBS is. If that were the case then the logo would be read differently, as it would be clearer that the logo is possibly communicating how the organisation views the power-balance or interplay between the three elements, and therefore its approach to its work. The alt text then would be:

WEFWEBS logo, depicting a water droplet, electric charge and a plant, as equal corners of a triangle.

Importantly, this doesn't tell the listener how to interpret the image, but provides literal and unbiased visual information so that they can choose how to understand it, just as a sighted person could.