For Content Producers

Accessibility Guidelines

Colt-Image-1

Ensuring Colt content is accessible to everyone

To ensure published content, emails and any downloadable documents are as accessible as possible to staff and customers, the following guides contain information about both the best approaches to creating content and how to make sure that formats such as PDFs or Data Sheets are as accessible as possible.

For all content whether it is published as a web page, in an email or downloadable document it is important to stay true to Colt’s brand guidelines. Ensure these guidelines are implemented inclusively, by following the accessibility guidance for the use of Typography and Colour, and How to write alternative text, which has sections on the use of Colt logos, stream graphics and icons.

1. Writing for accessibility

Accessibility can be enhanced through best practices in writing. One important area is what we write as the alternative to Colt’s images.

The Colt How to Write Alternative Text guide explains what the best practices are and how easy it is to do.

Other practices can also have a very positive impact on inclusive user experiences and the following short training videos from Microsoft will help anyone involved in the creation of content or documents ensure their output is as inclusive as possible.

Testing your documents

To ensure that you have created an accessible document, there are two approaches you can use which should be used in combination. The first is to use the Microsoft Accessibility Checker, which will help you spot any issues with Word, Excel or PowerPoint.

  1. To check the accessibility of the text against the colours, use the Microsoft Accessibility Checker found in the Tools menu.
  2. The Accessibility Checker will flag any potential accessibility issues including colour contrast. A good way of making sure these don't continue to occur is to check the box "Keep accessibility checker running while I work".
  3. If your content includes any charts, maps, graphs (or anything where being able to identify colour is important to understand a key), make sure the colours are colour-blind safe, or even better, ensure the content is understandable in monochrome.

To simulate the experience of colour blindness you can use one of the following free phone applications. Point it at your screen or printed document, and see if you can still understand the information presented, especially in infographics.

2. Alternative text for images in documents

Images can be made accessible through the provision of Alternative Text, which is often referred to as “Alt Text” or “Image Description”.

These descriptions should be added by the content producer or whoever chose the image on the page, and the Alt Text should follow one simple objective rule.

An image’s Alternative Text should convey the purpose behind the use of the image.

For some images such as maps or bar charts, describing everything that the image conveys can be too much information so the description should be a summary, such as a being the main point chart proves. For the rest of the information it should also be conveyed by the main copy on the page. For example a map that conveys a particular journey, the detailed directions written from the perspective of someone who can’t see the image should be included on the page.

Graphics such as Icons or logos are more functional and the description should focus on the function only. Icon descriptions should just convey what the icon represents and a logo should just say the name of the logo. Words such as “An image of…”, “ A picture of…” or “... logo”, are superfluous, and should be avoided.

To add a description to a document right click on the image and select 'View Alt text' from the options.

Colt Stream graphics

Abstract graphics or textures such as the Colt Stream Graphics are there for aesthetic or brand identity purposes. Because these are not key to navigation or could be considered as core content, they do not need an alternative. If there is an option, simply mark them as “Decorative”.

How to write good descriptions

After choosing an image, ask the following questions to help determine what should be included in the description:

Is it an aesthetic graphic that needs a blank description?

Mark as 'decorative'

Does the image contain anything, anyone or anywhere that is identifiable?

Include names and places if relevant

Does the image contain useful text information?

If so, then include that text in the description

Is the image there to identify a product or service?

Make sure all relevant Colt product or service names are included

Does the image convey an emotion?

Emotions should not be left out of an Alternative if they are obvious or relevant

Is the image a logo?

Then write the name of the product or brand only

Is the image a complex graphic that has multiple points?

If so, make sure all information in the graphic is also included in the main document copy

Is the image a graphic that conveys an outcome or makes a key point?

Make the point the graphic makes rather than describing the graphic

Does the image tell a story?

Listen to the Alternative to decide if it tells the same story

3. Colours

Every branding system can be accessible, but that is not just down to the system itself, but also how its rules are implemented. The following guidance will help maximise how inclusive the Colt Brand colours can be.

Colt's brand colours

Colt's branding system is aesthetically striking and unique in the marketplace, which means that Colt content can be easily identifiable, which is a great starting point for cognitive inclusion.

Colour is a fundamental part of the Colt brand, and colour is perceived mostly slightly (and sometimes significantly) differently by different people. It is important however to remember that many people cannot differentiate between some hues at all. About 1 in 18 men and 1 in every 200 women have significant issues with colour perception.

Ensuring that content designs are not dependant on accurate colour perception means that no one will be excluded due to how Colt's brand palette is used. Judicious use of colour, however, can increase accessibility for some users and improve usability for many. So rather than avoiding colour-based meaning, ensure that when colour is used as a visual cue, there are alternative non-colour based visual cues provided too. This is often referred to in design and engineering as "redundancy".

What is color blindness?

The red-green colour vision deficiency (of which there are four distinct types and a multitude of varying degrees) is the most usual form of so-called colour blindness disorders.

Blue-yellow colour perception deficiency is a lot less common, and monochromatic colour blindness is rarer still. There are also conditions such as Synaesthesia, Glaucoma, Irlen's Syndrome and some people with ASC can create issues for people processing colours.

If you are not colour-blind yourself, you can test a web page or a document using a colour blindness simulator app on your phone. See our section above for details of how to download this.

Colt Pride
Colt Pride Logo
Colt Pride Logo with Deuternopia Filter
Colt Pride Logo with Deuternopia Filter

Using Colt's brand colours - contrast

Being able to see text is obviously a requirement to being able to read it. This is true for other elements such as forms and other kinds of visual content such as icons, figures and graphs. Displaying these with insufficient contrast can make them inaccessible to people with vision deficiencies. Contrast ratios range from 1:1, meaning no difference between the colours, to 21:1 meaning the greatest possible contrast.

The WCAG defines exactly how much contrast should exist for text to be considered accessible to readers.

Small text should have a contrast ratio of 4.5:1 or higher, large text should be 3:1 or higher. Note: text that is classified as "large" if it is 18pt (or 24px) in size when not bold, and 14pt (19px) in size when it is bold.

Using Colt's colours

In Colt's branding system, there are a wide range of colours, used for text or backgrounds, and these vary in how accessible they can be. The following example colour combinations will ensure that text is as legible as possible:

#00D7BD

Colt Teal

Colt's main primary colour, as described in our Brand Guidelines.

This fails testing for usage in body copy, headings and graphical text when used against a white background. In its current form, it is not recommended to use for anything other than logos and stream graphics. With adjustment, it could be used for graphical elements in infographics and headings, but the tolerance for this would need to be explored to see how much it would need to be changed to fit these purposes. It is recommended that it is not used for sub-headings, body copy, labelling in graphics or link text.

#18A08D

Colt Teal Alt

To be used as either Link or Heading text, on a white background.

#107C74

Colt Dusk Alt

Is high enough contrast for any use.

#0099FF

Colt Blue

Either as a text colour or a background colour with white text, should only be used for Headings.

#50009B

Colt Purple

Is high enough contrast for any use.

#00A59B

Colt Dusk

Either as a text colour or a background colour with white text and should only be used for Headings.

#000000

Colt Black

Is high enough contrast for any use.

Notes on other colours

#FFC43D

Colt Yellow

Can be used as a background colour with black text.

#EF476F

Colt Pink

Can be used as a background colour with white text, should only be used for Headings.

#F5F5F5

Colt Ash

Is OK as a background colour for black, charcoal or purple text.

When using a White background, the following colour combinations are colour contrast compliant, and avoid flourescence or colour blindness issues.

Acceptable colour combinations when using a White or Ash background

When using a White background, the following colour combinations are colour contrast compliant, and avoid flourescence or colour blindness issues.

Colt Charcoal, Colt Black

For Copy

(All text sizes acceptable)
Contrast 9:1, 21:1

Colt Purple, Colt Dusk

For Links

(All text sizes acceptable)
Contrast 10.6:1, 3.1:1

Colt Charcoal, Colt Pink

For Buttons

(All text sizes acceptable)
Contrast 8.2:1, 3.6:1

Colour combinations with poor contrasts to avoid

The following colour combinations (when used with text against a background) have been found to provide too poor a contrast to be considered. These however still can be used when in combination with a high contrast colour e.g. as secondary stream or infographic colours against a white background.

#FFC43D, #0095AB

Colt Yellow & Colt Dusk

#50009B, #0095AB

Colt Purple & Colt Dusk

#EF476F, #0095AB

Colt Pink & Colt Dusk

#00D7BD, #FFC43D

Colt Teal & Colt Yellow

#00D7BD, #0095AB

Colt Teal & Colt Yellow

#00D7BD, #50009B

Colt Teal & Colt Dusk

4. Creating accessible data sheets

To ensure that as many customers as possible can access Colt’s datasheets, the following guidance utilises the Colt Branding system along with best accessibility practices in document design.

To ensure that as many customers as possible can access Colt’s datasheets, the following guidance utilises the Colt Branding system along with best accessibility practices in document design.

PDFs can either be produced using InDesign, Acrobat or Word. The most accessible method is creating them in Word and then exporting them as PDFs, but essentially the techniques are the same across each approach.

Both Adobe and Microsoft provide Accessibility Checkers, and the guidance for their use is at the end of this document.There are four main considerations; branding, structure, images and metadata, that, if applied successfully will ensure the information is accessible.

These also a need to follow the best practices for outputting accessible documents that are covered in these downloadable guides:

For any projects that use InDesign to create accessible documents, the Adobe InDesign Accessibility Guidelines will help, however the most successful way of delivering accessible documents is either through Word or Acrobat.

If you are creating PDFs using Word, this guide will ensure you export the Word file without losing any of the accessibility features.

The Colt Branding System has been created to be both distinct and inclusive. The type and colours have been chosen to be accessible and universal. The following guides ensure the application of the branding system supports best practice for colour contrast, colour and meaning, readability and legibility.

See also:

To enable users who cannot see a document as in the Accessible Word guide there should be nested headings. The H1 should be the main heading and the following headings should be H2s followed by H3s. Headings should always be followed by content and never form lists. Make sure that all ordered and unordered lists are formatted as lists.

Some datasheets have more than one column. Avoid using Tabs or Tables to create columns as these can cause issues for screen reader users. Instead in Word use the columns menu under the Page Layout Tab, and in Acrobat use the page layout and ensure there are no issues using the Reading Order Tool.


Data tables

For data tables to be accessible they need to be formatted correctly with a header, alt text and a caption. This is a different approach when using either Word or Acrobat.
This video is a complete guide to tables in Acrobat.

For documents in Word, use the following process:

  1. To add Alt text, right-click your table and select the 'Table Properties' option
  2. Select the 'Alt text' tab, insert your table description and select 'OK'
  3. In the References tab, select the 'Insert Caption' tool
  4. In the caption window, insert your table caption and double-check that your label is set to 'Table', then select 'OK'

For all images included in a data sheet, ensure all core information is included in the body copy, and that the images are supplementary. This will ensure people who cannot see the images don’t miss out on any information they contain. Images can also have Text Alternatives and these can be useful, however for complex diagrams it may be too much to include a full explanation. Instead, a summary that contains the purpose of the diagram and key messages or outcomes will be enough.

The Colt Alternative Text Guide provides more detail and guidance.

To ensure assistive technology users (especially screen reader or voice control users) can find and successfully identify your document, you need to ensure it has the right metadata. This can be added in the file menu, under 'Properties' or 'Info'.


Title

This should accurately match the name of the document and include the document version, e.g. "Version 1.0". Make sure you use the full word 'version', rather than just the letter 'V'.


Subject

This is the abstract that tells the user the intended purpose of the document. Make sure it contains enough information to be specific and unique enough for it to be understood and differentiated from other documents.


Keywords

These are important if you want people to be able to find your document. Think about a high level subject, department, brand & country, as well as purpose.


Comments

Try not to leave this blank, as additional information can be helpful, especially if the user is blind, severely vision impaired or neurodivergent.

Both Word and Acrobat have Accessibility Checkers, which cover structure, colour and other issues. Ensure you check the document before publication.


Using the Acrobat accessibility checker

To check your document for accessibility:

View > Tools > Accessibility > Open will bring up the Accessibility menu that includes the Accessiblity checker. If you right click on any of the issues found it will provide a solution.

Note: This can't check for everything, so for instance it will flag if there isn't Alt Text, but it can't tell you if it is necessary, or what it will be.


Using the Word accessibility checker

Under the 'Review' tab, select 'Check Accessibility'. If you want to to double check that you haven’t missed anything in the creation of your accessible document, Microsoft provides an Accessibility testing function that covers most of the accessibility requirements. This can be particularly useful for checking the document’s structure, checking colour and if there are any objects or images that are missing descriptions.

There is an option to leave the Accessibility Checker switched on whilst working. Although not everyone finds that useful, if you are new to document accessibility, this can be useful.

Note: this can’t check for everything, so for instance it will flag if there isn’t Alternative Text, but it can’t tell you if it is necessary or what it should be.

5. Creating accessible forms (in Word or Excel)

Offline forms can be problematic, and the most accessible format for a form is HTML. There is guidance for form interactions in the Colt Accessibility Guidelines, and further best practices for form components and validation can be found in the Colt Component Accessibility Guidelines.

The most user-friendly downloadable forms are writable PDFs. These are not as usable as HTML forms, but if HTML is not an option, then they are the only alternative that can be made to work, and the best way to create these is through a combination of MS Word and Adobe Acrobat.

Forms can also be created in Excel and these should follow the Excel Accessibility Best Practices below.

Creating an accessible Word document

If you're looking for more general advice on Word documents, or are looking to insert a form into a Word document, view the Microsoft creating an accessible Word document guide, or the downloadable Colt Accessibility for Word Guide.

For this to work, you'll need the 'Developer' tab to be accessible.

If the Developer tab isn't displayed in the ribbon by default, you can add it through the following steps:

  • Under the 'file' tab, go to Options -> Customise Ribbon
  • Under 'Customise the ribbon' and under 'Main Tabs', select the 'Developer' check box

Please note that the Developer tab will stay visible unless you clear the check box or reinstall Microsoft Office.

Creating accessible basic elements of a form

The following are a quick reference to 'How-to' accessibility guides for the creation of the basic elements of a form. Following these is a guidance on how to take your form, and turn it into an accessible PDF.

  1. Write the question(s) for the form field(s). Make sure each question is unique and self-explanatory when read in isolation.
  2. Click on the Developer Tab in the Ribbon
  3. In the Controls section of the Ribbon choose Plain Text Content Control.
  4. Highlight the text box and click Properties in the Ribbon
  5. Write a Title for the text box. This will be read out by a screen reader, so ensure that you explain to the user what they need to include in the text box. Make sure this is specific and unique to this element
  6. 6. Select OK and repeat if necessary.
  1. Write the question(s) for the form field(s). Make sure each question is unique and self-explanatory when read in isolation.
  2. Click on the Developer Tab in the Ribbon
  3. In the Controls section of the Ribbon choose Checkbox Content Control.
  4. Highlight the checkbox and click Properties in the Ribbon
  5. Write a Title for the check box. This will be read out by a screen reader so explain to the user precisely what the check box relates to. Make sure this is specific and unique to this element
  6. Select OK and repeat if necessary
  1. Write the question(s) for the form field(s). Make sure each question is unique and self-explanatory when read in isolation.
  2. Click on the Developer Tab in the Ribbon
  3. In the Controls section of the Ribbon choose Drop Down List Content Control.
  4. Highlight the drop-down-list and click Properties in the Ribbon
  5. Write a Title for the drop-down list. This will be read out by a screen reader so explain to the user what the drop-down options relate to. Make sure this is specific and unique to this element
  6. To add items to the drop-down list click Add. A pop-up window will appear allowing you to enter a Display Name and/or value for each item. Again, Make sure this is specific and unique to this element
  7. Select OK when you have added all items to the list
  1. Write the question(s) for the form field(s). Make sure each question is unique and self-explanatory when read in isolation.
  2. Click on the Developer tab in the Ribbon
  3. In the Controls section of the Ribbon choose Date Picker Content Control.
  4. Highlight the date picker and click Properties in the Ribbon
  5. Write a Title for the date picker. This will be read out by a screen reader so explain to the user what the chosen date relates to and make sure this is specific and unique to this element
  6. Pick the date style, calendar, and location.
  7. Select OK

Converting the accessible MS Word form to Adobe Acrobat

To create an accessible form in Adobe Acrobat it is easier to build it in MS Word first rather than use Acrobat directly, although this is possible.

Make sure you have the latest version of Acrobat Pro as this will enable you to access all the accessibility options.

Follow these steps to set up Acrobat ready to check documents:

  1. Select Tools in the taskbar at the top of the screen
  2. Scroll down to the Protect and Standardise section
  3. Drag the icon for accessibility over to the toolbox pane on the right-hand side of the screen. This will add accessibility tools to your toolbox.

Skip this if you have already set up Acrobat on your computer.

Whether you have exported your Word document as a PDF or not the next steps are the same.

If you do not have the form preparation tools, then follow these steps:

  1. Select Tools in the taskbar
  2. Scroll down to Forms & Signatures
  3. Drag the icon for Prepare Form to the toolbox on the right of the screen
  4. Click the Prepare Form icon in your toolbox. Then select your file that you want to convert to a PDF form.

If you have done everything right in Word, all your form fields should have been detected.

You will need to check that the form fields have been created properly. To do so, follow these steps:

  1. Click Prepare Form in your toolbox, this should highlight all forms on your page
  2. Right click on the first box. Choose Properties. This will open the properties window
  3. Each form box should have a unique name (found on the General tab)
  4. Each form field should have tooltip text which is descriptive and read out by a screen reader, or when the user hovers over the field with their cursor
  5. The options, appearance and positions tabs allow control over the form fields (such as multi-line input, font, font size etc)
  6. Once you have checked all the form fields and are happy, re-run the accessibility checker.

To check your document for accessibility:

  1. Select the Accessibility tab from the right-hand toolbox or Select View > Tools > Accessibility > Open. This will bring up the Accessibility menu
  2. Click Accessibility Check to open the Accessibility checker options panel
  3. Ensure the Create accessibility report box is not ticked
  4. The report will appear on the left of the screen and highlight any issues with the document, any areas with issues will be highlighted in bold and have a bracketed number after them
  5. Right-clicking on an issue will open a dialogue box with guidance to fix the issue

Accessible Excel forms

Before you start creating a form in Excel, ensure you are using an Excel Spreadsheet Accessibility Template, and follow the best practices for creating Accessible Excel sheets.

  1. Make sure the cell A1 is reserved for a Help file. This cell should contain enough information for the user to understand what the form is for, what different sections there are, and what order the form is in.
  2. If the form contains multiple tabs, then make sure each tab’s name is self explanatory, add contextual help text to cell A1 in each sheet and delete any unused tabs.
  3. Make sure that colour is not the only way of identifying different sections of the form and that all text is colour contrast compliant.
  4. Avoid having any empty rows, columns or cells in the layout as these can be confusing when navigating using a screen reader. Ensure any unused cells are hidden, including hiding any rows or columns outside the working area.
  5. Write the questions for the form fields in advance and make sure each question is unique and self-explanatory when read in isolation.
  6. Make sure the questions are always in the cell to the left of the cell that contains the form field.
  7. Ensure every column is labelled and everything in that column relates to the label. Go to Ribbon > View > Formula Bar and double click the name to select it.
  8. Make sure that each input field has specific instructions: Go to the Data tab in the Ribbon, Click on Data Visualisation Tool and click on the Input Message Tab,
    Add the instructions to the Input Message field and make sure that the “Show Input Message When Cell Is Selected” box is checked.
  9. For accessible dropdowns: Select the cell in your form > Go to the Data Tools group in the Data Tab and select Data Validation > In the Allows dropdown choose List > Uncheck the Ignore Blank checkbox > Check the Incell dropdown box > In the Source field add values making sure there is a comma and space after each and ensure there are no extra comma or spaces at the end > Select OK
  10. Label the end of the form
  11. If this is a form that is intended to be printed, set the print area and test with a printer

For more advanced forms and Excel accessibility practices, see this guide from Microsoft.

  1. Run the Microsoft Accessibility Checker in Excel and make sure all outstanding issues are resolved.
  2. Try completing the form using the keyboard only, and ensure you can successfully interact with every element in this way.

6. Creating accessible process documents

Flowcharts guide readers through a complex process in a visual manner. These visuals can help users make better decisions about a complex issue, making flowcharts a valuable communication tool.

However, like any image published, without a text description and a textual equivalent these complex images are completely inaccessible for anyone who is vision impaired or blind. Additionally, some people prefer to read through processes as opposed to reviewing a visual representation of a process or require both the text and visual to understand a process.

To make the description of a process more accessible to everyone, the following considerations are needed.

Before or after creating the visual representation of the process, write it up as a script using headings and lists.
Headings are a great way to indicate the start of your process or highlight key steps in the process. They provide a navigation point for visual and non-visual users to follow.

  • In MS Word use the Headings menu and ensure that title describing the process is the only H1 in the document, and then use ordered, or numbered, lists to outline the entire process in a linear manner.
  • The steps in your ordered list represent the main steps a user needs to take in the process. Using numbers allows you to easily reference a particular step as users move through the process.
  • Unordered, or bullet lists can indicate specific decisions at a point in the process to direct users to the next step.
  • To help visually identify each step of the process, use bold on the Ordered list elements.

Example of a Process Outline

  1. Review data to determine if criteria is present (If yes, proceed to Step #2, if no, proceed to Step #3

Typography can present barriers to accessing information. The following tips will ensure that the text on your process chart is optimised for accessibility.


Colour

Ensure any colours used are accessible to either people who are vision impaired or who are colour blind. This means your colours must have enough contrast between the foreground and background, and that colour blind people can both differentiate the colours, or fall back to shape or labelling to identify the different steps in a process.

To check the accessibility of the text against the colours, use the Micosoft Accessibility Checker found in the Tools menu. The Accessibility Checker will flag any potential issues including colour contrast. A good way of making sure these don't continue to occur is to check the box "Keep accessibility checker running while I work".


Typography

Any fonts should be readable and sized large enough to be easily read. Stick to more readable, legible and universal choices such as Arial for digital or printable documents.

Novelty fonts such as Comic Sans, Open Dyslexic or Bionic Reading should be completely avoided. There is a common misconception that these can make a document more accessible, whereas research has shown the complete opposite to be true. The following recommendations will aid visual comprehension of the document hierarchy:

Heading Level #1: 24pt and Bold
Heading Level #2: 16pt and Bold
Heading Level #3: 12pt and Bold

Body copy should be at least 12pt and never bold.

Never underline a heading unless it is also a link to an external document or web page. If it is a link, make sure that this is implicit in the heading text. Headings can also be differentiated by colour or a different font. For more information on accessiblity within the branding guidlines, review the guides to Accessible Typography or Accessible Colours.

After you have designed your process, save the entire project as a single image. This will make it easier to provide a single alternative text description and caption on your webpage.

The text description of a process should not be a replacement from the scripted version, but what it should do is tell the user what the process is for. This should include information such as whether it is an alternate or version of a design, and what the outcomes of the design are.

See the guidance document on Alternative Text for Images in Documents.

7. Typography

The Colt Brand includes a suite of fonts that are recommended for digital and documentation use. At the heart of any brand system is the font or fonts and Colt has chosen Arial as its digital font. Arial is reasonably good for readability and legibility, and it is also universally supported across platforms.

It is important for all these reasons to use Arial for all web pages, apps and documents. Because of their issues with legibility, avoid using Arial Narrow or Arial Black.
Novelty fonts such as Comic Sans, Open Dyslexic or Bionic Reading should be completely avoided.

There is a common misconception that these can make a document more accessible, whereas research has shown the complete opposite is true. More information on font accessibility.

Never under any circumstances justify text. It might look neater, but it makes the document a lot harder to read. Justifying text can create issues for people with either vision impairments, dyslexia or Irlen syndrome.

As far as possible keep all text anchored to the left of the page or column, unless the language reads right to left or top to bottom, and in those cases use appropriate formatting. Centred text is only appropriate for headings or quotes.

Use italics sparingly and never for large sections of block text. However they are particularly good for adding additional meaning such as:

  • Emphasis (as opposed to bold for strong emphasis)
  • Works (book or document titles, acts of Parliament, legal cases, film, TV and radio programmes, paintings, compositions, ship and aircraft names…)
  • Foreign words or phrases (tête-à-tête, faux), or in biology for Latin binomials (homo sapiens)
  • Stylised text such as “see” and “see also” index cross-references, or index locators that refer to illustrations, maps, or diagrams

Never under any circumstances compress the text by reducing the line spacing to under 1.5 and this will introduce issues for legibility, even at larger font sizes.

Foreground and background colour choices can be problematic especially for people with vision impairments or issues with colour perception. Make sure that the majority of the text is either black or a very dark grey or blue and if there are background images, ensure that all their colours are very light, or that there is a semi-opaque background behind the text that boosts contrast.

See the Brand Guidelines on Accessible colour combinations.

8. Videos

Video content can be problematic for many users especially if they can’t hear (or struggle to hear) the audio or see the images. Many of the issues for people with hearing or vision disabilities stem from the script or shoot and can’t be resolved in post production, so ensuring the following best practices are reviewed at the start of the project is of paramount importance.

Supporting users with vision impairments

Videos must be more than a mixture of images, music and text. This is a style of videos that excludes many vision impaired people. All captions should be spoken aloud.

If there is a place, event or person in the video that is recognisable and/or important to understanding the message, ensure that they are identified in the script. This could be as simple as someone introducing the speaker or them introducing themselves.

Where speakers are identified in a graphic caption, as far as possible they should also be named verbally on their first appearance, or at the soonest opportunity. It is also important to remember that a speaker’s title or role can be as significant as their name, as it establishes credentials.

Where information is displayed on screen as graphics, the key message must also be communicated in the script. This is especially important for graphs and charts, URLs, contact information or details of products and services.

In cases such as maps, graphs, explanatory charts and technical illustrations - much of the information may not be able to be conveyed satisfactorily in the limited time available. In these instances a summary of what the graphic demonstrates or proves delivered by the presenter will be enough.

Testing vision accessibility

Read the script to someone who is unfamiliar with it and ask them to close their eyes at the same time to ensure they are focused on the audio.

Repeat the same exercise with the final edit, playing the audio only to someone who is unfamiliar with it. In both cases the content should make perfect sense.

Supporting users with hearing impairments

For many people with hearing impairments reading lips is a basic need, so when mouths are not visible, closed caption subtitles are a secondary way of accessing speech. When framing any shots where the speaker is delivering to camera, ensure that their lips are not obscured by closed caption subtitles when they are switched on. How to change the positioning of your captions in YouTube.

To ensure music does not interfere with how audible speech is, cut or fade out any music whilst words are being spoken. If this is not possible, ensure the background music is at an appropriately low level to allow the viewers to clearly hear the speech.

When it comes to choosing music, look for pieces that are not too dynamic, i.e. that do not have a lot of short peaks that would interfere with the speech track.

Closed Captions should be available for all speech. They should be Verbatim and support average reading speeds (240 words per min), so when there are pauses or gaps, ensure they stay visible long enough to be easily read.

There are several nuances of speech that can be included in the way closed captions are presented. Check the Closed Captions Cheat Sheet to ensure these are included.

As well as mouths, make sure that on screen graphics are not obscured by the open captions as these can contain key information.

When conveying numbers including time, money, ensure you follow established conventions.

More information about Closed Caption subtitles

Testing audio accessibility for videos

Listen through very basic speakers on a mobile phone to make sure any music does not drown out the speech.

Ask someone who is unfamiliar with the video to watch it with the sound switched off. Were they able to understand what was happening and be able to tell you what the key takeaways were?

9. Downloads

Accessibility for Emails

This deck will show you how to create accessible emails.

Download our email guide

Accessibility for PDFs

This deck will show you how to create accessible PDF documents.

Download our PDF document guide

Accessibility for PowerPoint

This deck will show you how to create accessible PowerPoint presentations.

Download our PowerPoint guide

Accessibility for Word

This deck will show you how to create accessible Word documents.

Download our Word guide

Accessible Caption Cheat Sheet

This cheat sheet will give you a head start with closed captioning

Download our CC cheat sheet