黑料社

• Web accessibility training
• Foundation-level training for T4 editors
• Working with images
• Logos
• Non-clickable logos (essentials)

Alt text for non-clickable logos (essentials)

Alt text essentials

If your logo is not clickable, it must always have alt text. Logos are never 'decorative' (decorative images have blank alt text).

The list below provides a quick guide on writing alt text for logos, followed by a few examples. If you're short on time, this is all you need to read.

If, however, you still have questions after reading this page, or you'd like to ensure that your logo alt text is as clear as possible, then please refer to the alt text best practice guide in advanced training, which goes into more detail and provides further examples.

• Include the name of the brand or organisation, even if the logo doesn't contain any text.
• If you don't know which brand or organisation the logo represents, you'll need to find out – you could ask whoever sent you the image or Google image search could also help you with this, but don't guess. What to do if you can't find out what a logo represents.
• If the name includes a special character, such as !, @ or #, you should include it in the alt text exactly as it's written in the logo, even if it's meant to represent another letter or group of letters.
• Include any additional text within the logo (e.g. a marketing slogan or line that says what the company does) if that text is legible without zooming in. Add it to your alt text after a colon.
• Include the word 'logo' (or equivalent translation if working in languages other than English).
• If you're planning to create a composite image of two or more logos, bear in mind that your alt text will need to cover both of them, and you only have 125 characters to do this. For this reason it's often better to keep them separate.
• Don't provide extra information in alt text that isn't present in the logo. For example, if the logo contains an acronym but the logo doesn't define it, don't define it in the alt text.
• If the language of the logo does not match the language of your page, see also considerations when working with multiple languages.

1. Will the non-clickable logo be accompanied by link text that mentions what the logo represents (or logos in the case of composite images)? So, the logo itself will not be clickable, but it will have link text to the side, above or beneath it that references the logo's content? See examples.
   • Yes, it will be accompanied by logo-referencing link text: go to step 4.
   • No, it either won't have link text next to it, or there will be link text but it won't mention what the logo represents: 

Examples

Considerations when working with multiple languages

In general, image alt text should be in the same language as the webpage where the image will be used. For the majority of T4 sites this will be in English but if, for example, your webpage is in Spanish then the alt text of that page's images must also be in Spanish.

However, if a logo includes a name or other meaningful text in a language other than the language of the page where the logo will be used:

• It's worth checking if the organisation has a version of the logo in the language of the page you're editing, as many international organisations do.
• If no other version is available, include the text in the alt text exactly as it's written, even if it's in a different language or different script (e.g. Arabic). The name may be mispronounced by screen readers but this is a known limitation of current html. Don't translate it into the language of the page.
• If the name appears in the logo in multiple different languages and none of them matches the language of the page you're editing, choose the one that matches the nationality of the organisation.
• If the logo includes additional text as well as the name of the organisation, it might be clearer to indicate this extra text with quotes. If you choose to do this you must use single quotes, not double quotes:
  • use ' and ', for example: ... includes the text 'c'est la vie'....
  • do not use " and ".
  If you use double quotes you could temporarily break the code of your page. This would not be a serious break and it's easily fixed by simply changing the incorrect double quote to a single one, but you'll save yourself the task by always using single quotes for this.

Examples

Médecins Sans Frontières (MSF) is a French organisation with a logo that includes an English translation, 'Doctors without Borders'. They have various logos with other translations used in different regions.

When using the dual French/English-translated logo: