Making videos more accessible to the Deaf and the Hard-of-hearing

MAKING VIDEOS MORE ACCESSIBLE
TO THE DEAF AND THE HARD-OF-HEARING
Olivier NOURRY – Qelios.fr
@OlivierNourry
A11YLDN 2012 1

What is it about?
Accessible videos? You have seen that already –
everything is in the WCAG.
True – WCAG and similar resources tell you all about
the technical side of things:
 Implement captions – ok
 Ensure sufficient audio contrast – nice
 Implement sign language version – makes sense
But what about the editorial point of view?
A11YLDN 2012Olivier NOURRY – Qelios.fr
@OlivierNourry 2

Things we will discuss here
@OlivierNourry 3
As a video maker, how can I make more educated
choices when preparing, shooting, editing, or post-
producing my movie?
We’ll try to answer questions like:
 Which fonts are best suited for captions and on-screen texts?
 How to insert a sign language version?
 Which angles or framing are preferable?
 How to select voices in order to optimise audio contrasts?

A word on creativity
All these tips will somehow limit your creative
freedom.
I admit it.
Now, when you make a video for the Web, are you
creating a message vehicle, or a piece of art?
The answer to that question will determine whether
what follows is useful to you, or not.
@OlivierNourry 4

Some things you need to know
There’s not just one kind of hearing impairment:
 Some people don’t hear at all
 Some have never heard; others have heard, but not anymore
 Some people hear only loud sounds and voices
 Some people hear only certain frequencies
 Some people hear well, but are disturbed by some sounds
(hyperacousis, tinnitus)
@OlivierNourry 5

Different situations, different needs
 Some people will heavily rely on captions, others
won’t use them
 Some will need sign language exclusively
 Some will combine hearing or reading with lip-
reading
 Some people will require louder sounds, others will
need a constant volume or pitches
@OlivierNourry 6

Captioning and on-screen texts
http://www.flickr.com/photos/58558794@N07/5750588439/
@OlivierNourry 7

Users needs for on-screen texts
Generally, texts remain on screen for a very short time.
The reader must be able to read them quickly, with as
few errors as possible.
@OlivierNourry 8

Your top priority: be legible
Factors that affect on-screen legibility:
Consistence of fonts, sizes, and effects
Font face
Relative size
Colour contrasts
Colour combinations
Spacings, alignment, orientation
Quantity of text
Spelling and punctuation
@OlivierNourry 9

Consistence of fonts, sizes and effects
How fast can you read that?
“Giddy Fortune's furious fickle wheel,
That goddess b l i n d ,
That stands upon the rollingRESTLESS stone.”
William Shakespeare (in Henry V)
Simple rule: be consistent, vary only when
necessary
@OlivierNourry 10

Font face: What makes a good choice
Looks familiar to most (avoid exoticism)
Limits confusion between characters (f & t, l & 1, S & 5,
etc.); some combinations (rn & m, cl & d, oj & g, etc.); and
symetric characters (p & q, b & d).
Works well at low resolutions (media and/or device)
Includes a large set of characters: accented, graphic
symbols (like music notes), etc.
Allows a sufficient density (lines will be short)
Variations like Bold, Italics, Condensed, should be available
@OlivierNourry 11

Font face: What makes a poor choice
Fonts designed for printing
 Serif types (Times, Courier, etc.)
 Palatino, Bookman
Fonts from the Grotesk family (Arial, Univers,
Helvetica)
Tiresia, Geneva
Cursive and scripted fonts in general
Note: fonts like Verdana, Trebuchet, Georgia, are ok for some
texts, but not for captions and subtitles
@OlivierNourry 12

Font face: Some good choices
– Officina Sans Book
– Officina Sans Medium
– Unit
– Fago
– Taz
@OlivierNourry 13

Font face: about captions/subtitles
 Fonts like Verdana, Trebuchet, Georgia, are ok for
some texts, but not for captions and subtitles.
 Font of the slabserifs type work well at low
resolutions, therefore they are appropriate for
captions and subtitles:
 Rockwell:
 Serifa:
 Lucida:
@OlivierNourry 14

Size
 Text height between 1/10th and 1/25th of the
media height.
 A practical value of 1/20th is generally applied.
(so, yes, size matters)
@OlivierNourry 15

Contrasts
A good contrast will make your viewers happier!
Apply WCAG rules:
At least 4,5:1 for sufficient contrast
At least 7:1 for improved contrast.
Tips:
Insert a background (eg. very dark grey, half transparent)
behind captions
Insert borders or shadows around the characters.
@OlivierNourry 16

Colour combinations
Some colour combinations are more legible than
others, especially for people with dyslexia or
colourblindness:
Avoid pure black on pure white; look for very dark grays on
very light grays
Avoid red/green, orange/green, yellow/green, blue-
green/magenta, blue-green/purple, blue-green/blue
Prefer couples of colours chosen in {rust, terracotta, pale
yellow} or {light purple, navy blue, magenta}
@OlivierNourry 17

Spacing, alignment, orientation
 Stick with the default letter spacing
 Too wide reduces the quantity of text on screen
 Too narrow reduces legibility
 Line spacing: 1.5 times the characters height.
 Left, right, or centered. Do not justify.
 Avoid vertical, reversed, or mirrored text.
 Avoid moving, flashing, or blinking texts.
@OlivierNourry 18

Quantity
 Per line: 75 to 85 characters.
 One or two lines if possible, 3 being a maximum.
Note: captions must be synchronized with the video, so there
might be some tough choices to make in some cases.
@OlivierNourry 19

Spelling and punctuation
 Provide correct spelling and grammar.
 Use accented letters where appropriate, even on
capital letters.
 Provide correct punctuation, especially for long
texts and phrases.
@OlivierNourry 20

Sign language
http://www.flickr.com/photos/istolethetv/71915/
@OlivierNourry 21

Sign language: things to know
A language of its own:
Not a mere transposition of oral languages
Syntax and grammar differ totally
Defines a whole culture
See written language as a « second language »
All the body participates: hands, chest, face…
Different countries, different SLs.
@OlivierNourry 22

Filming a signer
Active parts of the signer’s body must be visible
Show face, chest, hands and arms
Find the right distance
Good lighting, clear background
@OlivierNourry 23
http://www.lifeprint.com/asl101/pages-signs/c/cat.htm

Size of the signed video
The smaller the insert, the harder it is to interpret.
 If possible: make the signed video as large as the main
content.
@OlivierNourry 24

Signing complexity
Sign language can convey complexity as well as oral
languages do.
However, expect difficulties when interpreting humour,
complex narration, destructured times or places, or
jargon-laden content.
 Ask an SL interpret for advice at pre-production
level.
@OlivierNourry 25

Lip reading
http://www.flickr.com/photos/thebusybrain/2973536916/
@OlivierNourry 26

A bit of myth busting
Lip reading is not a super power that replaces hearing.
It may be used to help comprehension, but is not
reliable enough in itself.
 Only 30 to 40% of English sounds are distinguishable
from sight alone.
@OlivierNourry 27

Lip reading, a misnomer
It’s not only the mouth, but the whole face that is
« read ».
@OlivierNourry 28
Not enough OK
http://www.flickr.com/photos/scazon/3617748008/

Filming talking subjects
Face or three-quarter shots.
Find the right distance, the right lighting.
Avoid obstructions (facial hair, veils, masks…).
@OlivierNourry 29
Not good Better

Low literacy
http://www.flickr.com/photos/lindaaslund/3231686432/
@OlivierNourry 30

A common issue
For native signers, written language is a second
language, at best.
Reading can be difficult, when not impossible.
 Avoid large chunks of text
 Aim for clarity
 Apply tips on legibility (on-screen texts section)
 Whenever possible, provide a signed version.
@OlivierNourry 31

Improved audio comprehension
http://www.flickr.com/photos/lindaaslund/3231686432/
@OlivierNourry 32

A note about users needs
People who are hard-of-hearing may use amplification:
 Via the content player, or their system
 Via hearing aids.
Some people hear fairly well, except for some
frequencies:
 They don’t hear them, or not well enough
 Or they hear them too well (hyperacousis).
Some people do not recognize or differentiate sounds
or voices (auditory agnosia).
@OlivierNourry 33

Ensure sufficient audio contrast
WCAG2 recommend a 20dB contrast between dialogues and
background. What does that mean?
 A quiet conversation in a library
 A normal conversation in a forest
 In a noisy street or restaurant, this would require to shout
Avoid filming in noisy places.
Whenever possible, at post-production, muffle background
noises and enhance (or re-record) voices.
Insert captions or visual cues where appropriate.
@OlivierNourry 34

Avoid overlapping sounds
One voice at a time.
Reduce background noises, music, or dialogues, or any
other interfering sounds.
 Bonus: it also improves focus on the main dialogue.
@OlivierNourry 35

Choose distinct voices
If there is a narrator, choose a voice very distinct from
those in the video.
A male voice if most voices in the video are female
An adult voice if most voices in the video are from children
or youngsters
@OlivierNourry 36

Avoid pitch and volume variations
From the beginning of the video, the users should be
able to tune their system or hearing aid appropriately.
Important variations will cause pain or discomfort, and
will require constant adjusting.
@OlivierNourry 37

Thank you!
Olivier Nourry
Business Development Manager at Qelios
@OlivierNourry
about.me/oliviernourry
@OlivierNourry 38

References
W3C/WAI : Media Accessibility User Requirements: http://www.w3.org/TR/media-accessibility-
reqs/
W3C/WAI : Media Accessibility Checklist:
http://www.w3.org/WAI/PF/HTML/wiki/Media_Accessibility_Checklist
Joe Clark : Best practices in online captioning: http://joeclark.org/access/captioning/bpoc/
Wikipedia : article : « Comparaison du volume de sources courantes de bruit » (in French):
http://fr.wikipedia.org/wiki/Comparaison_du_volume_de_sources_courantes_de_bruit
UX Movement : 6 Surprising Bad Practices That Hurt Dyslexic Users:
http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/
UX Matters: Ensuring Accessibility for People With Color-Deficient Vision:
http://www.uxmatters.com/mt/archives/2007/02/ensuring-accessibility-for-people-with-color-
deficient-vision.php
@OlivierNourry 39

Making videos more accessible to the Deaf and the Hard-of-hearing

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Plus de Olivier Nourry

Plus de Olivier Nourry (6)

Dernier

Dernier (20)

Making videos more accessible to the Deaf and the Hard-of-hearing