Why it’s important to make content accessible and a few easy ways to tweak online content.
Almost everyone will temporarily or permanently experience disability at some point in their life.
Disability is part of being human.
I recently watched a presentation where the presenter took ages to get a slide up — all we could see was a black screen.
The audience looked excited about being there. Even with that glitch, we were patient. But then the presenter’s audio stopped working too…. and our patience dried up.
Around 2 minutes in, I saw the blank looks appear. The smiles disappeared. We all looked distracted. And annoyed.
The presenter Staph then dropped a bombshell that brought back the smiles:
‘When you couldn’t see anything but black on the shared screen, were you thinking:
How could you help in resolving the issue? Or did you feel frustrated or stressed?
What about when you knew I was talking but you couldn’t hear? Were you annoyed?
Can you recall a time when you couldn’t fix a computer issue?’
In this powerful exclusion example, Staph helped us realise that we all have trouble completing activities in some way at some point in our lives — we all have — or have had — a disability.
‘Disability is part of being human. Almost everyone will temporarily or permanently experience disability at some point in their life.
Disability results from the interaction between individuals with a health condition, such as cerebral palsy, Down syndrome and depression, with personal and environmental factors including negative attitudes, inaccessible transportation and public buildings, and limited social support.’
This means that when we don’t consider accessibility online, we’re preventing people from participating.
It may seem daunting to know where to start. It’s a tough ask to make content accessible to everyone, on every device, all the time. Yet we must try.
Apart from being considerate and respectful by creating content that includes all our readers, we have a professional obligation to meet Web Content Accessibility Guidelines (WCAG).
The guidelines tell us our digital content must be perceivable, and easy to navigate and understand. It must also be robust and work with assistive technologies, across devices and browsers.
Don’t rely on your audience visually seeing an image. Include text descriptions of all images that you use, and that includes in email signatures, presentations, and briefing attachments.
‘Alt text’, short for alternative text, gives users who can’t see images an alternative way to gain information from images.
It’s helpful for people as it allows text to be read aloud using assistive technology such as screen readers.
Alt text is also helpful for sighted users, for instance, if they have slow internet connection.
How alt text helps people understand images on websites
The below video shows how a reader uses a screen reader to browse websites. Skip to 1:57 minutes to see how he ‘reads’ images.
How to write alt text
For informative images: Include short alt text to describe all informative images as text, as shared in W3C’s using alt attributes on img elements. W3C is a not-for-profit organisation that sets global web standards.
Example: If you include an image of a logo that’s linked to its home page, such as the Medium logo, the alt text would be: “Medium home” (screenshot below).
For images that require longer descriptions: Include a description in the alt text, then add more details on another page as NASA did for their photo of Cosmic Cliffs in the Carina Nebula (screenshot below):
Here’s a screenshot and text description of how I set up alt text on this Medium article — for the Cosmic Cliffs screenshot above:
The alternative text I used was a portion of what was included on the image’s alternative text on the Carina Nebula page. Medium has a shorter alt text character limit so I didn’t include as much as they did:
“The image is divided horizontally by an undulating line between a cloudscape forming a nebula along the bottom portion and a comparatively clear upper portion. Speckled across both portions is a starfield, showing innumerable stars of many sizes. The smallest of these are small, distant, and faint points of light. The largest of these appear larger, closer, brighter, and more fully resolved with 8-point diffraction spikes. Download the text description for more details.”
The Carina Nebula photo page included the full text description for readers to download.
Decorative images — use null alt text for decorative images. These don’t give the reader extra information. To do this, you’d use double quotation marks in the alt text field instead of typing in a description.
The image featured at the top of this article doesn’t add any extra important information — readers won’t miss out if they don’t see or hear what’s described. So, in the alt text field, I added double quotation marks: “” as shown in the screenshot below:
We’re overloaded with content each day. It’s no surprise we don’t read every word. Instead, we skim.
We’re likely to read only 20% of the words on a web page. People who have a disability skim too.
In the video below, Carin shares how she reads web pages via a screen reader:
‘A common misconception that a lot of people have about screen reader users is that they sit and listen to the screen reader droning on all day.
I don’t have all day. I got things to do! So I do a lot of skimming. But I can only do that if a page is written well.’
1. Use headings and subheadings
Write clear, short headlines with keywords upfront.
Don’t bold and enlarge text so it looks like a heading. Create headings using the heading styles built into templates such as Word.
These will help people and screen readers scan your document. They can also help you create a table of contents.
2. Break up walls of text
Keep paragraphs within 2–3 sentences. Stick to one idea per paragraph.
This one might be hard to get used to as we’ve been taught in school to write an idea in a paragraph and include all the supporting points in that same paragraph.
Be brave. Be kind to your reader. Avoid walls of text.
3. Write in plain language
Use simple words instead of complex ones. Write at a lower secondary level— use the free Hemingway editor app to figure out the level of your writing.
Simple word replacements
Instead of ‘prohibit’, use ‘ban’
Instead of ‘communicate’, use ‘tell us’, ‘let us know’
Instead of ‘demonstrate’, use ‘show’
Instead of ‘facilitate’, use ‘help’
Instead of ‘amend’, use ‘change’
4. Give hyperlinks meaningful labels
Write link text that tells the reader where they’ll go. Avoid generic link label terms such as ‘Click here’ or ‘Read more’.
Both sighted readers and readers with low vision scan text to quickly figure out what’s on the page.
Generic link labels are confusing as they don’t tell the reader where they’ll go if they select the link. This creates uncertainty and risk. Remove risk and manage their expectations.
5. Create lists
Paragraphs with lists of items can be broken down into numbered or unordered lists.
Create lists with 3 or more items with similar line lengths that begin with a noun or verb. Choose full sentences or fragments, not both.
For instance, each item on this list begins with a verb, has a similar line length, and is a fragment rather than a sentence:
- Pick up kids
- Sell shoes
- Buy groceries