Making web and social media content accessible

Accessible websites, social media posts and multimedia let people with disabilities use their content through readable presentation, navigable structure and alternatives to visual or audio information.

Equal access and usability

The W3C Web Accessibility Initiative defines web accessibility as designing and developing websites, tools and technologies so that people with disabilities can use them. ¹ Accessibility encompasses both compliance with standards and usability for people with disabilities. ¹

In 2022, a Centers for Disease Control and Prevention estimate put the proportion of Americans with a disability at about one in four, or 25%. ^{1, 2} Disabilities can be situational, temporary or permanent and may be hidden, including chronic fatigue syndrome, diabetes, depression, visual or auditory disabilities and learning difficulties. ¹ An ageing population increases the need for equal access to technology, including the web. ¹

A website can provide a first impression of an organisation; inaccessible information can fail to reach its audience and jeopardise the organisation’s reputation. ¹ Inaccessible sites, uncomfortable colours and irritating autoplay sound can affect visitors’ feelings about an organisation and its information. ¹ Business owners, medical writers, technical editors, social media managers, web designers and information technology administrators all contribute to a better web experience. ¹

Accessibility can benefit an organisation by:

• Helping ensure equal access.
• Broadening its audience and customer base.
• Enabling search engines to read its site more completely.
• Supporting legal compliance.
• Generating a positive media response.
• Supporting corporate social responsibility.
• Doing the right thing and building trust and brand loyalty.
• Improving usability for users generally.

¹

Accessible content can also help a broad customer base understand an organisation’s value, while accessibility features and comprehensive communication support clear, accurate dissemination of knowledge. ²

Guidelines and conformance

In 2022, commonly used web-accessibility guidelines included the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1 and Section 508 of the Rehabilitation Act. ³ WCAG 2.0 was published in 2008 and WCAG 2.1 in 2018, providing recommendations for making web content more accessible. ³

WCAG 2.0 and 2.1 have three conformance levels with success criteria: A for minimal compliance, AA for acceptable compliance and AAA for optimal compliance. ⁴ AA is the recommended target. ⁴

The principles underlying WCAG 2.0 and 2.1 form the acronym POUR:

1. Perceivable: content must be perceivable.
2. Operable: interface elements must be operable.
3. Understandable: content and controls must be understandable.
4. Robust: content must work with current and future technologies.

⁴

Alternative text and complex images

A screen reader presents computer-screen content through synthesised speech or a braille display for people who are blind or have low vision. ¹ Alternative text, also called alt text, alt tags or alt attributes, describes an image’s purpose and context so that a screen reader can read it aloud. ⁵ It also helps people with sensory-processing disorders or learning disabilities and helps search engines categorise images, making them more discoverable. ⁵ Missing alternative text is a common image-accessibility problem and is easy to fix. ⁵

Alternative text should be brief, aiming for at most 100–125 characters rather than describing every detail. ⁵ It should omit generic phrases such as “picture of” and “image of”, which screen readers already announce, but may distinguish a screenshot, painting or illustration where that matters. ⁶ For example, “Two chocolate brownies stacked on top of each other with blueberries, raspberries, and mint leaves on top” conveys more than “Brownies”. ⁶

As a general rule, every image should have an alternative-description attribute. ⁶ A purely decorative image, which evokes a feeling or reinforces accompanying copy without conveying independent meaning, should have a null value so that a screen reader skips it. ⁶ Giving every image a null value can pass automated validation while leaving meaningful images inaccessible, so the person adding an image should decide what it is intended to convey and use descriptive alternative text when in doubt. ⁶

Complex images can confuse people with low vision, learning disabilities or limited subject knowledge and should be simplified where possible. ⁷ Graphs and other data visualisations need a text description or plain-text summary because screen readers may not interpret them correctly. ¹ When short alternative text cannot convey a complex image, it should direct users to a long description organised with lists, headings and other structural elements. ⁷

Images of text should generally be avoided; unavoidable images should repeat the text in the alt attribute. ⁸ Logos, brand names and other cases where visual presentation is essential to meaning are exceptions. ⁸

Structure, navigation and links

Sections need identifying headings, and content should use headings and lists so that screen-reader users can navigate with quick keys and understand the overall structure. ⁹ Websites must work without a mouse, allowing keyboard navigation by people who are blind or have low vision. ¹⁰

Hyperlinks should use the actual message as link text rather than generic phrases such as “click here”, “read more”, “more info here” or “link to”. ¹¹

Colour, type and space

Paragraph text should have a contrast ratio of 4.5:1, while large text can use 3:1. ¹² Colour alone should not convey information, including in links, because people may be blind, colour-blind or have colour-contrast deficiencies. ¹² Further design advice is to:

• Avoid red with green, blue with green, and yellow with red.
• Use plenty of white space.

^{12, 13}

UserWay and WebAIM provide contrast checkers. ¹²

Liberal white space helps standardise site structure and page creation. ¹³ Deliberate white space creates structure and flow, helps readers process text and directs attention to important information; it should surround headings, margins, indentations and columns. ¹³

Fonts should have easily recognised characters, as in Arial, Calibri, Helvetica and Verdana. ¹⁴ Users should be able to zoom to 200% without affecting the content. ¹⁴ Italics, all capitals, bold and other formatting that could impair readability should be avoided. ¹⁴

Hashtags, emojis and animation

Capitalising the first letter of each word in a hashtag helps screen readers interpret it and helps people with dyslexia or cognitive disabilities read it. ¹⁵ For example, #StateOfMentalHealthInAmerica2021 separates words more clearly than an uncapitalised hashtag. ¹⁵

Emojis and GIFs should be limited. ¹⁶ An emoticon can be followed by a description in parentheses or brackets, an emoji’s description should be checked before use, and emojis should appear at the end of posts rather than interrupting their text. ¹⁶ Rapidly flashing GIFs should be avoided because they may trigger seizures in people with photosensitive epilepsy, while ongoing animation can distract people with attention deficit hyperactivity disorder (ADHD). ¹⁷

Audio, video and live streams

Audio and video may be inaccessible to people who are deaf or blind or have low vision or hearing loss, and their pace may challenge people with cognitive impairments. ¹⁸ Written transcripts are recommended for all audio and video, and videos should be described and captioned. ¹⁸ Captions help people with learning disabilities, ADHD, autism and hearing loss, as well as people facing noise, poor audio, fast speech or an accent. ¹⁸ Audio description narrates key visual elements for people who are blind or have low vision and can supplement captions. ¹⁸

Three recommendations for accessible live streams are:

1. Use a service with live captioning, such as Zoom or Google Meet.
2. Provide a transcript or fully captioned video soon after the event.
3. Hire an on-camera interpreter for an additional level of accessibility.

¹⁹

Podcasts can serve people with visual impairments through audio and people with hearing loss through captions or a transcript. ¹¹

Plain web content

Web content should use an appropriate reading level; eighth grade is a general target. ²⁰ Simple sentence structure, short paragraphs and clear, concise wording, which may be conversational, help many users with cognitive or visual disabilities. ²⁰