General accessibility guidance

Make text as readable as possible

Clear and direct text helps a variety of readers, including those using assistive technology like screen readers and those still learning the language you are posting in.

• don’t overuse caps. Full-caps can be difficult to read and misinterpreted by screen readers
• use camel case for multi-word hashtags. This helps to make hashtags more legible and compatible with screen readers. For example, write #ADayOutInLondon instead of #adayoutinlondon.
• Limit emoji and emoticon use, as they are read aloud by screen readers and other assistive technologies. For example,   is read as ‘smiley face’. Be aware that other emojis are more complicated, such as ‘face with closed eyes and stuck out tongue’. Place emojis at the end of content/after hashtags where possible.
• Limit line length. Long and unwieldy sentences may be confusing with a screen reader, and can interfere with readability and retention.
• Use an adequate font size, and ensure that the font is legible.
• Use headings nested in the correct order. Do not use empty headings to create white space.
• Make use of the stylings available to you - bold, emphasis, bullet points, pull quotes, etc - to break up text.
• Consider and limit PDF usage. Complex PDFs are difficult to make accessible, and content may be better served on a webpage or in another format.
• Ensure tables used to present data are correctly marked up with a description and clearly labelled headers.

Images and alt text

All images should be accompanied by alt text/image descriptions.

Alt text may be read out to users who use assistive technology, so it’s important to think about the context and what is important to the message you’re trying to convey, rather than just a description.  There is no need to describe every single detail of the image, as listening to a long image description via a screen reader can be exhausting. Don’t include irrelevant information, but instead pick out the few key details that help the listener construct a mental image.

Images should not be used to convey textual information.

Link text

Instead of using vague terms like ‘click here’, use more descriptive and specific call-to-actions such as ‘sign up to our newsletter’ or ‘visit the accessibility project webpage’.

Avoid using the same link text for different destinations (particular on the same web page).

Video description and captioning

Video captioning is absolutely necessary for viewers with hearing impairments.

Make sure your videos are captioned either with:

• closed captions: These can be toggled on and off if you are uploading to some platforms (currently Facebook and YouTube). Please be aware that automatic captioning may not be 100% accurate. Make sure to review the captions closely to make sure they are accurate before publishing your video. 
• open/burn captioning: These are overlaid on the video and visible to everyone. They require editing in the video itself.

Best practices:

• make sure your captions are clear and bold
• be aware you will need space for captions when you are filming 

Captions tend to provide only a transcript of spoken dialogue. Descriptive language however denotes the important sights and sounds that are not spoken, and can be an important addition to a video. Important information may be lost on a visually impaired viewer without this descriptive audio.

There are a number of ways to provide descriptions:

• descriptive audio: described video is the narrated description of any important non-verbal information in your video. For example, described video might include, ‘The man entered the museum’. This track is written and recorded so that it slots in between the important audio elements.
• descriptive transcript: this transcript provides descriptions along with dialogue, much like a script.

Colour

For people who are colour-blind, colour contrast is very important. The ideal contrast between a text colour and its background should be at least 4.5 to 1, for normal text. For larger text that ratio decreases, but it increases for smaller text. If you are having difficulty evaluating colour contrasts, there are several tools to assist you in making your page more accessible to users with low vision or colour blindness (see below).

• try to avoid green/red or blue/yellow combinations, as they can be very difficult to read
• distinguish blocks of content from one another using visual separation, for example with whitespace or borders
• text over images can be difficult to read, so consider using a solid background or opaque overlay
• on graphs and charts, consider also using patterns to differentiate data; don’t rely on colour for meaning, as many people are colour-blind, or interpret colours in a different way

Useful tools

• the Web Accessibility Evaluation extensions can be used on Chrome and Firefox to assess your website and its content for accessibility
• the Readability Test Tool scores the readability level of your copy. Add a link to a URL or test by direct input
• Contrast Checker lets you drag and drop a specific image for a contrast check, which is a good thing to do before uploading assets to social media
• to ensure that you aren’t using colour alone to relay information, use the free Color Oracle color blindness simulator. The open-source tool is available for Windows, Mac and Linux
• use Color Safe if you need help finding a colour palette that offers enough contrast and adheres to WCAG Guidelines
• this text-over-image accessibility tool helps you determine how legible text is based on color contrast
• contrast app is a WCAG-compliant contrast checker for Mac
• Microsoft Inclusive Design Manual offers videos and downloadable booklets on inclusive design topics
• GLAAD’s annual Where We Are on TV report offers a pretty good barometer on representation that is likely mirrored in advertising and social media marketing
• Creating Accessible Tables, guidance from WebAIM
• Creating accessible PDFs from Word documents, guidance for UAS website editors
• Inclusive Components offers accessible tips for common web interface components
• Aegisub is a free open-source tool for creating and editing subtitles
• YouDescribe, by the Smith-Kettlewell Eye Research Institute, allows volunteer describers to create descriptive audio for YouTube videos. Simply copy and paste a YouTube url into the search field and click Create/Edit Descriptions to get started. Videos can also be paused for extended audio description for when there’s not a long enough natural gap in the soundtrack.
• Overstream is a free subtitle editor that allows you to create video captions from scratch, or can be used to edit existing YouTube captions
• use Dragon Speech Recognition to transcribe an audio or video recording. Make sure to review the finished transcript for errors before sharing