Welcome to the Compassion in World Farming Content Accessibility Guide! We want our content to be accessible to all. Everyone should have the opportunity to access our content, whether they can read it themselves, or by using screen readers or other similar tools.

Why it matters

We are all responsible for ensuring that our content is accessible.

In the Digital team we are responsible for the accessibility of our digital products, templates and template elements - such as our forms, buttons, logos, speed and device responsiveness. We work to a minimum of Level AA of the Web Content Accessibility Guidelines (WCAG) and are always working towards Level AAA.

As content editors you are responsible for the accessibility of any content that you publish.

There is an additional bonus that, the more accessible our content is, the higher up search rankings, such as on Google, it is likely to appear. For more guidance on search ranking please read our Search Engine Optimisation guide.

Accessibility goes far beyond ensuring everything on the page can be read as text. It should also guide how you organise content.

Depending on the country you are in and your audience, there may be laws governing accessibility levels required. Our content should be accessible to people of all mental and physical capabilities.

Prioritising accessibility

Accessibility should never be an afterthought.

If you are briefing a designer or agency, brainstorming a creative, or pulling something together in Canva, you should be thinking about and planning for accessibility from the very beginning of this process. Clearly communicate the importance of accessible content to any externals, include this in any briefing documents and ensure that it covers any relevant elements from the guide below.

Share our shortened accessibility guide with agencies.

Understanding accessibility

You can gain an understanding of how people with different disabilities or abilities perceive our website using accessibility simulator tools such as this simulator tool or this screen reader tool, but there are many more tools available.

SiteImprove

The SiteImprove platform is a tool that makes it easy for you to produce accessible content on our websites and it will highlight issues from spelling mistakes to missing alt text. You can use this from within Umbraco or in the SiteImprove platform. If you do not yet have access and need SiteImprove training please raise a case with the Digital Team.

Brand Colours

In order for brand colour combinations to be accessible, the background and foreground colours must meet sufficient contrast levels for the Web Content Accessibility Guidelines Level AA.

Accessible combinations

#db3c0a & #ffffff

#db3c0a & #ffffff

#66bc29 & #1e1e1e

#66bc29 & #1e1e1e

#f55523 & #1e1e1e

#f55523 & #1e1e1e

#1e1e1e & #ffffff

#1e1e1e & #ffffff

#0bab47 & #1e1e1e

#0bab47 & #1e1e1e

#ececec & #1e1e1e

#ececec & #1e1e1e

Combinations that can be accessible

These combinations require the text to be large, this means the text must be either:

Minimum 19px (12pt in print) and Bold
Minimum 24px (18pt in print) and Regular

#db3c0a & #1e1e1e

#db3c0a & #1e1e1e

#0bab47 & #ffffff

#0bab47 & #ffffff

#f55523 & #ffffff

#f55523 & #ffffff

Combinations that should NOT be used

These combinations are not accessible even with large or bold text.

#66bc29 & #ffffff

#66bc29 & #ffffff

#ececec & #ffffff

#ececec & #ffffff

Or any combination of Green and Orange.

How to check contrast

Both this website and this browser extension will allow you to check the contrast of your colours to Level AA.

Writing

We write for a diverse audience of readers who all interact with our content in different ways. We aim to make our content accessible to everyone.

Provide context and avoid abbreviations. Screen readers don't automatically know the language nuances that our brains naturally pick up. Be succinct while also being clear. Sentences that use active voice are simpler, shorter, clearer and more conversational. See our content style guide for more detail on this.

When you are writing, ask yourself the following questions:

Would someone outside of Compassion understand the language I am using?
Is it possible to quickly scan this article and understand what it is about?
Is the message still clear if someone cannot see the colours, images or videos?
Is the markup clean and structured? (no additional, unnecessary tags, headings correctly structured etc)
Does this work well on mobile devices?

Avoid directional language

Where possible, avoid directional language, especially if it will not apply the same across all devices. For example, on our standard action pages, the form is in the right-hand column on desktop but appears either towards the top or the bottom of the page on mobile. Avoid writing things such as ‘use the form on the right’.

Write with clear structure

Start with the most important information. Keep paragraphs focused on one thing and use subheadings to break up topics.

Use clear language

Write short, clear sentences. Avoid technical language and slang. Explain what abbreviations and acronyms mean the first time they are used.

Use subheadings

Use subheadings correctly nested. Do not choose subheading sizes for styling reasons. Use headings to neatly group your content, but do not be excessive in having lots of nested headings — this can have the opposite effect of making copy hard to follow.

HTML

Use tags correctly

Most writing elements have their own HTML tags, which should be used for that purpose. While some can be repurposed to do something else, this should only happen when there is no other way to do that thing. This should not be done purely for styling reasons. For example:

A single piece of content should never have more than one H1.
Avoid skipping headings to prevent confusion.
Separate paragraphs out using paragraph tags — do not use line breaks in place of starting a new paragraph.
Write lists using the ordered list <o> or unordered list <ul> tags, rather than separate paragraphs with dots.

Forms

Make sure that submit buttons clearly state what the action will do.

Layout

Our digital products are developed and tested to work well on all devices and screen sizes, this includes any code blocks that we provide you with. For this reason, we ask you not to modify the structure or layout of our code, unless you do this in collaboration with us. In this way we can test and correctly mark up the content for you.

Writing Dates and Times

Writing dates and times in a specific, consistent way is crucial for accessibility because it ensures the information can be unambiguously understood by assistive technologies (like screen readers) and users with cognitive or learning disabilities, regardless of their regional conventions.

Why Specific Formatting is Needed

Eliminating Ambiguity: A date like 05/04/2021 means May 4th in the U.S., but April 5th in many other countries. This can cause critical confusion for all users, but especially for those with cognitive disabilities who may struggle to manipulate words or numbers to figure out the intended meaning.

Accurate Screen Reader Interpretation: Screen readers often interpret abbreviations or non-standard formats incorrectly. For example, SAT 05/09, 09:10 might be read as "s a t zero five zero nine nine ten" rather than "Saturday, May 9th, 9:10 AM".

Superscripts: If the ordinal indicators are formatted as superscripts (e.g., 1ˢᵗ), they might be ignored entirely by some screen readers or read out as separate, non-meaningful characters, which creates a poor user experience.
Inconsistency: While most modern screen readers handle common date formats well, there can be inconsistencies across different screen reader and browser combinations, or with various text-to-speech voices.
Misinterpretation in other contexts: In non-date contexts (e.g., "1st floor," "2nd Chapter"), the interpretation can be unpredictable. it's better to write the word instead eg "first floor" or "chapter two".

Reducing Cognitive Load: Users with learning disabilities or conditions like dyslexia benefit from clear, predictable formats that minimize the mental effort required to understand the content. Full, spelt-out words (e.g., "January" instead of "Jan.") are less likely to be misunderstood.

Ensuring Consistency: Consistent formatting throughout a website or document helps users build expectations and reduces errors, which is a key part of good user experience for everyone, including those with disabilities.

Best Practices for Accessible Dates and Times

Write out the full month and day names (e.g., "Wednesday, 4 August 2025" or in USA as "Wednesday, August 4, 2025"). This is the most universally understood and reliably read format by screen readers. In the UK and EU countries, we write day month year, only the USA write month day year, but the format still applies.

Avoid using only numbers and slashes/dashes/hyphens for dates (e.g., 01/15/2024 is confusing).
Use the 12-hour clock with AM/PM or a consistent 24-hour format (e.g., "3:00 PM" or "15:00").
Use colons for separating hours and minutes (3:00 PM) as they are read consistently by screen readers, unlike periods (3.00 PM).
Avoid using dashes or hyphens for time ranges in text; instead, use full words like "to," "until," or "through" (e.g., "from 2:00 PM to 5:00 PM").

Using dashes and hyphens

Screen readers generally handle hyphens in a way that depends on the context and the specific screen reader settings. Hyphens, em dashes and en dashes must be used be used with care and correctly.

Em and en dashes

en dashes

These are longer than hyphens and can be used in place of commas. There should always be two, one either side of the clause that you are pulling out, and a space.

En dashes – in the UK – have a space on either side. This is also common in European language typography as well for parenthetical phrases.

em dash (US)

An em dash—in US spelling—is really long and doesn’t have a space either side.

Important! Do not use the hyphen symbol as a substitute for the dash.

Use the en or em dash symbol from the Word symbol menu and customise to your keyboard for easy access. If you only have one endash, it probably should be a colon.

Replace with commas or restructure: When using dashes to set off nonessential or parenthetical information within a sentence, consider using commas or restructuring the sentence entirely. Commas are handled naturally by screen readers (often creating a brief pause but not read aloud as a word).

Spacing considerations (if you must use dashes): When using dashes for parenthetical use, the generally preferred accessible method is to use a spaced en dash (with a single space on either side). The spaces help screen readers avoid mistaking the dash for a hyphen attached to a word.

Consistency is key: If a specific style is chosen, use it consistently throughout the content to avoid confusing users.

Avoid using dashes for minus symbols: Ensure you use the correct mathematical symbol for a minus sign (− or U+2212) if needed, as screen readers will read an en/em dash as a "dash" and not a "minus symbol".

Hyphens

Hyphens should not be used to replace words such as "to" "between" "until" etc. The most common use is using hyphens between dates or a time range when a word should be used instead to clearly define what the hyphen is representing, as this may not be interpreted correctly by the screen reader or just read out as "dash" instead, which is a poor user experience.

Hyphen can be used in compound words such as "cage-free" "free-range" etc We hyphenate these types of words as part of our brand. They are semantically correct and help convey meaning.

Most modern screen readers do not announce the hyphen explicitly in common compound words. Instead, they read the phrase as a single word or as two words smoothly, like “free range” or “cage free.” This is because hyphens are often treated as word separators rather than punctuation that needs to be spoken.

Avoid using hyphens for visual spacing (e.g., “free - range”), because that can cause awkward pauses or misinterpretation.

If you have specific examples you are querying, contact the digital team to help identify the correct assessment. This guidance will generally apply to all languages.

Using bold and italics

Bold and italics styles can be problematic for accessibility, as they can be difficult for people with visual or cognitive impairments to read and are often ignored by screen readers. Bold should be used sparingly for emphasis, like for key instructions or keywords, while italics should generally be avoided as they are harder to read and can pose problems for users with dyslexia.

Bold

Use sparingly: Use bold only for important information or keywords to help users scan content quickly.
Avoid large blocks: Do not use bold for entire sentences or paragraphs, as this can reduce readability.
Best for instructions: Bold is a good option for emphasizing important instructions to visual users.

Italics

Use sparingly or avoid: Italics can be difficult to read, especially for people with dyslexia or visual impairments.
Avoid for long sections of text: Do not use italics for lengthy blocks of text.
Avoid for headings: Do not use italics for headings or titles.

Accessibility considerations

Screen readers: Screen readers often do not announce the emphasis conveyed by bold and italic tags, meaning that the emphasis is lost for users who rely on them.
Dyslexia: Italic text is harder to read for people with dyslexia, and using it in large blocks can cause problems for those with cognitive impairments.
Underlining: Avoid underlining for anything other than hyperlinks, as users will expect it to be clickable.
Alternative methods: For emphasis, consider using the emphasis style or bullet points, as they are more accessible than excessive bolding or italics.

Hyperlinks

All hyperlinked text should clearly indicate what the link points to. Avoid terms like ‘click here’ or ‘read more’. When possible, links should also have a link title.

Make it descriptive

Bad: Click here to read about EggTrack.
Good: More information is available in our Sixth EggTrack report.

Make it concise

Bad: More information is available in our Sixth EggTrack report here.
Good: More information is available in our Sixth EggTrack report.

Make it unique

Avoid having similarly named links if they link to different places.

Make it visually distinct

Our hyperlink style is always underlined, and most often our brand green. Do not underline text that is not a link.

Images

Images are great for creating more visually engaging content but do not use an image to provide information that could be communicated in writing.

Avoid overlaying images with text. When you are deciding which images you'd like to include in an email or on a page, plan to use text-free images with alt text and supporting captions if suitable. Overlaying text in an image immediately excludes users with a vision impairment.

If you have an image with overlaid text that you are hoping to use, or you are thinking about having a graphic designed, follow the guidance below or reach out to us if you have any doubts:

Ensure that the text is legible on all devices i.e. not too small on mobile and not pixelated on large screens.
Aim for the background behind the text to be a solid colour, then:
Ensure that the text to background ratio is at least 4.5:1 (Level AA), using the Web Accessibility In Mind Contrast Checker. This ensures that those with colour blindness, amongst other impairments, will be able to distinguish the colours from each other. (If unsure, you can always check with the Digi team).
If your background is not a solid colour, or you are struggling to get sufficient contrast, you can create contrast with a text outline. This social content is a good example.

Graphs, charts and tables

When presenting data visualisations, always aim to use an accessible format (i.e. not an image/screenshot). Flourish is a great tool that comes with accessibility features, please reach out to the Digital Team for access to Flourish.

There are a number of ways a data visualtion can be embedded. You must ensure that the embed has a title or a description that can be accessed by a screenreader. This will vary based on the tool.

Depending on how accessible your data visualisation is, you may need to include alt text and/or a text description nearby - especially if you are using an image of data. Please follow these alt text steps to work out what is needed.

When using tables in a PDF or in an Umbraco Rich Text Edior, ensure that the rows and cells are properly identified as header and data cells where appropriate.

Using Alt Text

Video: The fundamentals of Alt Text

30 minutes - To access this video, use your SiteImprove log in.

The alt tag is the most basic form of image description, and it should be included for all images. However, sometimes it should be empty:

Alt text decision tree

Does the image ONLY contain text? (Avoid at all costs!)

No

Continue ↓

Yes

… and the text is also present as real text nearby.
Use an empty alt attribute. See Decorative Images.

… and the text is NOT present as real text nearby (wherever possible, it should be).
Include the text in the alt tag description of the image.

… and the text is only shown for visual effects.
Use an empty alt attribute. See Decorative Images.

Does the image contribute meaning to the current page or context?

No

Continue ↓

Yes

… and it’s a simple graphic or photograph.
Use a brief description of the image in a way that conveys that meaning in the alt attribute. If there is text, include this in the alt text OR in real text nearby. See Informative Images.

… and it’s a graph or complex piece of information.
Include the information contained in the image elsewhere on the page AND a short description to identify the image and, where appropriate, indicate the location of the long description in the alt text tag. See Complex Images.

… and it shows content that is redundant to real text nearby (i.e. the information in the image is all described as real text nearby).
Use an empty alt attribute.

Is the image purely for decorative purposes i.e. it adds no context to the page? (It would be unusual if images in your content were not adding context)

No

Continue ↓

Yes

Use an empty alt attribute. See Decorative Images.

Is the image's use not listed above or you are unclear what alt text to provide? Ask us!

You can also reference this detailed flow chart, which includes some if in doubt scenarios.

You are unlikely to use images that do not fall into one of these categories, all editorial imagery you use is contributing meaning to your content. If you do have queries about other types of images used on our site, such as functional icons, just let us know.

For a collage of images, your alt text should describe that it is a collage, and instead of describing each image, it should describe what the collage is showing as a whole.

Writing Alt Text

In addition to the video shared above, which guides you through writing good alt text, here are some pointers for the language to use, which will depend on the purpose of the image:

If it’s a creative photo or supports a story, describe the image in detail in a brief caption.
If the image is serving a specific function, describe what’s inside the image in detail. People who don’t see the image should not miss out on the context the image provides.
If you’re sharing a simple chart or graph, include the data in the alt text so people have all the important information.
Each browser handles alt tags differently. Supplement images with standard captions when possible.
Alt text should always end with a “.” so that a screen reader will pause after reading.

You can learn and practice writing good alt text using this website.

Videos

If your video has sound, make sure that it does not play automatically. A hearing-impaired person may not be aware of the audio volume; users with physical or cognitive disabilities may not be as fast to stop the video and may impact other people in their environment.

Ensure that the video contains no unannounced flashing or strobing.

Ensure that any foreground audio is clearly distinguishable from any background audio, this will help users who are hard of hearing. Background audio should be low.

Text in videos

If you include text in your video, ensure that this is conveyed in captioning or voice over.

Text to background contrast applies in the same way as described above for images.

Keep text away from where closed captions will be. Cluttered screen text can be difficult to read for those who require closed captions.

Captions/Subtitles

Captions (sometimes called “subtitles”) provide content to people who are Deaf and hard-of-hearing and/or content translated into another language.

Captions are a text version of the speech and non-speech audio information needed to understand the content.

Captions are also used by people who process written information better than audio.

Do I need captions?

Video-only (no audio content):

For pre-recorded and live:
- Captions are not needed because there is no audio information.

Video with audio content:

Does the video have audio information that is needed to understand what the video is communicating?

If no (for example, it is just background music):
- Captions are not needed because there is no important audio content. Consider informing users.
If yes:
- For pre-recorded:
  - Captions are needed to provide the audio content to people who are Deaf or hard of hearing.
- For live:
  - Captions are needed to provide the audio content to people who are Deaf or hard of hearing.

Types of captions

Closed captions are accessible, they can be read by a screen reader and allow the viewer to be in control of whether captions are visible or not. Close captions also allow for extra languages and translations. Our Digital Media can make these for you if needed.
Open captions are not very accessible, because they are burned in to the video and cannot be read by a screen reader, nor can they be turned off. Including open captions in your video should be the very minimum standard, but we should be aiming for better.

Voiceover/Audio

Including a voiceover along with closed captions means that those that cannot read, or find reading difficult, are offered additional language accessibility. They may find the closed captions distracting and prefer to have a voice over with the captions switched off. Doing this ensures that our content can be consumed by those who are deaf or blind.

Signed

We do not currently include sign language alternatives in our media content and it is not required for the AA Level of accessibility that we currently work to. However, this is something that we should certainly be striving to do, especially in big campaign videos.

Social, Lead Generation and Marketing content

Social media platforms are increasingly providing ways to enable you to make your content accessible, the main feature being image alternative text.

You can find a huge amount of detailed guidance for all social platforms in this hub. It covers all types of social content, and known accessibility issues with each platform.

Quick read: Facebook Accessibility Guide

Quick read: Instagram Accessibility Guide

Quick read: Twitter Accessibility Guide

Quick read: TikTok Accessibility Guide

Emojis

Repeated emojis in a social post create a bad experience for screen reader users. Here is an example showing how infuriating it can be.

Limit emojis to one or two per post
Don't put emojis between each word
Don't use emojis one after the other
Don't use a different emoji for each bullet point

Images

Follow the image guidance above, if the platform allows, include alt text on any appropriate images (follow the decision tree above).

Meta does not offer alt text for ads media library items, but does generate some alt text itself.
Meta, Twitter and LinkedIn do allow this for regular social posts. Twitter allows this for GIFs as well.
Google ads does not currently offer alt text.

Please try to avoid images with overlaid text. If you do use images with text you will need to refer to the first step of the decision tree, and potentially ensure that the text is also included in the ad or post description.

Video

The guidance provided above applies to video in social content too. However, some social platforms do create restrictions.

Captions

You may only be able to offer open captions depending on the platform. Where possible, uploading an srt file with your video for closed captions is preferable.

Meta generates automated captions but only in English, these should always be checked and edited.

Live content should still include captions.

Instagram stories can use the caption sticker.

You can download stories and share these on other platforms if you're wanting to post live pieces to cameras from events.

There is never a reason to not include captions, even if it's not a polished edited video.

Text in videos

For very short social videos, including only a single phrase of text, you may not need to consider captioning. The text, if informative, should also be included in the surrounding content.

Follow the same guidance for contrast and text descriptions for your video as with images, this social content is a good example of creating contrast.

Colour use

In any visual elements, do not use colour as the only method to convey meaning, such as green for yes and red for no. Always include a text context to support this meaning.

Text colour against the background colour may appear clear to a sighted reader but for those with a visual disability this may present issues. To meet Level AA as mentioned above, there must be a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. To help understand what this means and how it works, you can use WebAim’s Contrast Checker.

To gain a better understanding of how a reader with a colour vision deficiency may experience your content, you can use this Web Disability Simulator.

Documents

Your responsibility for creating accessible content is not only limited to our website and transactional pages, but also includes PDFs, word documents, other document types and social media content - any content that we are putting out there.

Documents that you and your teams create should be checked regularly to make sure the content is up to date and doesn't contain broken links. Most document software comes with built in accessibility features for you to use.

Please use the guide on creating accessible documents before uploading to the Umbraco CMS.

Quick read: CIWF Accessible Documents Guide

Video: Document Accessibility

1 hour - To access this video, use your SiteImprove log in.

Video: PDF Accessibility

1 hour -To access this video, use your SiteImprove log in.

Testing for accessibility

Before you share any content with our audience, confirming that it is accessible should be part of your sign-off or testing process. This should include everything that we have covered above and can be summarised using POUR, the guiding principles of WCAG:

Perceivable - Users must be able to understand the content being presented:
1. Images free of text
2. Alternative text provided
3. Captions included in videos
4. An adaptable layout that works on all devices
5. Distinguishable content with sufficient colour contrast
Operable - users can successfully navigate and use interactive elements:
1. Correct HTML heading structure
2. Correct HTML tags
3. Do not create content that could cause a seizure
4. Provide descriptive, concise and distinct hyperlinks
Understandable - Users should be able to comprehend the content, and learn and remember how to use the site:
1. Use consistent presentation and format - please refer to our brand guidelines
2. Make text readable and understandable, avoid abbreviations
3. Appropriately targeted language and reading level
4. Written descriptions of information contained in charts or graphs
5. Summaries of long articles
Robust - Content can be interpreted by a wide variety of users, allowing them to choose the technology they use to interact with our sites, documents and media:
1. Use correct HTML structure
2. Use the accessibility features when creating documents

Further reading

Content writers resources from WCAG

Introduction to Web Accessibility from WCAG