How to prepare your website and social media videos for accessibility requirements
October 27, 2021
This article is provided by Reshift Media, a Canadian-based digital marketing and development organization specializing in retail businesses.
Take a quick glance at your website – does it followed accessibility standards? What about the video content you produce on social media? If you are not sure or you think it could use some updating, now is the time to do so.
With approximately one billion people in the world living with a disability, and over six million in Canada, website accessibility is something that brands and organizations need to account for when creating content and designing their websites. Not only will it help to reach more individuals, including those with physical, visual, auditory, cognitive, or neurological disabilities and impairments, but if you are in Ontario, web accessibility has now become a law.
What are the “Web Content Accessibility Guidelines”?
Web Content Accessibility Guidelines (WCAG) is a web accessibility standard that is internationally recognized and released by the World Wide Web Consortium (W3C). On January 1, 2021, the Accessibility for Ontarians with Disabilities Act (AODA) put forth the requirement that Ontario businesses must make their website meet the requirements outlined in the WCAG 2.0 and reach Level AA. (Each guideline within the WCAG 2.0 has testable success criteria classified under three levels: A, AA, and AAA.)
If you are within Ontario, the AODA has implemented different requirements depending on if your organization is within the public sector (such as municipalities) or a business and non-profit organization. This can help you determine where you fit best and the requirements to follow. Since 2019, businesses and non-profits with 20+ employees, as well as public-sector organizations, are required to submit accessibility compliance reports. This renews every three years and for critical public sector organizations every two years. The last renewal date was June 30th, 2021. Organizations that fail to comply with the WCAG 2.0 guidelines could face a fine of up to $50,000 each day the offence occurs, while corporations can look at a fine of $100,000 each day.
Even if your company operates outside of Ontario, businesses are encouraged to increase their digital accessibility efforts. Below are some of the ways you can incorporate the WCAG 2.0 guidelines within your website, as well as how to ensure the videos distributed on social media also follow the necessary guidelines.
Add Alt Text to Images
This is a simple accessibility guideline that you can incorporate on your website because it hardly takes any time on your part but can make a significant difference for someone who is has a visual impairment. Alternative text, more commonly known as alt text, is a small description that gets added to an image to describe it.
Alt text can be applied to your images, typically in a designated section that will appear when uploading the image. However, if you do not see that option, you can include alt text by adding <alt> within an HTML image tag and then write the image description. It is important to be as descriptive as possible when writing alt text, since a screen reader, which is software that those who have a visual impairment use, will read this alt text to the individual.
Keep in mind that alt text needs to be less than 125 characters as screen readers cannot go beyond that amount. However, the images included on your website are purely decorative, you should not use alt text, as it won’t relate to the content.
Structure Content with Headings and Subheadings
An organized website using headings and subheadings to help separate content is an efficient way to not only keep your website visually appealing but also easier to comprehend. As well, for screen reader software to properly relay the correct information, your website’s content must be properly organized, and one way to do this is through headings.
To make a visual hierarchy, all titles on each webpage must use the Heading 1 or <h1> tag – how you change your font will be different based on your content management system (some may require HTML work). Heading 2 is for each section of the webpage while Heading 3 is for each subsection under the content of Heading 2, and so on.
It is important to remember that even if Heading 1 looks more appealing in a section, but is not deemed as a title, this can result in a screen reader inaccurately relaying the content to users, and it can also lead to a lack of understanding of your content from readers.
Avoid Long Lines of Text and Ensure Readability
According to the W3C, those with reading or visual disabilities can face barriers with long lines of text and may have trouble following the flow or keeping their place when presented with chunks of text on a website. The W3C recommends that each line of text on a webpage should not exceed 80 characters in width.
Accordingly, spacing in between your text needs to be considered, as some individuals with cognitive disabilities may face difficulties if the text is too close together. The W3C recommends space-and-a-half and double spacing for blocks of text, while paragraph spacing needs to be 1.5x larger than the line spacing.
To ensure readability, it is also important that your content uses plain language, which can make your content easier to comprehend for those whose first language is not English or those who have a learning disability. It is best to keep content informal, using active voice, and in short sentences.
Website Colours
The colours that you select for your website may be purely based on design, but the Canadians who experience colour blindness or low vision can face difficulties engaging with your website and correspondingly with your content depending on the contrast.
There are specific background and foreground colours that are ideal compared to others, and in order to meet Level AA in the WCAG 2.0, they must meet a luminance contrast ratio of 4.5:1. High contrast backgrounds are usually clearer but make sure that it is not an overwhelming background colour. To determine the colour combinations on your website, you can use many free tools, such as the WebAIM Contrast Checker Tool.
It is also important that colour is not the only visual cue when displaying something important or when prompting a response. For example, if a user makes an error on a form on your website, a red outline around the error is not enough. Instead, an error should include an icon and/or text, as some individuals who are colour blind or who have visual disabilities rely on text to navigate content on a webpage. This also applies to charts or graphs on your website – try using different shapes or labels to make differences more apparent.
Video Accessibility
To make videos on your website and social media accessible, there are several considerations you must take.
TRANSCRIPTS: Transcripts provides a text version of any web audio or video that can easily be accessed instead of the audio/video or alongside it. In accordance with the WCAG 2.0 Level A (which is the lowest level required) all pre-recorded audio, such as a podcast, and pre-recorded videos with no audio content, must have transcripts. Meanwhile, videos with audio content must have captions.
CAPTIONS: Captions are essential when it comes to video content. Not only are they necessary for those with auditory disabilities and impairments, but social media studies have found that there are many individuals who do not watch videos with sound. For instance, Facebook found that 85% of videos on the platform are watched without sound, while captioned videos are watched an average of 12% longer than videos without captions.
Closed captions (CC) provide captioning that can be turned on or off, similar to what you would find on television or a streaming service. Open captions provide the same captioning as CC, but they cannot turn off and are part of the video permanently.
Accurate captions that display exactly what your content expresses, and in the way you want it to be expressed, is imperative for everyone who engages with your videos to understand it them they cannot hear it. According to Google, captions should:
- Identify who is speaking if the video makes it unclear
- Describe the music playing, rather than simply displaying [music playing] – the music can add to the experience of the video.
- Try to keep it short – three lines of text at once is typically best
Note: If you decide to use CC rather than open captions, keep in mind the social media platform you are uploading to. For instance, YouTube creates built-in captions that you can edit. On Facebook or Twitter, you will likely need to create an SRT file, which requires a bit more effort in adding in captions at exact timestamps. Meanwhile, Instagram has rolled out automated CC on Stories and Reels; if someone speaks in your Story or Reel video, closed captions can be automatically generated. However, if you upload a video to your feed, open captions are likely the best choice.
Following web and video accessibility guidelines is a necessary step to make the internet an open space for everyone to access. To make your content available to as many prospective customers as possible, and to avoid a hefty fine if applicable in your province, be sure to adhere to the WCAG 2.0 guidelines.
About Reshift Media
Reshift Media is a long-time partner of the Retail Council of Canada. The company is a Toronto-based digital marketing and development organization that provides leading-edge social media, search and website/mobile development services to retailers around the world. Please visit www.reshiftmedia.com to learn more.
