Be green, be accessible

Be Green, Be Accessible
Green Code Lab Challenge - 2014
Olivier Nourry - @OlivierNourry

Accessibilista
• Active in Web Accessibility since 2006
• Full time job since 2008
• Currently Head of Accessibility at
V-Technologies (@VTechFr)
• Blogger, Tweeter and Speaker
@OlivierNourry – Head of Accessibility at @VTechFr 3

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.

A minor issue?
15 to 20% of people have 1 or more disabilities
that affect their daily lives.
This rate should increase over time.

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

DISABILITY SITUATIONS
They happen more
often than you would
think
8

Mobile users

Senior users

Noobs

Edge cases

THE WEB’S IMPACTS ON
ENVIRONMENT
Quick reminders
13

Each time you open a web page…
…you start a chain of energy consumption.
Local
network
Your
device
ISP
DNS
Data
centers
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.
= =

Why?
Users should be able to customize presentation

Green benefits?
• 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
•Fewer
resources
•Smaller
carbon
footprint

#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

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

Green benefits?
• Fewer errors
 fewer server requests.
• Better guidance and assistance
 less time lost on the user’s end.

Win + Win + Win
User

Site Owner

Planet

•Better UX
•More
productivity
•Better
engagement
•Fewer
resources
•Smaller
carbon
footprint

#3: Provide transcripts of
video and audio content
Transcript = text describing visible and audible
information contained in a video or audio.

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

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.

Win + Win + Win
User

Site Owner

Planet

•More options
•Can translate
•Can reuse
•Content
enhancement
•SEO
•Smaller
carbon
footprint

A few best practices incur
more data
• Subtitles
• Audio-descriptions
• Sign language videos
But it’s a small price to pay for digital inclusion.

Be green, be accessible

More Related Content

Viewers also liked (20)

Similar to Be green, be accessible (20)

Recently uploaded (20)

Be green, be accessible

Editor's Notes