Surprisingly, some of the signature a11y best practices happen to have a positive impact on the carbon/resources footprint of a Website. How can it be? This presentation explores this question, showcasing 3 emblematic accessibility recommendations that will make your Website more environment-friendly.
3. 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
5. Web Accessibility (#a11y) in short
The art of making Web content Perceivable,
Operable, Understandable to all users,
including those with disabilities.
@OlivierNourry – Head of Accessibility at @VTechFr 5
6. A minor issue?
15 to 20% of people have 1 or more disabilities
that affect their daily lives.
This rate should increase over time.
@OlivierNourry – Head of Accessibility at @VTechFr 6
7. 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
@OlivierNourry – Head of Accessibility at @VTechFr 7
14. Each time you open a web page…
…you start a chain of energy consumption.
Local
network
Your
device
ISP
DNS
Data
centers
Infrastructure
@OlivierNourry – Head of Accessibility at @VTechFr 14
15. 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
16. ACCESSIBILITY TO THE
RESCUE
3 accessibility best
practices that can
reduce your carbon
footprint.
16
17. #1: Separate content and
presentation
= content in HTML only, style in CSS only.
= =
@OlivierNourry – Head of Accessibility at @VTechFr
18. Why?
Users should be able to customize presentation
@OlivierNourry – Head of Accessibility at @VTechFr
19. 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
@OlivierNourry – Head of Accessibility at @VTechFr
20. Win + Win + Win
User
Site Owner
Planet
•Customizable
•Faster
•More
maintainable
•Fewer
resources
•Smaller
carbon
footprint
@OlivierNourry – Head of Accessibility at @VTechFr
21. #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
22. 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
23. 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
24. Win + Win + Win
User
Site Owner
Planet
•Better UX
•More
productivity
•Better
engagement
•Fewer
resources
•Smaller
carbon
footprint
@OlivierNourry – Head of Accessibility at @VTechFr
25. #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
26. 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
27. 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
28. 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
30. 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
Blog: http://accessiblog.fr
Twitter: http://twitter.com/OlivierNourry
Speaker profile on Lanyrd: http://lanyrd.com/profile/oliviernourry
Image: charest-ouellet.skyrock.com
Reasons for disability rates increase:
Aging
More debilitating conditions like diabetes, cancers, strokes…
Better welfare means more people survive disabling diseases and conditions
Photo: found on http://www.tumblr.com/search/taranza/recent (uncredited)
Several electrical devices consume energy:
- Your computer (+screens, input devices, etc.);
- Your internet box, wifi-router etc.;
- The network between you and your ISP;
The network between your ISP and the server;
- The web servers (+application, content & database servers) and all the servers & data centers delivering external resources for the page.
Up AND down.