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 

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

Combinations that should NOT be used

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

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: 

1. Would someone outside of Compassion understand the language I am using?
2. Is it possible to quickly scan this article and understand what it is about?
3. Is the message still clear if someone cannot see the colours, images or videos?
4. Is the markup clean and structured? (no additional, unnecessary tags, headings correctly structured etc)
5. 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:

1. A single piece of content should never have more than one H1.
2. Avoid skipping headings to prevent confusion.
3. Separate paragraphs out using paragraph tags — do not use line breaks in place of starting a new paragraph.
4. 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.

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.
  

Using Alt Text

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

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:

1. If it’s a creative photo or supports a story, describe the image in detail in a brief caption.
2. 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.
3. If you’re sharing a simple chart or graph, include the data in the alt text so people have all the important information.
4. Each browser handles alt tags differently. Supplement images with standard captions when possible.
5. 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.

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.

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:

1. 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
2. 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
3. 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
4. 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