making videos more accessible to the deaf and the hard-of-hearing

MAKING VIDEOS MORE ACCESSIBLETO THE DEAF AND THE HARD-OF-HEARING

Olivier NOURRY – Qelios.fr

@OlivierNourry

A11YLDN 2012 1

2

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

3

Things we will discuss here

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

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?

4

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.

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

5

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)

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

6

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

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

7

Captioning and on-screen texts

http://www.flickr.com/photos/58558794@N07/5750588439/

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

8

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.

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

9

Your top priority: be legible

Factors that affect on-screen legibility:Consistence of fonts, sizes, and effects Font faceRelative sizeColour contrastsColour combinations Spacings, alignment, orientationQuantity of text Spelling and punctuation

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

10

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 rolling RESTLESS stone.”

William Shakespeare (in Henry V)

Simple rule: be consistent, vary only when necessary

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

11

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

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

12

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, GenevaCursive and scripted fonts in generalNote: fonts like Verdana, Trebuchet, Georgia, are ok for some texts, but not for captions and subtitles

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

13

Font face: Some good choices

– Officina Sans Book

– Officina Sans Medium

– Unit

– Fago

– Taz

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

14

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: A11YLDN 2012Olivier NOURRY – Qelios.fr

@OlivierNourry

15

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)

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

16

Contrasts

A good contrast will make your viewers happier!

Apply WCAG rules:At least 4,5:1 for sufficient contrastAt 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.

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

17

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}

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

18

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.

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

19

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.

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

20

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.

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

21

Sign language

http://www.flickr.com/photos/istolethetv/71915/

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

22

Sign language: things to know

A language of its own:Not a mere transposition of oral languages Syntax and grammar differ totallyDefines a whole culture See written language as a « second language »

All the body participates: hands, chest, face…

Different countries, different SLs.

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

23

Filming a signer

Active parts of the signer’s body must be visible Show face, chest, hands and arms Find the right distanceGood lighting, clear background

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

http://www.lifeprint.com/asl101/pages-signs/c/cat.htm

24

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.

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

25

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.

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

26

Lip reading

http://www.flickr.com/photos/thebusybrain/2973536916/

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

27

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.

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

28

Lip reading, a misnomer

It’s not only the mouth, but the whole face that is « read ».

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

Not enough OK

http://www.flickr.com/photos/scazon/3617748008/

29

Filming talking subjects

Face or three-quarter shots.

Find the right distance, the right lighting.

Avoid obstructions (facial hair, veils, masks…).

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

Not good Better

30

Low literacy

http://www.flickr.com/photos/lindaaslund/3231686432/

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

31

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.

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

32

Improved audio comprehension

http://www.flickr.com/photos/lindaaslund/3231686432/

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

33

A note about users needsPeople 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).

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

34

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.

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

35

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.

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

36

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 femaleAn adult voice if most voices in the video are from children

or youngsters

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

37

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.

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

38

Thank you!

Olivier NourryBusiness Development Manager at Qelios

@OlivierNourryabout.me/oliviernourry

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry

39

ReferencesW3C/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

A11YLDN 2012Olivier NOURRY – Qelios.fr@OlivierNourry