How to make your online content accessible

---

---

What is accessibility?

People are limited by barriers in society, not by their physical abilities or differences. As described by Shape Arts, “The Social Model [of Disability] holds that a person isn’t ‘disabled’ because of their impairment, health condition, or the ways in which they may differ from what is commonly considered the medical ‘norm’; rather it is the physical and attitudinal barriers in society – prejudice, lack of access adjustments and systemic exclusion – that disable people.”

Recognising the barriers that make life harder for people to access content online, and addressing them, creates equality and offers people more independence, choice, and control over the content they want to view and interact with.

Online accessibility is a way of designing websites, tools, and technologies so that everyone can use them easily.

Ways to remove accessibility barriers when designing accessible digital platforms and content include:

• Use a font size that is large enough and choose an easy-to-read sans-serif font type
• Use transcriptions or captions on videos
• Clear and easy-to-understand language
• Format electronic documents so that they can be read by a screen reader
• Organise information for easy reading

Web accessibility provides benefits for everyone visiting your online content, for example:

• People using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc.
• Older people with changing abilities due to aging
• People with “temporary barriers” such as a broken arm or lost glasses
• People with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio
• People using a slow Internet connection, or who have limited or expensive bandwidth

The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.

Accessibility principles

To make your platform or content accessible you should consider these 4 principles:

• Perceivable – Information and ways of interacting with it must be presented in a way that users can perceive.
• Operable – users can find and use your content, regardless of how they choose to access it (for example, using a keyboard or voice commands).
• Understandable – users can understand your content and how the service works.
• Robust – you must make sure your content can be interpreted reliably by a wide variety of user agents (including reasonably outdated, current, and anticipated assistive technologies).

By focusing on principles, not technology, they emphasise the need to think about the different ways that people interact with content. For example, users might:

• Use a keyboard instead of a mouse
• Change browser settings to make content easier to read
• Use a screen reader to ‘read’ (speak) content out loud
• Use a screen magnifier to enlarge part or all of a screen
• Use voice commands to navigate a website

For more information visit the WIA’s accessibility principles page.

Websites & mobile apps

Accessibility regulations came into force for public sector bodies and some charities on 23 September 2018. They state that you must make your website or mobile app more accessible by making it ‘perceivable, operable, understandable and robust’. You need to include and update an accessibility statement on your website.

Whether or not your organisation falls within the scope of the legislation, it still provides a benchmark for accessibility that you should be meeting with your own web platforms.

Creating an accessible website isn’t as hard as you might think. It just needs a little planning and forethought to get right.

Legislation requires that you:

• Meet the international WCAG 2.1 AA accessibility standard – although there may
  be valid legal reasons for not meeting accessibility standards
• Publish an accessibility statement that explains how accessible your website or
  mobile app is

Your accessibility statement should detail what accessible functionality your site does and doesn’t have. If it can’t meet a certain level of functionality, you can explain why it doesn’t in your statement too – this could be for financial or other practical reasons.

Gov.uk provides a sample accessibility statement and WIA has a tool that helps you create an accessibility statement for your own website, mobile application, or other digital content.

WCAG 2.1 AA accessibility standard is based on the four accessibility principles above and the actions you need to take in order to meet them. These include:

Perceivable

• Provide text alternatives (‘alt text’) for non-text content
• Provide captions for video
• Use text colours that show up clearly against the background colour
• Visual consistency – where things like navigation, breadcrumbs, etc move around the page when you navigate between content types, they can become difficult to identify and navigate

Operable

• Make sure everything works for keyboard-only users
• Not using blinking, fast-moving or flashing content – or moving content that does not allow the user to pause or disable
• Use descriptive links so users know where a link will take them, or what the downloadable linked content is
• Logical focus order – for keyboard users, each interactive element should have a predictable and logical order so that when it receives focus, the page still flows and is intuitive for them

Understandable

• Use plain English
• Keep sentences short
• Don’t use words and phrases that people won’t recognise. Avoid abbreviations and acronyms.
• Make sure design features look consistent and behave in predictable ways

Robust

• Use valid HTML so user agents, including assistive technologies, can accurately interpret and parse content
• Make sure your code lets assistive technologies know what every user interface component is for, what state it’s currently in and if it changes
• User experiences that allow the user to return to what they were doing after they’ve interacted with a status message or modal input
• This list is not exhaustive, however, Gov.uk provides an accessibility checklist you can use to see if your website or app is accessible

Social Media

While a lot of organisations will be at least somewhere along the path of making their website accessible, often for social media content, this isn’t the case. Being accessible on social media doesn’t necessarily mean meeting current guidelines and with the platforms being owned by external companies, organisations are limited in what they can do by the functionality of those platforms.

However, if you interact with your audience on social media channels, the benefits to you and them of being as accessible as possible are the same as any other platform.

Over the past several years, social media platforms have greatly increased the accessibility options available to their users.

The RNIB (Royal National Institute for the Blind) offers these six tips for making your social media accessible:

• Add image descriptions – Describing photos, or putting alternative text (alt text), for people who are blind or partially sighted is important, as it allows them to build up a mental picture of what someone who is sighted is seeing automatically. See: How to add image descriptions on different social media platforms.
• Use CamelCase in hashtags – From Vocal Eyes Twitter thread: Write accessible hashtags. Capitalize Each Word, such as #ClapForOurCarers and #WhenAllThisIsOver. Screen readers then read each word individually rather than as a long and incoherent string.
• Don’t overuse emojis – Text-to-speech software reads out a description for every single emoji which is used, so be careful with the amount of emojis you include.
• Video audio-description – If the audio of your video doesn’t describe what is happening visually, you should consider adding a description of what happens in the video either as a follow-up post, or as part of the caption.
• Subtitles – Videos should have subtitles or captions where possible. This is not only beneficial for accessibility, but it also allows your videos to be viewed with the sound off.
• Keep alert for new accessibility features – Regularly check for new accessibility features on the relevant platform(s) you use.

For more information, read this blog from SiteImprove on how to be more accessible on social media.

Language

The W3C Web Accessibility Initiative (WAI) offers guidelines about how text should be displayed and Vocal Eyes offer guidelines for making your Power Point presentations accessible, but the principles are relevant for websites as well.

Remember, the language you use is equally as important. WAI guidelines require that you “provide definitions for any unusual words, phrases, idioms, and abbreviations and use the clearest and simplest language possible or provide simplified version”. We’ve already looked at ways to make language simpler when discussing the “Understandable” accessibility principle, but they are worth repeating here:

• Use plain English
• Keep sentences short
• Do not use words and phrases that people won’t recognise – or provide an explanation if you can’t avoid it
• Explain all abbreviations and acronyms, unless they are well known and in common use – for example, UK, EU, VAT
• Make it clear what language the content is written in, and indicate if this changes
• Provide informative, unique page titles
• Use headings to convey meaning and structure
• Make link text meaningful – avoid “read more” type links.

There are several useful tools at your disposal to help simplify your text.

Hemingway App makes your writing bold and clear. It highlights lengthy, complex sentences and common errors.

Grammarly offers a similar service but you must have a paid subscription to access its most useful features.

As well as spelling and grammar checking, Microsoft Word also offers a way to get your document’s readability and level statistics though without offering any tips to improve those statistics.

Images

Images play an important part in communication. They can make information more pleasing or easier to understand for many people, including visitors using screen readers.

However, when images are not accessible, they cause barriers. The main way of making images accessible is to provide text-based alternatives that describe the content.

Having alternative text descriptions enables images to be “read” by assistive technologies such as screen readers and allows images within web content to be understood.

What kind of text alternative is needed depends on the content of the image. Some examples include:

• Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
• More functional images such as toolbar icons or buttons should describe the function of the image.
• Images of text should simply repeat the text. However, having images with text on them should be avoided wherever possible.
• If there are images that represent design elements of your content, the alternative text element should be left blank so screen readers can skip over them easily.

The WAI provides more detail on how to provide alternative text from different image types.

For websites and apps, the way you will usually provide text descriptions is via the HTML “alt” attribute. This is usually a field in the content management system of your platform, so no coding is required.

Each social media platform has a slightly different way of offering similar functionality.

See also: How to add image descriptions on different social media platforms.

Video

Whenever you publish a video, you should make it visually and audibly accessible. This means that you should provide alternative ways of delivering your content that does not only rely on images or sounds.

It’s good practice to provide a transcript of your video or add subtitles. The transcript should be easily accessible from the video, e.g. linked in your video description or on pages that have embedded videos.

To add subtitles, if you are using Apple devices or phones to record, there is an app called MixCaptions that we would recommend. You are limited to 10-minute videos and it’s not available for Android phones.

Another Apple app worth looking at is Clips which can generate subtitles based on you talking into your phone.

Stage Text offers a live subtitling service to create STT files for live events.

A word of caution though – although the technology to produce voice-to-text has come along leaps and bounds in recent years, auto-generated captions can sometimes produce inaccurate transcriptions, including poor grammar or misspelled or incorrect words.

It is good to be aware of auto-generation as an option, but you may want to use another method if you can, or at least review the results after the event, and add a corrected version of the SRT file if you need to.

Apps such as Clipomatic allow you to auto-generate captions as you record your video by detecting your voice and converting it to text.

If Apple apps aren’t an option, how to add subtitles or captions depends on the platform you are going to publish on.

• YouTube has the functionality to automatically generate subtitles and closed captions for any video you upload. Another word of caution though – sometimes these can be hilariously (or embarrassingly) wrong. Always check what it created and manually edit where required.
• Facebook doesn’t auto-generate captions but will add them for you if you upload an SRT file. An SRT is a file format for subtitles. The easiest way for you to create an SRT file is to upload your videos to YouTube first using the above process. You can keep the video hidden or delete it afterward if there is a reason why you don’t want it on YouTube. You can then download the captions from YouTube as an SRT file. These can then be uploaded with the uncaptioned video to Facebook which will do the rest for you.
• Instagram only allows open captions that are baked into your video before it is uploaded. This means that subtitles embedded within the video are viewed by everyone and can’t be turned off. There are many apps and platforms that
  help you do this, such as rev.com, Kapwing, and the previously mentioned, Clips.
• Twitter has similar functionality to Facebook in that it supports separate SRT files along with the video. In order to generate an SRT file, we’d recommend using the same process of uploading to YouTube first.

Stagetext has useful resources covering other methods of subtitling your content.

Useful Links

How to do an accessibility check if you can’t pay for a professional audit

Andrew Miller , Disability Champion for Arts & Culture – Response to the Coronavirus Crisis

Stagetext – Captioning services, free captioning training videos, and other digital resources.

Disability Arts Online announces new commissions for disabled artists

Drake Music – Accessibility in Video Conferencing and Remote Meetings and Resources, info, and support during COVID-19

Vocal Eyes believe that blind and partially sighted people should have the best possible opportunities to experience and enjoy art and heritage. Their Twitter thread is an excellent introduction to accessible digital content and they have very useful accessibility resources on their website.

Deaf Explorer offers unique opportunities for Deaf artists for artistic and cultural collaboration and innovation.

How to optimise your social media posts for the visually impaired

Accessibility audit checklist

Original article by Roberta Beattie.