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.