be green, be accessible

Green Code Lab Challenge - 2014Olivier Nourry - @OlivierNourry

Be Green, Be Accessible

WHO’S THAT GUY?

2

Accessibilista

• Active in Web Accessibility since 2006

• Full time job since 2008

• Currently Head of Accessibility atV-Technologies (@VTechFr)

• Blogger, Tweeter and Speaker

3@OlivierNourry – Head of Accessibility at @VTechFr

WEB ACCESSIBILITY –WHAT IS IT?

4

Web Accessibility (#a11y) in short

The art of making Web content Perceivable, Operable, Understandable to all users, including those with disabilities.

5@OlivierNourry – Head of Accessibility at @VTechFr

A minor issue?

15 to 20% of people have 1 or more disabilities that affect their daily lives.

This rate should increase over time.

6@OlivierNourry – Head of Accessibility at @VTechFr

Disabilities?

Situations where the user:

• does not see, or not well enough

• does not hear, or not well enough

• does not use a mouse, or a keyboard, or both

• does not understand, memorize, or focus well enough

7@OlivierNourry – Head of Accessibility at @VTechFr

DISABILITY SITUATIONS

They happen more often than you would think

8

Mobile users

9@OlivierNourry – Head of Accessibility at @VTechFr

Senior users

10@OlivierNourry – Head of Accessibility at @VTechFr

Noobs

11@OlivierNourry – Head of Accessibility at @VTechFr

Edge cases

12@OlivierNourry – Head of Accessibility at @VTechFr

THE WEB’S IMPACTS ON ENVIRONMENT

Quick reminders

13

Each time you open a web page…

14@OlivierNourry – Head of Accessibility at @VTechFr

…you start a chain of energy consumption.

Yourdevice

Localnetwork

ISP

DNS

Datacenters

Infrastructure

Rules of thumb

• More data more energy.

• More files more energy.

• More time spent by user more energy.

It has been estimated that Web design is responsible for 40% of the Web’s carbon footprint.

@OlivierNourry – Head of Accessibility at @VTechFr

ACCESSIBILITY TO THE RESCUE

3 accessibility best practices that can reduce your carbon footprint.

16

#1: Separate content and presentation

= content in HTML only, style in CSS only.

= =

@OlivierNourry – Head of Accessibility at @VTechFr

Why?

Users should be able to customize presentation

@OlivierNourry – Head of Accessibility at @VTechFr

Green benefits?

@OlivierNourry – Head of Accessibility at @VTechFr

• Lighter HTML files

less data transferred

• CSS files can be cached (browser, server)

fewer server requests

• Pages displayed faster

less time lost on the user’s end

Win + Win + Win

User

Site Owner

Planet

•Customizable•Faster

•More maintainable•Fewerresources

•Smaller carbon footprint

@OlivierNourry – Head of Accessibility at @VTechFr

#2: Help users avoid and correct mistakes

= When you design forms:

• Clarify the purpose and function of the form

• Provide clear labels for fields, field sets and buttons

• Provide useful instructions before submission

• Provide clear error messages and ease the correction process

• Leave enough time for the user to fulfill the task

@OlivierNourry – Head of Accessibility at @VTechFr

Why?

• Non-visual navigation requires correctly labeled elements and clear interactions

• Cognitive disorders like dyslexia, short-term memory loss, attention deficit disorders, etc. are relieved by clear instructions

• Newcomers, senior users, need to be reassured and guided

• Users with vision or motor impairments may need more time to fill forms

@OlivierNourry – Head of Accessibility at @VTechFr

Green benefits?

• Fewer errors

fewer server requests.

• Better guidance and assistance

less time lost on the user’s end.

@OlivierNourry – Head of Accessibility at @VTechFr

Win + Win + Win

User

Site Owner

Planet

•Better UX•More productivity

•Better engagement•Fewerresources

•Smaller carbon footprint

@OlivierNourry – Head of Accessibility at @VTechFr

#3: Provide transcripts of video and audio content

Transcript = text describing visible and audible information contained in a video or audio.

@OlivierNourry – Head of Accessibility at @VTechFr

Why?

• Make information available to users who cannot see or hear content

• Make information available to users who cannot play the video

• For some types of content, text is more usable (and useful) than video

@OlivierNourry – Head of Accessibility at @VTechFr

Green benefits?

• Same information, for only a fraction of the size

(far) less data transferred.

• Reading can be faster and more efficient than watching

o less time lost on the user’s end.

• Text can be read on any device

o Less demanding from a technological point of view.

@OlivierNourry – Head of Accessibility at @VTechFr

Win + Win + Win

User

Site Owner

Planet

•More options•Can translate•Can reuse

•Content enhancement•SEO

•Smaller carbon footprint

@OlivierNourry – Head of Accessibility at @VTechFr

ADVERSE EFFECTS?

29

A few best practices incur more data

• Subtitles

• Audio-descriptions

• Sign language videos

But it’s a small price to pay for digital inclusion.

@OlivierNourry – Head of Accessibility at @VTechFr

Thank you!

31