Some tips for making online content more access­ible

Published Categorised as How to, Life in General, Popular Posts No Comments on Some tips for making online content more access­ible

Over the past decade I have worked as a teach­er support­ing many SEN students, and as a post­grad student had a side job at a company that did tv subtitling and audio descrip­tions. Many people want to make their online content more access­ible to people with disab­il­it­ies, and either don’t know where to start, or try but don’t get it right (this is most commonly an issue with image descrip­tions). So here’s some tips and links to in depth tutori­als for vari­ous topics.

It’s also import­ant to consider what the context of your content is, and what value the access­ib­il­ity support will provide to your audi­ence. What inform­a­tion are they miss­ing out on by not being able to see, hear or comfort­ably read the content, and how can you fix that?

For example, when I made a site for the co-op organ­isa­tion I was part of, I followed every guideline very strictly, because the content was inform­a­tion, and useful for all visit­ors.

This blog however is full of lots of purely aesthet­ic content, so although I tag the images with simple alt text summar­ies, I don’t know how valu­able in-depth image descrip­tions would be for most of the content. If you can’t see the weird 80s cake decor­at­ing book images, my attempt to describe it is not going to help you find it funny.

Choice of design template is also an import­ant aspect- for example for this person­al blog I have chosen a decor­at­ive theme where the titles of posts appear over an image. I would choose some­thing differ­ent and plain­er for a purely inform­a­tion­al site.

Subtitling

Adding subtitles to videos is very easy, and help­ful to a large selec­tion of people: those with hear­ing or sound processing issues, those learn­ing the language, and people who just want to watch quietly. Search engines also love subtitled videos too.

Many plat­forms offer auto­mat­ic algorithmic subtitling now, which varies dramat­ic­ally in accur­acy from video to video. Human-created subtitles are always super­i­or.

Youtube auto­mat­ic­ally tran­scribes uploaded videos, and you can edit the result­ing subtitles to be more accur­ate. There are complete step-by-step instruc­tions on this site.

Vimeo doesn’t auto­mat­ic­ally tran­scribe, but does let you upload an srt file. You can find instruc­tions here.

Tiktok however doesn’t have full subtitling built in, so you will have to add your own manu­ally as text decor­a­tions on the video. There are instruc­tions here.

Subtitles are univer­sally saved as plain text with an .srt ending, so can be edited in lots of differ­ent apps. You can also get hold of vari­ous free or paid apps to create subtitles, or just use the simple format­ting rules (here is a compre­hens­ive guide) to type them up from scratch quite easily.

Some tips:

  • Time the subtitle to come on a split second before the audio (if you are in control of the timings)
  • If the text is too big for the screen, summar­ise it. You only get two lines per screen.
  • Make sure to include sound effects and music cues for example and mark them in square brack­ets ie [loud explo­sion] or [piano music in back­ground] or [music- Happy Birth­day] [♫ Happy Birth­day ♫].
  • Make sure to preview the video with your subtitles and check that they sync right

On the music front, wheth­er you describe the music (ie “sinis­ter music starts”) or name the artist and the track depends on the context. You can find the music symbols here.

Gener­al text format­ting + Dyslex­ia

People have an idea that if you just slap some Comic Sans on text, it will become dyslex­ia friendly. Sadly this is not the case. Even the idea that sans-serif fonts are better is not always the case, because many of them have the letters p, d, b and q look­ing very simil­ar, which causes prob­lems.

Some­thing that is always help­ful with dyslex­ia though is having clear struc­ture. Use section head­ings, short para­graphs, and clear sentences. Using bold and ital­ics for word emphas­is is also help­ful for many people. Don’t use rambling lead-on sentences or huge walls of text. Block capit­al text can also be diffi­cult.

On websites, use html head­ing styl­ing on the section head­ings (and para­graph for the main text) rather than adjust­ing the font manu­ally. I have used h3 here. This makes sure it will work the same on computers and on phones and tablets.

screenshot of wordpress interface

Left-aligned text with a ragged right edge is better than justi­fied text, because it helps break the “wall of text” effect that is a prob­lem for people with dyslex­ia.

Make sure that the font is a reas­on­able size, and has good strong contrast with the back­ground. This is also help­ful for people with visu­al prob­lems. Very dark grey, almost black tends to be easi­er on the eye with a white back­ground rather than stark pure #000000 black. Avoid colour combin­a­tions that make the text harder to read, espe­cially if they will be a prob­lem for people with colour blind­ness who see red and green as very simil­ar.

Letter and line spacing is also import­ant- make sure the lines have a comfort­able gap between them and the letters aren’t squeezed togeth­er or spread apart. The default settings are usually fine for this, but some­times you do have to adjust these.

Some people with dyslex­ia find that laying a sheet of coloured acet­ate over the page helps. Differ­ent colours work for differ­ent people. Online, you can use browser plugins such as Nover­lay or Dyslex­ia Format­ter to change the colour back­ground and the font.

Keep­ing your site design clean and simple, without cluttered layouts is very help­ful to both people with dyslex­ia and ADHD (which often over­lap). Auto­play­ing videos, espe­cially in side­bars, are a partic­u­lar irrit­ant. Don’t fire loads of extraneous content and inform­a­tion at users who are already having to concen­trate hard to absorb the main content. News and magazine sites are the worst culprits for this, because they try so hard to monet­ise every inch of the screen.

Image descrip­tions and screen read­ers

The thing that I see the most mistakes with is image descrip­tions. The idea is to help people with visu­al issues by writ­ing a text descrip­tion of the image. Many people who have visu­al disab­il­it­ies use a text read­er, where the computer reads everything out to them. Excess, or poorly posi­tioned or format­ted text becomes very annoy­ing. For example using fancy unicode char­ac­ters as text such as ℌ???? will not say “hello” on a screen-read­er, but “math­em­at­ic­al frak­tur capit­al h, math­em­at­ic­al frak­tur small e, math­em­at­ic­al frak­tur small l, math­em­at­ic­al frak­tur small l, math­em­at­ic­al frak­tur small o”

The big issue with how a lot of people write image descrip­tions is that they don’t identi­fy and focus on what the image is commu­nic­at­ing and how or why, they just describe everything they see and give it all equal weight­ing and descrip­tion. The result isn’t help­ful to someone who can’t see or process the image, it’s a confus­ing mess, and diffi­cult to listen to or follow. The recom­men­ded length for an image descrip­tion is about the same as a tweet- 240 char­ac­ters, not a para­graph.

Of course if the image is just text, you should write it out, but pictori­al images need some thought in how to success­fully describe them.

Images are used for vari­ous purposes- purely decor­at­ive, to illus­trate points in text, provide further clari­fic­a­tion or inform­a­tion, or for iron­ic purposes. The aim of image descrip­tions is to have the same level of commu­nic­a­tion avail­able for people who can’t see the image for whatever reas­on. To do this success­fully you have to identi­fy what the purpose of the image is, and how it is used to commu­nic­ate on the page.

When I worked at the subtitling place, there was a voiceover actor who did audio descrip­tions of tv and film. She would narrate the action in between the dialogue. She didn’t describe the things in the back­ground or the unim­port­ant shoes someone was wear­ing, her focus was to make sure that people who couldn’t see the screen and only heard the dialogue could under­stand the story in the same way as view­ers who could see all the visu­al cues.

It’s also import­ant to think about when and why an image descrip­tion is useful and import­ant, and what the context is for it being useful to your audi­ence. For example when I made a site for a disabled-access­ible music venue I was part of, it was very useful for screen-read­er users to know they weren’t miss­ing out on any inform­a­tion because they weren’t seeing the images, and longer descrip­tions were useful.

On this blog however, a lot of the content is purely visu­al and only there for the visu­al content, and people aren’t going to get a lot out of a descrip­tion of my draw­ing of a snail or a 70s craft book. (However as I have already said it’s always good prac­tice to use the alt tags to provide a brief descrip­tion of images on websites- it also plays a big role in search engines find­ing and categor­ising your site prop­erly).

Websites and HTML

Word­Press and many other sites let you add in descrip­tions in the back­ground. Alt text is for a very brief summary (and also helps Google index your site correctly), and the descrip­tion for a longer one. The caption box is for a caption that appears to all users by default, not for access­ib­il­ity image descrip­tions. Here is a more inde­pth guide to how they are used.

(Yes I know that’s a $2 AUD coin, I real­ised my mistake after taking the screen­shot).

screenshot of wordpress image upload dialogue

A lot of my older images on this site have lost their alt tags from being restored from a backup. I’ve been using a Word­Press plugin that lets you bulk edit them in batches, rather than having to click through to each image. There are a lot of plugins with this func­tion to choose from, but best prac­tice of course is to remem­ber to label them as you go.

Instagram

Instagram also has alt text built in now, but it’s hidden away. When you make a post, scroll to the bottom of the new post screen and you’ll find “advanced settings”. The option to add an image descrip­tion is hidden in there. A lot of people who are using image descrip­tions on Instagram put them in the main text, because the alt text option is so hidden away.

screenshot of instagram alt text menu

Face­book

Face­book tries to auto­gen­er­ate alt-text, but it is very very bad at it. Here is an example of its attempt at a hotel sign. You can currently edit it your­self by click­ing the three dots on a photo you’ve posted and choos­ing “change alt text”

screenshot of facebook alt text generatorscreenshot of facebook menu

Examples of help­ful and unhelp­ful image descrip­tions

bluetooth hands-free glove

Unhelp­ful: “A young white man with swept back short brown hair and brown eyes is look­ing into the distance. He’s wear­ing a blue water­proof jack­et and black gloves. He has his thumb on his ear and his little finger on his mouth. The black glove has green and red icons on it and some small text. In the corner is a logo saying “Sonic IQ”. On the right hand side is a Bluetooth logo

Help­ful: “Pack­aging for Bluetooth hands free talk­ing glove. Slogan “talk and listen with your fingers”. A young man is model­ling the glove by miming a phone call with his hand.”

What is the inten­ded focus of includ­ing this picture? It’s not the model or the blue jack­et, the focus is on the silly and prob­ably useless product.

"We should improve society somewhat" cartoon

[Image descrip­tion]
A medi­ev­al peas­ant is carry­ing fire­wood in front of a castle. A smug look­ing modern char­ac­ter pops up out of a well and sits with craned fingers.
Peas­ant: We should improve soci­ety some­what
Smug char­ac­ter: Yet you parti­cip­ate in soci­ety. Curi­ous! I am very intel­li­gent.
[/​Image descrip­tion]

(If the image descrip­tion will be in the main text, you can put it between some tags like this to make it clear what it is)

Adding in descrip­tions of the green grass, the buck­et lying on the floor or the fact that the castle has two turrets doesn’t help someone who can’t see it under­stand the cartoon, and just clut­ters up the text more. Abil­ity net has some good guid­ance.

Simil­arly, describ­ing the peas­ant char­ac­ter as “wear­ing a hooded grey garment, with under eye bags, and carry­ing a bundle of twigs tied into a bundle with rope” doesn’t commu­nic­ate the cartoon very well. The artist used the trope of a down­trod­den feud­al peas­ant from old paint­ings as a visu­al short­hand for someone who is getting short­changed by soci­ety.  Adult view­ers in English speak­ing coun­tries would usually recog­nise this cliche and under­stand what the artist is convey­ing via visu­al cues.

The import­ant thing about the char­ac­ter with the orange shirt is not that they are wear­ing orange or have brown hair, it’s that they have a smug and super­i­or facial expres­sion and body language.

Again- the most import­ant thing to consider is what is the image commu­nic­at­ing and how? And how can you make the descrip­tion commu­nic­ate the same thing?

Here is a very help­ful guide to help you choose the focus of your descrip­tions, and make them concise and descript­ive.

 

 

Receive new posts via email. Your data will be kept private.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.